figma-design
Figma design-to-code workflows, design token extraction, component inspection, and asset export. Use when translating Figma designs into code, extracting design tokens, or referencing component specs.
77
96%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Low
Low-risk findings worth noting
Figma Design
Project design system: the frontend-design skill. Docs: https://www.figma.com/developers/api
MCP tools
| Tool | Purpose |
|---|---|
figma/get_file | Full file structure — takes depth to cap traversal |
figma/get_file_nodes | Specific nodes/frames by node_ids |
figma/get_images | Export nodes: { ids, format, scale } |
figma/get_comments | Design review comments |
figma/get_styles | Color/text/effect styles |
figma/get_components | Reusable components |
Every call needs file_key (from the file URL). Node IDs use a colon, e.g. "123:45". Never call get_file without depth on a large file — it returns the entire node tree.
Workflow
get_file_nodesfor the target frames; extract bounding boxes, fills, text styles, and auto-layout properties.- Map returned styles into token files (
src/styles/tokens.cssor token JSON) — do not inline raw hex values into components. - Build the component consuming those tokens, with a
data-testidso the result can be verified programmatically. - Verify: render in Storybook, compare DOM bounding boxes against the Figma node metrics. Acceptance: spacing within 4px, token colors exact, font family and weight exact.
- Outside threshold → fix the token mapping or ask design; re-run from step 1.
Figma → CSS, the non-obvious mappings
| Figma | CSS |
|---|---|
| Hug contents | width: fit-content |
| Fill container | flex: 1 (or width: 100%) |
| Fixed | width: Npx |
| Auto Layout gap | gap (not margins) |
| Drop shadow | box-shadow: x y blur spread color |
Auto Layout horizontal/vertical is just flex-direction: row/column.
- Repository
- monkilabs/opencastle
- Commit
fa0c341
- Last updated
- First committed
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.