Figma to React
A Figma file and a React codebase are both made of components, which makes the conversion look easy. The hard part is that the two rarely draw their boundaries in the same place. A designer may build one card with twelve variants where the code wants a card, a badge and a button.
We build React components from your design and settle those boundaries with you before writing them. The result is a component library your developers can import, not a set of screens with the markup copied into each.
Order of work
Small components first, screens last.
Inventory
We list every component in the file, note duplicates and near-duplicates, and propose the set the code should have. You approve the list.
Tokens
Variables are exported to a token file and exposed to components as CSS custom properties or a theme object, depending on your styling method.
Primitives
Button, input, checkbox, select, link, icon. Each one with all its states and a story for each.
Composites
Cards, tables, navigation, modal windows and forms, assembled from the primitives.
Screens
Pages are put together from finished components and compared with the frames at the agreed breakpoints.
Figma properties and their React equivalents
Component properties in Figma translate almost directly, provided they were named with care.
Variant becomes a union type
A Size property with Small, Medium and Large becomes a size prop that accepts exactly those three strings. A typo fails at compile time.
Boolean becomes a boolean
Show icon, Disabled and Loading toggles become true or false props with a stated default.
Text property becomes children or a label
Editable text layers become content passed in by the parent.
Instance swap becomes a slot
Where the designer can swap a nested component, the React version accepts a node, so any icon or avatar can be passed.
Interactive states stay out of props
Hover, focus and pressed are drawn as variants in Figma but handled by CSS in code. They are not props.
Code Connect, if you use it
We can link each Figma component to its code so that Dev Mode shows the real import and props.
What we work with
We fit into the project you have. For a new one, these are the defaults.
- Language
- TypeScriptReact
- Frameworks
- Next.jsViteRemix
- Styling
- CSS ModulesTailwind CSSvanilla-extract
- Workshop
- StorybookFigma Dev Mode
- Testing
- React Testing LibraryPlaywrightaxe
What helps in the Figma file
Component work depends on naming more than on drawing.
- Main components in a library, with instances used on screens
- Property names that read like prop names: size, tone, disabled
- Variant values spelt consistently across components
- Variables for colour, spacing and radius, grouped by purpose
- Loading, empty and error states for anything that shows data
- Detached instances reattached or flagged
- Icons as components on one grid size
- Notes on motion: duration and easing for transitions
Raised by engineering teams
Do you use Figma's generated code?
As a reference for sizes and colours, yes. Generated markup tends to use fixed widths and absolute positions, so components are written by hand.
Can you work inside our existing component library?
Yes. We follow your lint rules, folder layout and review process, and extend what is there instead of adding a parallel set.
How do you show that a component matches the design?
Each story is compared with its Figma counterpart at the agreed sizes. Differences are listed in the pull request. Screenshot tests can then hold that state.
Do components include data fetching?
Not by default. They take data through props, so they work in Storybook and in any framework. Wiring to your API is a separate, quoted piece of work.
Are the components accessible?
They are built with correct roles, labels and keyboard behaviour and tested with axe and a screen reader. Formal audit is done by your auditor.
Show us the library and the repo
Send a view link to the Figma library and tell us which React setup you run. We reply within one business day.