3.5 KiB
3.5 KiB
| title | aliases | tags | sources | created | updated | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Figma MCP — Code Connect Integration |
|
|
|
2026-05-15 | 2026-05-15 |
Figma MCP — Code Connect Integration
When 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
- Connect core components first — highest-frequency design system components have the most impact
- Add custom instructions — especially for UI mappings; documents prop patterns, a11y, and edge cases
- Keep mappings current — update Code Connect when component APIs change in code
- 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 — how to install and authenticate the MCP server
- wiki/claude-code/figma-mcp-custom-rules — project-level CLAUDE.md rules for Figma MCP workflow
- wiki/claude-code/figma-mcp-avoid-large-frames — selection strategy for efficient MCP output
- wiki/claude-code/mcp-integration — general MCP setup in Claude Code
Sources
raw/Code Connect integration Developer Docs.md(clipped 2026-05-13 from developers.figma.com)