Code Connect

Map design components to the components in your codebase.

Once a component is mapped, get_design_context names your code component for every instance of it, instead of drawing it from its layers. Your agent reuses AppPrimaryButton rather than rebuilding a button.

Map a component

Select an instance in Figma and ask:

Prompt

map the selected button to AppPrimaryButton in lib/widgets/app_button.dart

The agent calls add_code_connect_map with the instance, component or component set id. A component inside a set maps the whole set.

Argument	Description
`componentName`	Code component name, for example `AppPrimaryButton`.
`source`	Path of the code component in the project.
`label`	Optional framework, for example Flutter or React.

See what's mapped

get_code_connect_map lists the instances in a node and their code components, plus the components that aren't mapped yet. It's a quick way to find what's left to map.

Prompt

which components in this frame are not mapped yet?

Where mappings live

Mappings are saved in your project at .figma-local/code-connect.json, under the working directory. The folder gets its own .gitignore by default. Set FIGMA_LOCAL_MCP_CODE_CONNECT to use a different file, for example one you commit and share with your team.

To ignore the mappings for one read, the agent can pass disableCodeConnect to get_design_context. To remove one, use remove_code_connect_map.