71 lines
3.5 KiB
Markdown
71 lines
3.5 KiB
Markdown
---
|
||
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)
|