figma-code-connect
figmaMap Figma components to accurate code snippets.
design-to-code
What it does
Creates parserless Code Connect template files that map Figma components to code snippets.
When to use it
Use for Code Connect, Figma component mapping, design-to-code translation, or creating and updating Figma template files.
How to use it
Give it a Figma URL and project; it proposes a code-component match for confirmation, then creates .figma.ts templates in the project.
What you provide
- a Figma URL with node-id
- An existing project
Uses
Access · 1
This skill
Figma
Reads Figma component metadata
What you need · 4
The Figma MCP server must be connected and its Code Connect tools available.
The components being mapped must already be published to a Figma team library.
Code Connect requires a Figma Organization or Enterprise plan.
The Figma Code Connect TypeScript types must be included in tsconfig.json for autocomplete and type checking.
About this skill
- Visibility
- Public
- Repository
- figma/mcp-server-guide
- Created
- Oct 8, 2026
- Updated
- Oct 8, 2026
- Files
- 3