Figma to Code

Turn a Figma frame into typed React + Tailwind components that match the source within 2px. Paste a frame URL, and the skill reads the node tree through the Figma REST API, resolves design tokens and layout, and emits .tsx files you can drop into a Vite or Next.js project. It's built for frontend engineers who are tired of eyeballing spacing values off a design and want a faithful first draft instead.

When to use it

• A designer hands you a finished frame and you need the markup scaffolded before wiring up logic.
• You're rebuilding a marketing page or component library and want the padding, font sizes, and colors to come straight from the source of truth.
• You have a Figma file with auto-layout and component variants and want those mapped to props rather than copy-pasted divs.
• You need both light and dark renderings of the same component and the design already defines both via variables or variant modes.

How it works

Point the skill at a frame or node URL (.../file/<key>/...?node-id=<id>). It calls GET /v1/files/:key/nodes to pull the node subtree and GET /v1/files/:key/images for any raster fills and exportable assets. From the node JSON it reads:

• Tokens — fills, text styles, corner radii, and effects, preferring published variables (/v1/files/:key/variables) when your plan exposes them, falling back to local styles otherwise. These map to a tailwind.config extension and/or arbitrary-value classes.
• Layout — layoutMode, primaryAxisAlignItems, itemSpacing, and padding become flex, gap-*, justify-*, and p-* utilities. Absolute-positioned children fall back to absolute with offsets.
• Components & variants — instances of a component set become a single component whose variant axes (e.g. size, state) become a typed union prop.

Dark mode is emitted as dark: variants when the design defines a dark variable mode or a paired variant.

Example

curl -fsSL --create-dirs -o ~/.claude/skills/figma-to-code/SKILL.md https://claudeskil.com/skills/figma-to-code/SKILL.md

# Then, in your project:
claude "generate components from
  https://www.figma.com/file/AbC123/Marketing?node-id=412%3A88
  into src/components, use tailwind arbitrary values for off-scale spacing"

Requires a Figma personal access token (FIGMA_TOKEN); the skill prompts for it on first run and reads it from the environment afterward.

Tips & gotchas

• Select the right node. Right-click a frame in Figma and "Copy link to selection" so the node-id targets exactly what you want — passing the file URL alone grabs the whole page.
• Name your layers. Layer names become component and prop names. Frame 1247 produces ugly identifiers; rename before generating.
• Use auto-layout. Hand-positioned frames generate brittle absolute coordinates instead of clean flex utilities.
• Token round-trips beat magic numbers. If a value isn't on your Tailwind scale, the skill writes gap-[13px] rather than rounding silently — review these for scale drift.

FAQ

Does it overwrite my existing components? No. It writes new files and reports conflicts; merging into hand-edited components is left to you.

What about images and icons? Raster fills are exported via the images endpoint and referenced locally; vector nodes are inlined as SVG.

Can it hit a 2px match on gradients and shadows? Linear/radial fills and drop shadows are translated to the closest Tailwind equivalent; complex layered effects may need a manual pass.