Before you start
Who can use this feature
Professional, Organization, Government, and Enterprise plans
Requires a Full or Dev seat
Requires components connected with Code Connect
When your design system components are connected to code with Code Connect, the Figma MCP server adds real implementation details from your codebase to the context it sends your agent. This helps your agent generate code that uses your actual components and follows your team's patterns.
For an overview of Code Connect and how to set it up, see Code Connect.
What your agent gets from Code Connect
When the MCP server processes a frame that contains connected components, it wraps each one in a <CodeConnectSnippet> marker in the context it sends your agent. Each marker can include:
- Design properties: The component's current property values in Figma, such as variants, boolean properties, and text
- Import statements: How to import the component in your code
- Component snippet: Code showing how to use the component
- Instructions: Any custom instructions you've added to guide your agent
What's inside each marker depends on whether you set up the connection with Code Connect CLI or Code Connect UI.
| Code Connect CLI | Code Connect UI | |
| Import statement | Uses the imports field in your Code Connect file. If that's empty, uses the source field, which is filled in automatically in some cases, such as React. If both are empty, there's no import statement. |
Generated from the component path and component name you entered for the connection. If you didn't enter a component name, it's based on the Figma component's name. |
| Component snippet | The snippets you wrote in your Code Connect file, including how Figma properties map to your component's props and where the component is defined | Generated from the Figma component's name and current properties. Shows which component to use and basic usage, but not full code snippets. |
| Best for | Detailed, exact examples of how your team uses each component | Quick setup inside Figma, with custom instructions for extra guidance |
Add custom instructions
With Code Connect UI, you can add instructions to each connection to give your agent more guidance, such as prop patterns, accessibility requirements, and team conventions. The MCP server includes them in the marker as user rules.
To add instructions, use Add instructions for MCP when you set up or edit a connection. Learn how in the Code Connect UI setup guide.
Choose which framework your agent gets
If a component is connected to more than one framework, such as React and SwiftUI, you can control which connection your agent receives:
- Desktop server: Uses the Code Connect connection you've selected in Dev Mode.
-
Remote server: Ask your agent to set the
clientFrameworksparameter to your Code Connect label, such asReactorSwiftUI.
Note: On Professional plans, the MCP server only returns connections for your active library and framework.
Best practices
- Start with your core components. Connect the components your team uses most first.
- Add custom instructions. Document component-specific patterns, accessibility requirements, and edge cases.
- Keep connections up to date. When a component's API changes in your codebase, update its Code Connect connection.
- Test and refine your instructions. Use the preview in Code Connect UI to check the generated snippets, and adjust your instructions until they match your team's patterns.
Use Code Connect when copying from Figma Make to Figma Design
Requires a Full seat.
Code Connect also works in the other direction. When you copy a Make into Figma Design, Make can use the matching components from your design library instead of plain layers. This requires a React codebase with Code Connect set up and Figma access to your GitHub repository.
Learn how in Make in your local codebase: Copy components to Figma Design.