Skip to content

Map React props to Figma properties#656

Open
mkernohanbc wants to merge 29 commits intomainfrom
430-figma-code-connect
Open

Map React props to Figma properties#656
mkernohanbc wants to merge 29 commits intomainfrom
430-figma-code-connect

Conversation

@mkernohanbc
Copy link
Copy Markdown
Contributor

This PR starts the process of implementing Figma's Code Connect API (see #430). It adds *.figma.tsx files containing mappings between React props and Figma props alongside each component. It does not touch component files themselves.

Initial mappings were auto-generated using Figma's migration script, and then manually checked. This process has surfaced various inconsistencies between component and implementation in Figma and React (for example, inverted booleans and type mismatches.) These will be addressed in subsequent PRs.

Figma does not provide a method to test Code Connect implementation on a branch, so the next steps will be to:

  1. Publish initial mappings to Figma
  2. Review mappings in Code Connect
  3. Update properties in Figma
  4. Follow-up PRs to adjust mapping files

@mkernohanbc mkernohanbc added this to the Components v0.8.0 milestone Apr 17, 2026
@mkernohanbc mkernohanbc self-assigned this Apr 17, 2026
@mkernohanbc mkernohanbc added the Components Changes or issues affect the design-system-react-components package label Apr 17, 2026
@mkernohanbc mkernohanbc linked an issue Apr 17, 2026 that may be closed by this pull request
@mkernohanbc mkernohanbc requested a review from ty2k April 17, 2026 16:47
Copy link
Copy Markdown
Contributor

@ty2k ty2k left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super cool! 🦾 🤖

I don't have a way to test this with the full Figma integration, but I've tested that:

  • All scripts still run as expected
  • All tests still pass
  • No linting or formatting issues
  • No change to the distributed code after running build (ex: to make sure the code from the *.figma.tsx files doesn't accidentally end up in the dist bundle)

There are no blockers to merging here, but I have a couple of things to note below. Also, can we please add a line or two to the README to point out what these files are for?

@@ -0,0 +1,7 @@
{
"codeConnect": {
"include": ["**/*.figma.ts", "src/components/**/*.tsx"],
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see **/*.figma.ts in the include globs here, but no new files that would match this pattern. I think this is auto-generated, so just pointing this out.

"react-dom": "^16.14.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
},
"devDependencies": {
"@figma/code-connect": "^1.4.3",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we please pin this to just "1.4.3" to match the pinning for the rest of the devDependencies?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Components Changes or issues affect the design-system-react-components package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement Figma Code Connect

2 participants