Skip to main content

Code Connect integration

When you have Code Connect set up for your design system components, the Figma MCP server enhances its output by including real implementation details from your codebase. This helps AI agents generate code that's consistent with your actual component library and design patterns.

How Code Connect enhances the context window​

When the MCP server processes a Figma frame that contains components connected via Code Connect, it generates special <CodeConnectSnippet> wrapper components in its context window. These synthetic components serve as markers that include:

  • Design properties: The Figma component's current property values (variant, boolean props, text content, etc.)
  • Import statements: Code showing how to import the component
  • Component snippet: The actual component usage code
  • Instructions: Any custom instructions you've added to help guide AI code generation

The specific content inside these wrappers depends on whether you're using Code Connect CLI or Code Connect UI.

Code Connect CLI mappings​

When you use the Code Connect CLI to create mappings, the MCP server includes richer implementation details in the CodeConnectSnippet.

Import statements​

For CLI mappings, the import statement is generated using:

  • The imports field if explicitly provided in your Code Connect file, OR
  • The source field, which is auto-populated in some cases (e.g., React snippets)

If neither field is populated, the import line is omitted.

Component snippets​

The user-defined snippets from your Code Connect file are included as children of the CodeConnectSnippet wrapper. This provides:

  • Direct implementation examples from your codebase showing how to use the component
  • Prop mappings: How Figma properties map to component props in your code
  • Component source paths: File locations where components are defined

This rich context helps AI agents understand not just what the design looks like, but how to implement it using your actual components with the exact patterns your team uses.

Code Connect UI mappings​

When you use Code Connect UI to create mappings, the MCP server generates the snippet content automatically.

Import statements​

For UI mappings, the import statement is automatically generated using the mapped component path and component name you provided when creating the mapping.

If no component name was specified, the component name is inferred from the design component name.

Component snippets​

A snippet is automatically generated using:

  • The design component name
  • The current design properties (variants, boolean states, text content, etc.)

The MCP server includes which components to use and basic usage patterns, but doesn't include full code snippets by default.

Adding custom instructions​

To provide richer implementation guidance with Code Connect UI mappings, use the Add instructions for MCP feature. This lets you specify how components should be used, including prop patterns, accessibility considerations, and team conventions.

These custom instructions are included in the CodeConnectSnippet as user rules, helping the AI generate code that better matches your design system's implementation.

Best practices​

To get the most value from Code Connect integration with the MCP server:

  1. Connect your core components: Start by connecting the most frequently used components in your design system
  2. Add custom instructions: Use the "Add instructions for MCP" feature to document component-specific patterns, accessibility requirements, and edge cases
  3. Keep mappings up to date: When component APIs change in your codebase, update the corresponding Code Connect mappings
  4. Iterate on your instructions: Use the preview feature in Code Connect UI to test your instructions and refine them until the AI-generated snippets match your team's patterns and expectations