ci: automate Figma Code Connect validation and publishing - #1369
Conversation
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Autofix Details
Bugbot Autofix prepared fixes for both issues found in the latest run.
- ✅ Fixed: Removed update-readme-content script
- Restored the root package.json script to run scripts/update-readme-content.ts via tsx so create-package and docs references work again.
- ✅ Fixed: Git diff failure skips validation
- Changed the git diff error path to throw and fail the process so CI cannot skip Code Connect validation when the diff cannot be computed.
Or push these changes by commenting:
@cursor push 0b29c63402
Preview (0b29c63402)
diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
"test:scripts": "NODE_OPTIONS=--experimental-vm-modules yarn jest --config ./jest.config.scripts.js --silent",
"test:storybook": "yarn workspace @metamask/storybook-react test-storybook",
"test:verbose": "yarn workspaces foreach --all --parallel --verbose run test:verbose",
+ "update-readme-content": "tsx scripts/update-readme-content.ts",
"validate:figma-code-connect-changes": "tsx scripts/validate-figma-code-connect-changes.ts",
"workspaces:list-versions": "./scripts/list-workspace-versions.sh"
},
diff --git a/scripts/validate-figma-code-connect-changes.ts b/scripts/validate-figma-code-connect-changes.ts
--- a/scripts/validate-figma-code-connect-changes.ts
+++ b/scripts/validate-figma-code-connect-changes.ts
@@ -120,10 +120,10 @@
.filter(Boolean);
} catch (error) {
const message = error instanceof Error ? error.message : String(error);
- console.warn(
- `Unable to diff against ${args.at(-1)}. Skipping change validation. (${message})`,
+ // Fail validation if we cannot determine the diff, rather than silently skipping.
+ throw new Error(
+ `Unable to diff against ${args.at(-1)}. Failing change validation. (${message})`,
);
- return [];
}
}You can send follow-ups to the cloud agent here.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
|
@cursoragent token has been added address all comments, then see if CI passes |
|
All review comments are addressed and CI is passing. Fixes applied
CI statusLatest run passed ( PR: #1369   |
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
803fea5 to
ac13d8f
Compare
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
Add GitHub Actions workflow to dry-run Code Connect on every pull request and publish mappings when changes merge to main. Includes a change validation script for new components and CI documentation updates. Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Fall back to parse-only validation on PRs when the repository secret is not configured, so CI passes while the token is being set up. Publishing on main still requires the token. Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
- Restore update-readme-content script removed from package.json - Fail validation when git diff fails instead of silently passing - Use execa instead of execSync for safer git commands - Refactor validation context to avoid process.env in tests - Fix eslint/prettier/jest issues in validation script and tests - Fetch PR base branch in CI before running change validation Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Remove custom validation scripts and CI wrappers. PRs run figma:connect:publish:dry-run directly; merges to main run figma:connect:publish. Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Add a path detection job so dry-run and publish run only when .figma.tsx or figma.config.json files change, per Figma CI guidance. Treat a skipped figma job as success in the required checks gate. Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
94b1bb6 to
04bdcc1
Compare
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Failed detect job skips Figma CI
- Made all-jobs-complete depend on and require success from detect-figma-code-connect-changes so a failed detect cannot be masked by a skipped figma-code-connect.
Or push these changes by commenting:
@cursor push d3baa38311
Preview (d3baa38311)
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -147,6 +147,7 @@
- lint-build-test
- test-storybook
- chromatic
+ - detect-figma-code-connect-changes
- figma-code-connect
outputs:
passed: ${{ steps.set-output.outputs.passed }}
@@ -161,6 +162,7 @@
"lint-build-test:${{ needs.lint-build-test.result }}"
"test-storybook:${{ needs.test-storybook.result }}"
"chromatic:${{ needs.chromatic.result }}"
+ "detect-figma-code-connect-changes:${{ needs.detect-figma-code-connect-changes.result }}"
)
for entry in "${REQUIRED[@]}"; doYou can send follow-ups to the cloud agent here.
Reviewed by Cursor Bugbot for commit 04bdcc1. Configure here.
Require the detect job to succeed in All jobs complete so a failed git fetch or diff cannot skip Code Connect validation while the required check still passes. Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
| echo "changed=true" >> "$GITHUB_OUTPUT" | ||
| else | ||
| echo "changed=false" >> "$GITHUB_OUTPUT" | ||
| fi |
There was a problem hiding this comment.
Path-gated so most PRs never hit the Figma API. The regex only matches .figma.tsx files and figma.config.json under the two design-system packages — component source changes alone do not trigger validation or publish.
| - detect-figma-code-connect-changes | ||
| if: > | ||
| needs.detect-figma-code-connect-changes.result == 'success' && | ||
| needs.detect-figma-code-connect-changes.outputs.changed == 'true' |
There was a problem hiding this comment.
Both conditions matter: changed == true alone is not enough, because a failed detect job also produces a skipped Figma job. Requiring result == success keeps a broken git fetch/git diff from silently bypassing Code Connect checks.
| needs.detect-figma-code-connect-changes.outputs.changed == 'true' | ||
| uses: ./.github/workflows/figma-code-connect.yml | ||
| with: | ||
| publish: ${{ github.event_name == 'push' }} |
There was a problem hiding this comment.
publish is true only on push (main after merge). Pull requests always get a dry-run against the Figma API, so Dev Mode mappings only update after code lands on main.
|
|
||
| all-jobs-complete: | ||
| name: All jobs complete | ||
| if: ${{ always() }} |
There was a problem hiding this comment.
always() is required because figma-code-connect is often skipped. Without it, a skipped dependency would cancel this gate job and All jobs pass would never run.
| if [[ "$FIGMA_RESULT" != "success" && "$FIGMA_RESULT" != "skipped" ]]; then | ||
| echo "figma-code-connect finished with $FIGMA_RESULT" | ||
| exit 1 | ||
| fi |
There was a problem hiding this comment.
Detect is a hard required check; Figma itself may be success or skipped. That lets PRs with no Code Connect file changes stay green, while still failing the required check if detect errors or if dry-run/publish fails when it does run.
| publish: | ||
| description: 'Publish Code Connect mappings to Figma (true on main push, false on PR dry-run)' | ||
| required: true | ||
| type: boolean |
There was a problem hiding this comment.
Single reusable workflow for both PR validation and main publish. Callers flip this boolean; the job name and which yarn script runs both derive from it so we do not maintain two nearly identical workflows.
| - name: Checkout and setup environment | ||
| uses: MetaMask/action-checkout-and-setup@v1 | ||
| with: | ||
| is-high-risk-environment: ${{ inputs.publish }} |
There was a problem hiding this comment.
Publish is treated as high-risk because it writes to the shared Figma file via FIGMA_ACCESS_TOKEN. Dry-run stays low-risk since it only validates against the API and does not mutate Dev Mode mappings.
| if: ${{ inputs.publish }} | ||
| env: | ||
| FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }} | ||
| run: yarn figma:connect:publish |
There was a problem hiding this comment.
On PRs this runs yarn figma:connect:publish:dry-run; on main push it runs the real publish. Both platforms (React + React Native) are covered by those root scripts, so one CI job keeps both packages in sync with Figma.
| "figma:connect:publish:react:dry-run": "figma connect publish --dry-run --config packages/design-system-react/figma.config.json", | ||
| "figma:connect:publish:react-native": "figma connect publish --config packages/design-system-react-native/figma.config.json", | ||
| "figma:connect:publish:react-native:dry-run": "figma connect publish --dry-run --config packages/design-system-react-native/figma.config.json", | ||
| "figma:connect:publish:react": "figma connect publish --exit-on-unreadable-files --config packages/design-system-react/figma.config.json", |
There was a problem hiding this comment.
--exit-on-unreadable-files is Figma's CI recommendation: a broken or unreadable .figma.tsx fails the job instead of being skipped. That makes dry-run useful as a merge gate when Code Connect files change.
| - **Code Connect (Write)** — required for publishing and API validation | ||
| - **File content (Read-only)** — required for reading component definitions | ||
|
|
||
| Use a service account or bot token with access to the [MMDS Components Figma file](https://www.figma.com/design/1D6tnzXqWgnUC3spaAOELN/%F0%9F%A6%8A-MMDS-Components?m=auto), not a personal token tied to an individual contributor. |
There was a problem hiding this comment.
CI depends on a repo FIGMA_ACCESS_TOKEN with Code Connect write + file content read. Prefer a shared service/bot token so publish on main does not depend on any one contributor's personal Figma access.
Change Tag Code Connect files so this PR runs Figma validation instead of skipping it. Template-file migration cannot land until all parser mappings move to CLI v2 together. Co-authored-by: Cursor <cursoragent@cursor.com>
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
4 participants
Description
This PR adds automated Figma Code Connect CI/CD following Figma's recommended workflow:
yarn figma:connect:publish:dry-run— validates Code Connect files against the Figma API without publishingmain:yarn figma:connect:publish— publishes Code Connect mappings to Figma Dev ModeThe job only runs when Code Connect files change (
**/*.figma.tsxorfigma.config.jsonin either design system package).This branch was rebased onto latest
main. The newcheck-releasejob frommainis kept. The required-checks gate:detect-figma-code-connect-changesto succeed, so a failedgit fetch/git diffcannot skip validation whileAll jobs passstill succeedsOther changes
.github/workflows/figma-code-connect.yml, integrated intomain.ymlas a required check (skipped when no Code Connect files change)--exit-on-unreadable-filesto allfigma:connect:publishscripts (Figma's CI recommendation)docs/figma-code-connect.mdand.cursor/rules/figma-integration.mdwith CI workflow documentationNew components without
.figma.tsxfiles are not enforced in CI — that remains a manual / cursor rule / Bugbot check.Related issues
Fixes: N/A
Manual testing steps
Check workflows(actionlint) passes on this PRDetect Figma Code Connect changessucceeds andFigma Code Connectis skipped (this PR does not change.figma.tsxorfigma.config.jsonfiles)All jobs passsucceedsFIGMA_ACCESS_TOKENis configured as a repository secret with Code Connect (Write) and File content (Read-only) scopesScreenshots/Recordings
Pre-merge author checklist
Pre-merge reviewer checklist
Setup required
Add a
FIGMA_ACCESS_TOKENrepository secret with access to the MMDS Components Figma file. Seedocs/figma-code-connect.mdfor scope details.