Code Connect: linking Figma components to your code

Code Connect links Figma components to the ones in your repo so Dev Mode and AI agents use your real code. Requirements, CLI, templates and limits.

info Quick Definition

Code Connect is the Figma tool that links a component in your code to its equivalent component in Figma. Once published, Dev Mode shows the code from your system instead of auto-generated examples, and Figma’s MCP server gives the agent the same reference.

What is Code Connect and what does it solve?

When a designer opens a component in Dev Mode, Figma shows a code snippet. Without Code Connect, that snippet is generic and rarely matches your real library. With Code Connect, it shows the component from your repository, with its props and names.

The same link serves the agent. According to Figma’s documentation, get_design_context generates code that reuses your components when they are connected. The guide on structuring files presents it as the most effective way to get the agent to reuse your real components; without it, the agent has to guess which one matches. How the agent reads the design is covered in From Figma to code with MCP; here we stay on the link itself. It connects with the problem of reusing instead of inventing and with having a design system that AI can read.

What do you need to use it?

According to the official documentation:

Plan and seat. A Dev or Full seat on a Professional, Organization or Enterprise plan.
Limits on Professional. One active library and one active framework. The first publish sets the team’s framework; an admin can change it under Admin, Settings, Resources, Code Connect. Connections for the previous framework are kept with a Deactivated badge, but the MCP server does not return them. Organization and Enterprise can have several active frameworks.
For the CLI. Node.js 18 or newer and a personal access token with the Code Connect scope set to Write and the File content scope set to Read.

How is it set up: CLI or Code Connect UI?

	CLI	Code Connect UI
Where it runs	In your repository, from the terminal	Inside Figma, nothing to install
Property mapping and dynamic examples	Yes	Not yet, according to the documentation
Scope	Several frameworks on Organization and Enterprise	Limited to one code library
Built for	Engineering teams that want precision and control	Collaboration between design and engineering

The CLI is installed as a global npm package (@figma/code-connect) and published with npx figma connect publish, with the token in the FIGMA_ACCESS_TOKEN variable or passed with --token. Template files are named after the component (Button.figma.ts) and live next to it; a figma.config.json at the project root sets the snippet label and language.

The UI opens in a library file: in Dev Mode you choose Library and then Connect components to code, and match each published component to a code path. Connecting GitHub is optional (it autocompletes paths), requires being the file owner (or an admin on Organization and Enterprise) and does not support GitHub Enterprise Server. The UI allows one-to-many connections: one design component can point to implementations in React, SwiftUI or Compose. Connections created with the CLI appear in the UI but can only be edited from the CLI.

Which formats and frameworks does it support?

Template files (.figma.ts or .figma.js) are now the only path Figma actively maintains. They are framework-agnostic and use helpers such as getEnum, getBoolean and getString. The framework-specific parsers (React and React Native, HTML with Web Components, Angular and Vue, SwiftUI and Jetpack Compose) are legacy: as of August 17, 2026, Figma stopped updating them, although they remain available in older CLI versions. To convert old files there is npx figma connect migrate.

If you inherit a repository with figma.connect() calls in React, it does not break immediately, but you should plan the migration.

How does an agent use it?

With the MCP server, the agent has tools such as get_code_connect_map (reads the connections of the selected instances) and add_code_connect_map (links a Figma component to a code component). On the desktop server it uses the connection you selected in Dev Mode; on the remote server you have to ask it to pass your Code Connect label, such as React or SwiftUI, in the clientFrameworks parameter.

When should you NOT use Code Connect?

When your component system still changes every week. Keeping mappings up to date is ongoing work.
When the code has no components. If everything is div elements with loose styles, there is nothing to connect.
When the team has no design system with shared names. Mappings fail silently when names do not match.
When the project is a disposable prototype.

Example

Illustrative example: a team has a React Button with the props variant and size. In Figma, the component has the properties Type: Primary | Secondary and Size: Small | Large. An engineer writes the template that translates Type to variant and Size to size; enum values must use the exact option names from Figma. After publishing, Dev Mode shows <Button variant="primary" size="lg" />.

Later an agent is asked to build a screen. It checks the mapping, sees that Button exists and uses it with those props, instead of creating a new button.

The designer’s role is in two places: naming Figma properties with care, and checking in Dev Mode that the published snippet makes sense.

Common mistakes

Mapping components that do not exist in the code yet. The mapping has to point to something real.
Expecting Code Connect to run your logic. The files are not executed: snippets are text, and a ternary operator shows up verbatim in the output.
Naming Figma properties differently from code props without a translation. The snippet becomes confusing.
Forgetting to republish after changing a component. The mapping keeps the previous version.
Starting with the UI and expecting property mapping: today only the CLI provides it.
Using Code Connect as a replacement for usage documentation. It tells you what the component is called, not when to use it.

Sources

Frequently asked questions

What is Figma Code Connect?

It is a tool that links components in your code to components in your Figma files. Dev Mode then shows production code snippets instead of auto-generated examples, and Figma’s MCP server gives the agent the same reference.

Does Code Connect generate code on its own?

No. Code Connect does not write components. It connects the ones that already exist in your repo with their Figma equivalents and, with the CLI, defines how design properties translate to code props.

Which Figma plan and seat does Code Connect need?

According to the official documentation, a Dev or Full seat on a Professional, Organization or Enterprise plan. On Professional only one library and one framework can be active at a time; Organization and Enterprise support several frameworks.

What is the difference between Code Connect UI and the CLI?

The CLI runs in your repository and supports property mapping and dynamic examples. The UI works inside Figma with nothing to install, but according to the documentation it does not yet support property mapping or dynamic examples and is limited to one code library.

What happens if I use an agent without Code Connect?

The agent has to guess which code component matches each piece of the design. It may create a new component instead of using the one you already have.