Web development
Figma to React without rebuilding the UI
Figma to code is not an export button. It is a translation from frames to tokens, tokens to components, props, the flow that survives screen two.
Key points
- Map tokens before components, not after.
- Compare the component's states, not only the default frame.
- A handoff is done when the developer never reopens Figma to work out the focus state.
Figma to React is not an export. It is a translation: frames become tokens, tokens become components, components become props. Skip one step and you get a screen that looks right and code nobody wants to maintain.
Map the tokens before the components
List the colours, text styles, spacing, radii and shadows in the file. If two designers used two greys for the same surface, merge them now. A React implementation needs a token for every decision, not a hex value for every layer.
Compare states, not pixels
For every frame, find the nearest React component. Compare default, hover, focus, disabled, loading and error. If the design needs a state the component does not have, decide whether to extend the component or change the design. Do it before you write code.
| Figma frame | Question | Decision |
|---|---|---|
| Button | Is focus visible? | Use the component, or add a focus token |
| Input | Is the error announced? | Wire up aria-invalid and the message |
| Card | Does the height vary? | Grid, not a fixed height |
| Dialog | Escape and focus? | An accessible primitive, not a div |
Translate the layout, not the measurements
A width of 347px is not a requirement. A 24px gap, a 12-column grid and a max-width are. Turn fixed measurements into layout rules, and keep raw numbers only where they genuinely belong, such as an avatar or an icon.
The 30-minute flow
- 10 minutes: tokens and names.
- 10 minutes: mapping components and states.
- 10 minutes: copy, errors and mobile conditions.
- By the end, the developer must be able to name every component and every token without opening Figma.
The full guide is Figma to React: handoff without rebuilding the UI.
Frequently asked questions
Can Figma export React?
It can generate code, but it knows nothing about your design system, your tokens or your states. The export is a draft, not a handoff.
What does a complete handoff need?
Tokens, mapped components, states, real copy, mobile conditions, and a person who can answer questions.
Tokens or Figma variables?
Variables help you maintain them, but the contract is the name and the value shared between design and code. Export the tokens, not just the frames.
How long does it take?
For a simple screen, 30 minutes of mapping. For a flow, half a day: the cost sits in the exceptions, not in the base components.
How do I handle images?
Export them at defined sizes and formats, declare width and height, and use sizes. An image with no dimensions is a layout shift waiting to happen.