---
title: "Figma MCP — Code Connect Integration"
aliases: [figma-code-connect-mcp, code-connect-mcp-integration]
tags: [figma, mcp, code-connect, design-system, ai-codegen]
sources: [raw/Code Connect integration  Developer Docs.md]
created: 2026-05-15
updated: 2026-05-15
---

# Figma MCP — Code Connect Integration

When [Code Connect](https://developers.figma.com/docs/code-connect/) is configured for your design system, the Figma MCP server injects real implementation details into the AI's context window — so generated code matches your actual component library, not a generic guess.

## How It Works

The MCP server wraps each connected component in a synthetic `<CodeConnectSnippet>` element containing:

- **Design properties** — current variant, boolean props, text content from Figma
- **Import statements** — how to import the component
- **Component snippet** — actual usage code
- **Custom instructions** — team-defined rules added via Code Connect UI

## CLI Mappings vs UI Mappings

| Aspect | CLI Mappings | UI Mappings |
|--------|-------------|-------------|
| Import source | `imports` field → `source` field → omitted | Auto-generated from mapped component path + name |
| Component name | From your Code Connect file | From mapping config; falls back to Figma design name |
| Snippet content | Full user-defined snippet (prop mappings, file paths) | Auto-generated from design component name + current props |
| Richness | High — exact patterns from codebase | Basic — design properties only (unless custom instructions added) |

### CLI — richer context

- Includes **prop mappings**: how Figma properties translate to code props
- Includes **component source paths**: file locations in your repo
- Direct implementation examples from your codebase

### UI — augment with custom instructions

UI mappings produce basic snippets by default. Use **"Add instructions for MCP"** in Code Connect UI to add:
- Prop patterns and variants
- Accessibility requirements
- Team conventions and edge cases

These appear as **user rules** inside the `<CodeConnectSnippet>`.

## Best Practices

1. **Connect core components first** — highest-frequency design system components have the most impact
2. **Add custom instructions** — especially for UI mappings; documents prop patterns, a11y, and edge cases
3. **Keep mappings current** — update Code Connect when component APIs change in code
4. **Iterate on instructions** — use Code Connect UI preview to test and refine until AI output matches team patterns

## Key Takeaways

- Code Connect + Figma MCP = AI generates code using your real components, not hallucinated ones
- CLI mappings give the richest context (full snippets, prop mappings, source paths)
- UI mappings need custom instructions to reach comparable quality
- The `<CodeConnectSnippet>` wrapper is synthetic — it's injected by the MCP server, not in Figma itself
- Start small: connect the 5–10 most-used components and add instructions iteratively

## Related

- [[wiki/claude-code/figma-mcp-setup|Figma MCP Setup]] — how to install and authenticate the MCP server
- [[wiki/claude-code/figma-mcp-custom-rules|Figma MCP Custom Rules]] — project-level CLAUDE.md rules for Figma MCP workflow
- [[wiki/claude-code/figma-mcp-avoid-large-frames|Avoid Large Frames]] — selection strategy for efficient MCP output
- [[wiki/claude-code/mcp-integration|MCP Integration]] — general MCP setup in Claude Code

## Sources

- `raw/Code Connect integration  Developer Docs.md` (clipped 2026-05-13 from developers.figma.com)