By Mehdi HassanWhat is Figma Code Connect?
Figma Code Connect is a feature that connects components in a Figma library to the components in your codebase. When a developer selects a Button in Dev Mode, they see your actual Button import and the props for that variant, instead of a block of generated CSS they'd never ship. It turns the inspect panel from a reference into a usable starting point.
It solves a real handoff problem: the design system exists twice, once in Figma and once in React, and nothing ties the two together. Code Connect is that tie. It's one part of a wider design-to-development handoff, and it works best when the rest of the file is already in order.
Do you need Figma Code Connect?
You need Code Connect if you have a coded component library and a Figma library that mirror each other, and developers regularly build screens from them. If either library doesn't exist yet, set up Code Connect later. Mapping components that don't match only makes the mismatch more visible.
Your situation | Code Connect worth it? | What to do instead |
|---|---|---|
Mature Figma library and React component library | Yes | Map the most-used components first |
Figma library, but code uses one-off components | Not yet | Build or adopt a coded library first |
Code library such as shadcn/ui, Figma file uses detached frames | Not yet | Rebuild key Figma components with matching properties |
Marketing site built in Framer or Webflow | No | The builder already connects design and output |
Small team where designers also write the code | Sometimes | Useful once more developers join |
Plan availability changes, so check Figma's current pricing page. Code Connect has been tied to Dev Mode on Figma's higher-tier plans, and teams evaluating it usually need to look at what Figma Dev Mode costs at the same time.
How do you set up Figma Code Connect for React?
Setting up Code Connect for React takes an install, a personal access token, one mapping file per component and a publish command. Here's the order we follow on projects where we maintain both the Figma library and the React components.
Align the properties first
Open the component in Figma and its file in code side by side. Rename Figma properties to match prop names (variant, size, disabled), and make variant values match too. This step is most of the work.
Install the package
Add Figma's Code Connect package (published on npm as @figma/code-connect) to the repository as a dev dependency.
Create a personal access token
Generate a token in your Figma account settings with Code Connect write access and keep it in an environment variable, never in the repo.
Generate a mapping file
Run the CLI's create command with the component's Figma URL. It scaffolds a mapping file next to the component, which you then edit.
Map each property
Use the helpers for strings, booleans, enums, nested instances and children to link each Figma property to its prop, and write the example JSX developers should see.
Publish and check in Dev Mode
Run the publish command, then inspect the component in Dev Mode and switch variants to confirm the snippet changes with them.
Add it to CI
Publish from your pipeline when the main branch changes, so Figma always shows the current code.
What does a Code Connect mapping actually contain?
A mapping contains three things: the Figma component's URL, a map from Figma properties to code props, and an example that shows how to use the component. Figma reads the selected variant, fills in the props and shows the result as code in Dev Mode.
Figma property type | Typical code prop | How it shows in Dev Mode |
|---|---|---|
Text property (Label) | children or label string | The actual label text in the snippet |
Boolean (Disabled) | disabled | The prop appears only when true |
Variant (Size: Small, Medium, Large) | size enum | size set to the selected value |
Instance swap (Icon) | icon or a nested component | The mapped icon component |
Nested children (list items) | children | Each child's own Code Connect snippet |
Hypothetical example: mapping a Button
For example, suppose your Figma Button has properties Variant (Primary, Secondary, Ghost), Size (Small, Medium, Large), Label (text), Disabled (boolean) and Leading icon (instance swap). Your React Button takes variant, size, disabled, icon and children.
After renaming the Figma values to lowercase to match the code, the mapping file links each one directly: the variant and size enums, the label to children, the boolean to disabled, and the instance swap to icon. When a developer selects a large, disabled ghost button with an arrow icon, Dev Mode shows the Button import with exactly those props. Nobody has to translate Ghost into a class name.
Should you use the Code Connect CLI or the in-Figma UI?
Use the CLI when developers own the mappings and want them reviewed in pull requests. Use Figma's Code Connect UI when designers or design-system leads want to link components to files in a connected repository without writing mapping code. The CLI gives richer prop mapping, while the UI is faster to start.
Pros
- CLI mappings live in the repo, so they're versioned and reviewed
- Full control over prop mapping and example code
- Publishing from CI keeps Figma current automatically
- Supports React plus other frameworks Figma documents, such as native mobile
Cons
- Someone has to maintain mapping files as components change
- Requires plan access and tokens to be managed properly
- Useless if Figma and code components don't share a structure
- Adds setup time that small teams may not get back
How does Code Connect relate to AI design-to-code tools?
Code Connect makes AI design-to-code tools more accurate, because it tells them which real components to use. When a coding assistant reads a Figma frame through Figma's MCP server, mapped components come through as your own imports rather than freshly invented markup. Without mappings, the tool guesses and you get a second, unofficial component library.
We compare those tools in Figma to code with AI. The short version: mappings are the difference between AI output you refactor and AI output you can keep.
How do you keep Figma and code components in sync?
Keep them in sync by treating a component change as one change in two places, reviewed together. When a designer adds a variant, the same ticket covers the prop and the mapping. When a developer renames a prop, the Figma property gets renamed too. Code Connect makes drift visible, but it doesn't prevent it.
This is easiest when one team owns both sides, which is how we work: the people who design the Figma library also write the components and the mappings. Set up Figma variables that sync to Tailwind, structure your Figma component library with matching properties, and run the Figma handoff checklist before publishing. If you want to see how we'd approach your library before committing, a $1,000 trial week is a low-risk way to find out.
