---
name: figma-to-code
description: "Paste a Figma link, get production-ready React + Tailwind components. Pixel-faithful. Reads Figma frames via the API, extracts tokens, layout, and components, then outputs typed React/Tailwind code that matches the design within 2px. Supports auto-layout, variants, and dark-mode variants."
license: MIT
---

# 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

```bash
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.