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.
73
90%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Figma Design
Project design system: the frontend-design skill. Docs: https://developers.figma.com/docs/figma-mcp-server/
MCP tools
Figma's own remote server (https://mcp.figma.com/mcp), signed in with OAuth. It works from a link: pass the Figma URL of the frame or layer, including its node-id. It does not see what is selected in the desktop app — that is the desktop server's feature.
| Tool | Use it for |
|---|---|
figma/get_metadata | A sparse outline of a large frame — layer IDs, names, positions, sizes. Start here on anything big, then narrow |
figma/get_design_context | Design context for one layer: structure, styles, layout, as a starting point for code |
figma/get_variable_defs | The variables and styles a layer uses — colors, spacing, typography — for token mapping |
figma/get_screenshot | A PNG of the layer, to compare against what you built |
figma/search_design_system | Components, variables and styles in the team's libraries — reuse before rebuilding |
figma/get_code_connect_map | Which code component a Figma component already maps to |
figma/download_assets | Image and vector exports |
On a large frame, get the outline with get_metadata first, then ask get_design_context for the frames you need.
Workflow
get_metadataon the frame's link; pick the node IDs you need.get_design_contextandget_variable_defsfor those nodes. Checkget_code_connect_mapandsearch_design_systemfirst — a mapped component is imported, not rebuilt.- Map variables into the token files (
src/styles/tokens.cssor token JSON). Do not inline raw hex values into components; the returned code is a starting point, not the answer — translate it into the project's components and tokens. - Build the component with a
data-testidso the result can be verified programmatically. - Verify with
get_screenshotside by side, and compare DOM bounding boxes against the 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 2.
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
c0f4566
- 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.