# Figma To React Code

> Generic skill — spec, reference, api, build, tests. Portable layer only. Do not invoke when the host ships a binding skill. Do not use for updates to an existing component or token sync only.

- Skill: `mckinsey/figma-to-react-code` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mckinsey/figma-to-react-code`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mckinsey/figma-to-react-code/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: mckinsey (https://skillmd.com/u/mckinsey)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mckinsey/figma-to-react-code

---


# figma-to-react-code

Turn a design-tool component set into a shippable React component. Run steps in order. Each step has one concern.

For updates to an existing component, use the host parity/review skill.

```
spec → reference → api → build → tests → {host exit gate}
```

## Steps

| Step        | Description                                                       | Doc                                                                                                                   |
| ----------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| `spec`      | Fetch the component set; alignment table + variant × state matrix | [spec.md](../../../docs/react-components/spec.md)                                                                     |
| `reference` | Library recipe, primitive docs, sibling                           | [reference.md](../../../docs/react-components/reference.md)                                                           |
| `api`       | Prop table + part list — show before build                        | [props.md](../../../docs/react-components/props.md) + [composition.md](../../../docs/react-components/composition.md) |
| `build`     | Implement the component file                                      | [build.md](../../../docs/react-components/build.md)                                                                   |
| `tests`     | Functional smoke + behaviour                                      | [tests.md](../../../docs/react-components/tests.md)                                                                   |

Ask before continuing when: a design axis has no sensible React expression, sibling contradicts library naming, or a new token is needed.