Figma-to-Code
A repeatable workflow: inspect the design, extract tokens, then build components top-down.
Turning a Figma design into a faithful UI is a repeatable, four-step workflow rather than pixel-pushing by eye. (1) Inspect the design for spacing, colors, typography, and the component hierarchy so you understand the structure before writing markup. (2) Extract design tokens — the color palette, the spacing scale, and the font sizes — into your Tailwind config or theme, so values come from one source of truth instead of being hardcoded.
(3) Build top-down: lay out the page shell first, then the major sections, then the individual components — this keeps the structure correct and avoids reworking layout after the leaves are built. (4) Use Figma's Dev Mode to read exact CSS values (padding, font-size, color) and to export assets (icons, images), so measurements come straight from the design rather than guesswork.
Extracting design tokens into the Tailwind theme is like centralizing magic numbers and config into a single constants/properties file instead of scattering literals through the code — one change to a token updates the whole UI, just as one config edit propagates across a service.
- Extract design tokens (colors, spacing, font sizes) into the Tailwind/theme config so the UI has one source of truth.
- Build top-down — layout shell, then sections, then components — to avoid reworking structure later.
- Figma's Dev Mode gives exact CSS values and asset exports, removing guesswork from measurements.
Interview-Ready Q&A
First inspect the design for spacing, colors, typography, and component hierarchy. Then extract design tokens (color palette, spacing scale, font sizes) into the Tailwind config or theme so values are centralized. Build top-down — layout shell, then sections, then individual components — to keep structure right. Finally use Figma Dev Mode for exact CSS values and asset export instead of eyeballing measurements.
- 1Workflow: inspect -> extract tokens -> build top-down -> use Dev Mode for exact values/assets.
- 2Push design tokens into the Tailwind/theme config for a single source of truth.
- 3Layout shell first, components last — structure before detail.