Skip to content

Files

code-connect

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Sep 10, 2024
Jul 10, 2024
Jul 10, 2024
Jul 10, 2024
Jul 10, 2024
Nov 5, 2024
Aug 13, 2024
Aug 13, 2024
Jul 23, 2024
Jul 10, 2024
Jul 10, 2024
Aug 13, 2024
Jul 23, 2024
Aug 13, 2024
Jul 23, 2024
Oct 3, 2024
Jul 10, 2024
Jul 10, 2024
Jul 10, 2024
Jul 10, 2024
Jul 23, 2024
Aug 13, 2024
Aug 13, 2024
Dec 4, 2024
Jul 10, 2024
Aug 13, 2024
Aug 13, 2024
Aug 13, 2024
Oct 3, 2024
Jul 10, 2024
Jul 11, 2024
Jul 10, 2024
Nov 5, 2024
Jul 10, 2024
Jul 11, 2024
Aug 13, 2024
Sep 10, 2024
Aug 13, 2024
Oct 3, 2024
Aug 13, 2024
Jul 24, 2024
Aug 13, 2024
Jul 10, 2024
Jul 23, 2024
Sep 10, 2024
Aug 13, 2024
Aug 13, 2024
Jul 10, 2024

Figma Code Connect for @carbon/react

Warning

Figma Code Connect for Carbon React is in an exploratory phase.

Code Connect offers a solution for linking the Carbon v11 All themes Figma library components directly to their counterparts inside of @carbon/react. By incorporating Code Connect into your workflow, Figma's Dev Mode will display actual code snippets from Carbon React.

Not only does Code Connect establish connections between component definitions, but it also facilitates the mapping of properties from Carbon React code to Figma. This capability enables the creation of dynamic and accurate examples, promoting consistency across both design and engineering.

Connecting components

You will need a Figma license with dev mode to work on code connect within Carbon.

Follow the documentation to connect a new component, or edit an existing config.

Config files for each component currently live within the react package inside the code-connect folder. Eventually these will live alongside the component code and/or be integrated with Storybook code.

"packages/src/react/code-connect/ComponentName/ComponentName.figma.tsx"

Publishing

Figma code connect is set up to automatically publish when PRs are merged into the main branch. If you need to test publishing while working locally you will need to follow the documentation and create your own FIGMA_ACCESS_TOKEN variable.

npx figma connect publish --token <token>