| name | figma-to-code |
| model | sonnet |
| description | Extracts design tokens, component structure, and layout from a Figma file and produces framework-specific code (HTML, Svelte, React, or Vue) that preserves design intent rather than pixel-copying. Use when: 'implement this Figma design', 'convert this Figma file to code', 'extract tokens from Figma', 'build this component from the design'. |
| license | Adapted from nafiurrahmanniloy/figma-skill (MIT) |
| category | continuous-learning |
| triggers | ["implement this Figma design","convert this Figma file to code","extract tokens from Figma","build this component from the design"] |
| tier | 1 |
| agents | ["primary"] |
| tool_dependencies | ["file_system"] |
| inputs | [{"name":"figma_url","type":"string","description":"URL or file reference to the Figma design file","required":true},{"name":"target_framework","type":"string","description":"Target framework — html, svelte, react, or vue","required":false}] |
| outputs | [{"name":"component_code","type":"string","description":"Framework-specific component code preserving design tokens, structure, and layout from the Figma file"}] |
Figma to Code
I. Philosophy: Design Intent Over Pixel Copying
The goal is not to reproduce every pixel from Figma — it is to capture the design intent (spacing rhythm, color relationships, typographic hierarchy) and express it in idiomatic code for the target framework. A good conversion reads like a developer wrote it with the design open, not like a screenshot was OCR'd into divs.
II. When to Use This Skill
Use when:
- User shares a Figma URL and wants code generated
- Building HTML kits that should match an existing Figma design
- Extracting design tokens (colors, spacing, typography) from a Figma file
- Need to verify implementation fidelity against a Figma source
Do NOT use when:
- User wants to CREATE a Figma design from code (use
use_figma MCP tool directly)
- Design is a screenshot, not a Figma file (use manual CSS instead)
III. Workflow
Step 1: Resolve Figma Context
Extract fileKey and nodeId from the Figma URL.
Call get_design_context MCP tool with these parameters.
This returns: reference code, screenshot, component metadata, and Code Connect mappings.
Step 2: Extract Design Tokens
From the design context, extract:
- Colors: hex values, CSS custom properties, semantic names
- Typography: font families, sizes, weights, line heights
- Spacing: padding, margin, gap values
- Border radius: corner radius values
- Shadows: box-shadow definitions
- Layout: flex/grid structure, auto-layout direction and gap
If DESIGN.md files are available in HTMLCraftStudio/templates/design-systems/, cross-reference tokens against the closest matching design system.
Step 3: Generate Framework Code
Based on user's target framework:
| Framework | Output |
|---|
| HTML/CSS | Semantic HTML + CSS custom properties + utility classes |
| Svelte | .svelte component with scoped styles |
| React | TSX component with Tailwind or CSS modules |
| Vue | SFC with and scoped styles |
