The gap between a Figma file and a production React component is where a lot of time gets lost. After doing this dozens of times, I've developed a workflow that keeps fidelity high and back-and-forth low.
Audit the design before writing a line of code
Before I touch my editor, I spend 20 minutes inside the Figma file answering three questions:
1. Are spacing values consistent? (Are they using 4/8/16/24px increments, or random values?)
2. Are there reusable components I should turn into React components?
3. What are the responsive breakpoints and how does the layout change?
Answering these upfront means I'm making architecture decisions once, not repeatedly mid-implementation.
Build tokens, then components
I translate Figma styles into CSS custom properties or Tailwind config values first. Colours, font sizes, spacing — all of it. Then components are built on top of those tokens. When the designer changes the brand colour, I change one value.
Match the component tree to the design hierarchy
If the Figma file has a Card containing a CardHeader and CardBody, my React component tree should reflect that. It makes design reviews fast — the designer can map what they see in the browser directly back to what they built in Figma.
Use the browser as a review tool
Before I call anything done, I open the browser and the Figma file side by side and eyeball them. Pixel-perfect isn't always achievable or necessary, but obvious mismatches — wrong font weight, wrong border radius, wrong spacing — should be caught here, not in review.