Figma for Developers — Read Design Files, Extract Tokens, and Hand Off Like a Pro
W
Writer
Published: 16 Jun 2026
12 min read
The practical Figma guide for developers — reading Auto Layout as Flexbox, extracting colour and typography tokens, using Dev Mode to get accurate CSS, and a 5-step handoff workflow.
Why Developers Need to Learn Figma
Most frontend developers implement designs by guessing — eyeballing spacing, picking close-enough colours, and asking the designer to review and catch mistakes. This is slow, creates rework, and frustrates both sides. The alternative is learning to read Figma files properly: understanding Auto Layout, extracting exact values, and using Dev Mode to generate accurate CSS without any guessing.
This guide is written for developers who receive Figma files but did not design them. It covers the minimum Figma knowledge you need to implement designs accurately — reading Auto Layout, understanding components and variants, extracting design tokens, using Dev Mode's code inspection, and setting up a workflow that eliminates the 'can you check my implementation' back-and-forth.
Getting Access to Figma Files
Figma has a free viewer tier — you can inspect any file shared with you at no cost. Editing requires a paid seat, but developers rarely need to edit. Ask your designer to share the file with 'can view' access. If your team uses Figma Organisation, you will need Dev Mode access (covered in Step 4).
Left panel — Layers: shows the component tree. Every element is here. Click to select. Nested groups and frames mirror your eventual DOM structure.
Centre canvas — the design. Click any element to select it. Hold Ctrl/⌘ and click to select nested elements inside a group.
Right panel — Inspect: shows dimensions, colours, typography, and spacing for the selected element. This is where you get the numbers for your CSS.
Essential Keyboard Shortcuts
Shortcut
Action
Ctrl/⌘ + click
Select element inside a group/frame
Alt/⌥ (hover)
Show distance between elements
Ctrl/⌘ + Alt/⌥ + C
Copy CSS properties of selected element
Ctrl/⌘ + G
Group selection
Space + drag
Pan the canvas
Ctrl/⌘ + scroll
Zoom in/out
Ctrl/⌘ + Shift + H
Toggle hand tool
1 / 2 / 3
Zoom to 100% / 200% / fit screen
Reading Auto Layout — The Most Important Skill
Auto Layout is Figma's equivalent of CSS Flexbox. When a designer uses Auto Layout on a frame, it means the element has a defined direction (row or column), gap between children, and padding. Understanding Auto Layout lets you write correct Flexbox CSS without measuring anything manually.
Reading Auto Layout Properties
Select an Auto Layout frame. In the right panel under 'Auto Layout' you will see: direction (horizontal = row, vertical = column), gap between items, and padding (top/right/bottom/left). These map directly to CSS Flexbox properties.
Whenever you see the Auto Layout badge in the Figma right panel, your CSS implementation should use display: flex. The direction, gap, padding, and alignment values are shown directly — you never need to measure spacing between children manually in an Auto Layout frame.
Understanding Components and Variants
Components in Figma are reusable elements — equivalent to React components. When you see a purple diamond icon in the layers panel, the element is a component instance. Variants are different states of the same component (e.g., Button with variants: Primary/Secondary, Size: Small/Large, State: Default/Hover/Disabled).
Reading Component Variants
Click a component instance on the canvas. In the right panel, you will see its variant properties — a set of dropdowns showing the current state. This tells you exactly which variant of a component is being used on this screen, and what other variants exist. Each variant typically maps to a CSS class modifier or a React prop.
Design tokens are the named values in a design system — colours, spacing, typography, border radii, shadows. In Figma they appear as Styles (colour styles, text styles, effect styles). When a designer uses styles consistently, you can map each style name directly to a CSS custom property or Tailwind config value.
Extracting Colour Tokens
Click on any coloured element. In the right panel under 'Fill', you will see either a hex value (ungrouped) or a style name like 'Brand/Primary/500' (styled). Style names reveal the token hierarchy. Click the four-circle icon next to the style name to see all colour styles defined in the file.
Click on any text element. The right panel shows font family, font size, font weight, line height, and letter spacing. If the designer used text styles, you will see a style name like 'Heading/H2' or 'Body/Regular'. Map these to CSS variables or Tailwind typography config.
css
CSS Custom Properties from Figma Text Styles
/* Figma text styles:
Heading/H1: Inter 32px/700, line-height 40px, letter-spacing -0.5px
Heading/H2: Inter 24px/600, line-height 32px
Body/Regular: Inter 16px/400, line-height 24px
Body/Small: Inter 14px/400, line-height 20px
Label/Medium: Inter 14px/500, line-height 20px, letter-spacing 0.1px
*/:root {
--font-family-base: 'Inter', sans-serif;
--text-h1-size: 32px;
--text-h1-weight: 700;
--text-h1-line-height: 40px;
--text-h1-letter-spacing: -0.5px;
--text-h2-size: 24px;
--text-h2-weight: 600;
--text-h2-line-height: 32px;
--text-body-size: 16px;
--text-body-weight: 400;
--text-body-line-height: 24px;
}
Using Figma Dev Mode
Dev Mode is Figma's dedicated developer view — it shows CSS properties, distances, and asset exports with a single click. To enter Dev Mode, click the '' icon in the top toolbar, or press Shift+D. Dev Mode requires either a Dev seat or is included in Full seats.
What Dev Mode Shows You
CSS — auto-generated CSS for the selected element including position, size, colour, typography, border, and shadow
iOS (Swift) and Android (Kotlin/XML) — generated code for mobile implementations
Measurements — click any element, hover over another to see the exact pixel distance between them
Assets — export icons and images at any scale (1x, 2x, 3x) in PNG, SVG, or WebP
Linked component — click 'Go to component' to see the master component and all its variants
Design tokens — if the file uses Variables (Figma's token system), Dev Mode shows the token name alongside the value
Reading Generated CSS in Dev Mode
css
Dev Mode Generated CSS (Example)
/* Dev Mode output for a card component — clean it up for your codebase *//* Figma output: */width: 380px;
height: 240px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 12px;
box-shadow: 0px1px3pxrgba(0, 0, 0, 0.1), 0px1px2pxrgba(0, 0, 0, 0.06);
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
/* Your cleaned-up implementation: */.card {
width: 380px;
background: white;
border: 1px solid theme('colors.neutral.200');
border-radius: 12px;
box-shadow: var(--shadow-sm);
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
Dev Mode CSS Is a Starting Point, Not Final Code
Dev Mode generates CSS based on Figma's absolute values. Replace hex codes with your design token variables, replace fixed pixel widths with responsive units where appropriate, and remove position: absolute unless you actually need it. Treat Dev Mode output as a specification, not copy-paste code.
Exporting Assets from Figma
Icons
Select an icon frame. In the right panel, scroll down to 'Export'. Set format to SVG (for icons — scalable, themeable with CSS currentColor). Click 'Export [icon name]'. For a React project, use SVGR to convert SVGs to React components automatically.
bash
SVGR — Convert Figma SVG Exports to React Components
npm install -D @svgr/cli
# Convert single file
npx svgr --icon --typescript icon.svg --out-dir src/components/icons/
# Convert all SVGs in a folder
npx svgr --icon --typescript src/assets/icons/ --out-dir src/components/icons/
# In package.json for convenience:# "icons": "svgr --icon --typescript src/assets/icons/ --out-dir src/components/icons/"
Images
For raster images (photos, illustrations), export at 2x PNG for standard displays, or WebP for better compression. Select the image frame, set export scale to 2x, format to WebP, and click export. For hero images, export at 1x, 2x, and 3x and use the HTML srcset attribute for responsive loading.
The Developer Handoff Workflow
1
Review the Full Design Before Writing Code: Open every screen in the Figma file before starting. Identify reusable components (buttons, cards, inputs), spot inconsistencies to flag to the designer, and understand the overall layout grid. 30 minutes of upfront review saves hours of rework.
2
Extract All Design Tokens First: Before implementing any screen, extract colours, typography, spacing scale, and border radii into your design token file (Tailwind config, CSS custom properties, or a tokens.ts file). Every hard-coded value is a future inconsistency.
3
Build Components Before Screens: Implement the design system components (Button, Input, Card, Badge) before building full pages. Each component maps to a Figma component. Match the variants and props to the Figma variants exactly.
4
Use Dev Mode for Exact Values: When implementing a screen, use Dev Mode's CSS output as your specification. Check spacing, border radii, shadows, and typography against the generated CSS. Use 'measure' mode to verify distances between elements.
5
Share Implementation for Designer Review: Record a Loom of your implementation and send to the designer. Note any decisions you made where the Figma spec was ambiguous (responsive behaviour, hover states not mocked). Ask for feedback on a single review pass, not ongoing feedback.
Common Figma-to-Code Mistakes
Using absolute pixel widths for containers — Figma frames have fixed widths; your implementation needs responsive widths (%, max-width, etc.)
Ignoring the grid — Figma files usually have a column grid (e.g., 12 columns, 24px gutter). Match it with CSS Grid or a container max-width.
Missing hover and focus states — Figma prototypes often have hover variants; check the component's variant panel for interactive states
Exporting icons as PNG — always export icons as SVG so they scale and can be coloured with CSS
Do I need a paid Figma seat to inspect designs?
You can view and measure designs for free with a viewer account. Dev Mode (which shows generated CSS) requires a Dev seat at ~$15/month per user. For most developers, the designer can share the file at 'can view' level and you get basic inspection for free.
What is the difference between Figma Variables and Figma Styles?
Styles (colour styles, text styles) are the older system for named design values. Variables (introduced 2023) are the newer, more powerful token system that supports modes (light/dark), aliasing, and number/boolean values. Both appear in Dev Mode — Variables show the token name, Styles show the style name.
How do I handle responsive designs in Figma?
Ask your designer to provide frames for at least two breakpoints (mobile 375px and desktop 1440px). Select each frame and read the layout differences. Figma does not auto-generate responsive CSS — you translate the two states into CSS media queries yourself.
Can Figma export React components directly?
Not natively — but plugins like Anima, Locofy, and Builder.io's Figma plugin generate React code. The output quality varies and usually requires cleanup. For most teams, using Figma as a specification (not a code generator) produces higher quality and more maintainable code.
Key Takeaways
Auto Layout in Figma = Flexbox in CSS — read direction, gap, and padding directly from the right panel
Component variants in Figma map directly to React props — match variant names exactly for a consistent system
Extract all design tokens (colours, typography, spacing) before writing a single line of implementation code
Dev Mode generates CSS specifications — treat the output as a starting point, replace hex values with token variables
Export icons as SVG (not PNG) so they scale and accept CSS colour with currentColor
Build components before screens — a 30-minute review of the full design file prevents hours of rework
