Figma has an entire developer-facing layer that goes far beyond looking at a mockup and eyeballing spacing values. Dev Mode gives you CSS properties, spacing values, component props, and design tokens directly from the canvas. Understanding how to read a Figma file properly is the difference between a smooth design-to-code workflow and constant back-and-forth with the design team.
Dev Mode: the developer’s view
Dev Mode is a separate view in Figma that strips away design tools and shows only what developers need. Click any element and the right panel displays its CSS properties, spacing relative to siblings, and the assets ready for export.
/* What Dev Mode gives you */
width: 320px;
padding: 24px;
border-radius: 12px;
background: #1A1A2E;
display: flex;
flex-direction: column;
gap: 16px;The output is real CSS, not a rough approximation. Border radius, box shadows, gradients, blend modes, all translated into valid properties. For Tailwind users, plugins like “Figma to Tailwind” map these values directly to utility classes.
The key habit is clicking on the space between elements rather than on the elements themselves. Figma shows the distance in pixels, which maps directly to padding, margin, or gap depending on the layout context. No more zooming in and counting pixels manually.
Auto Layout and Flexbox: the same mental model
Figma’s Auto Layout is Flexbox. Designers who use Auto Layout properly are unknowingly writing CSS layout specifications. The mapping is direct.
Figma Auto Layout CSS Flexbox
───────────────── ───────────────
Direction: Vertical → flex-direction: column
Direction: Horizontal → flex-direction: row
Gap: 16 → gap: 16px
Padding: 24 → padding: 24px
Alignment: Center → align-items: center
Fill Container → flex: 1
Hug Contents → width: fit-content
Fixed Width → width: [value]pxWhen a design uses Auto Layout consistently, translating it to code is mechanical. The hierarchy of frames maps to the hierarchy of divs. The spacing values map to gap and padding. The sizing modes map to flex properties.
// Figma frame: Auto Layout, vertical, gap 16, padding 24, rounded 12
function Card({ title, description, children }: CardProps) {
return (
<div className="flex flex-col gap-4 rounded-xl bg-[#1A1A2E] p-6">
<h3 className="text-lg font-semibold text-white">{title}</h3>
<p className="text-sm text-gray-400">{description}</p>
{children}
</div>
);
}When a design doesn’t use Auto Layout, that’s a signal. Fixed-position elements with magic numbers are harder to implement responsively and harder to maintain. Pushing designers toward Auto Layout improves both the design system and the developer experience.
Design tokens: the single source of truth
Design tokens are named values for colors, spacing, typography, and shadows. In Figma, they live as styles and variables. In code, they become CSS custom properties or Tailwind config values.
Figma Variable Code Token
────────────── ──────────
color/primary → --color-primary: #6C63FF
color/surface → --color-surface: #1A1A2E
color/text-primary → --color-text-primary: #FFFFFF
color/text-muted → --color-text-muted: #9CA3AF
spacing/sm → --spacing-sm: 8px
spacing/md → --spacing-md: 16px
spacing/lg → --spacing-lg: 24px
radius/md → --radius-md: 12pxThe workflow is extracting these tokens once and referencing them everywhere. When the designer changes color/primary from #6C63FF to #7C73FF, you change one variable. Every component that uses the token updates automatically.
export default {
theme: {
extend: {
colors: {
primary: '#6C63FF',
surface: '#1A1A2E',
'text-primary': '#FFFFFF',
'text-muted': '#9CA3AF',
},
spacing: {
sm: '8px',
md: '16px',
lg: '24px',
},
borderRadius: {
md: '12px',
},
},
},
};Figma’s Variables feature supports modes (light/dark, compact/comfortable), which map directly to CSS custom property overrides or Tailwind’s dark mode classes. The design file becomes the documentation for the token system.
Component inspection: reading props and variants
Figma components have variants, boolean properties, and text overrides. Dev Mode exposes all of these as a structured list, which maps directly to component props.
Figma Component: Button
├── Variant: Primary | Secondary | Ghost
├── Size: SM | MD | LG
├── Icon: Left | Right | None
├── State: Default | Hover | Disabled
└── Label: "Click me"interface ButtonProps {
variant?: 'primary' | 'secondary' | 'ghost';
size?: 'sm' | 'md' | 'lg';
icon?: 'left' | 'right' | 'none';
disabled?: boolean;
children: React.ReactNode;
}
function Button({
variant = 'primary',
size = 'md',
icon = 'none',
disabled = false,
children,
}: ButtonProps) {
return (
<button
disabled={disabled}
className={cn(
'inline-flex items-center font-medium transition-colors',
sizeStyles[size],
variantStyles[variant],
disabled && 'pointer-events-none opacity-50'
)}
>
{icon === 'left' ? <Icon /> : null}
{children}
{icon === 'right' ? <Icon /> : null}
</button>
);
}The Figma variant structure is the component API. Each variant axis becomes a prop. Each variant value becomes a union type member. Hover and disabled states become CSS pseudo-classes and conditional styles. The translation is almost mechanical when the component is well-structured in Figma.
Typography: extracting the type scale
Figma text styles define a typography system that should match your code exactly. Dev Mode shows font family, weight, size, line height, and letter spacing for every text element.
Figma Text Style CSS
──────────────── ───
Heading/H1 → font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -1.5px
Heading/H2 → font-size: 36px; line-height: 1.2; font-weight: 700; letter-spacing: -1px
Body/Regular → font-size: 16px; line-height: 1.6; font-weight: 400
Body/Small → font-size: 14px; line-height: 1.5; font-weight: 400
Label/Medium → font-size: 12px; line-height: 1.4; font-weight: 500; text-transform: uppercase:root {
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'Fira Code', monospace;
}
h1 { font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -1.5px; }
h2 { font-size: 36px; line-height: 1.2; font-weight: 700; letter-spacing: -1px; }The most common implementation mistake is getting line-height wrong. Figma shows line height in pixels (e.g., 52.8px for a 48px heading). Converting to a unitless ratio (52.8 / 48 = 1.1) produces more predictable results in CSS across different contexts.
Letter spacing is another source of drift. Figma uses percentage-based values that need to be converted to em or pixel values depending on your CSS setup. Dev Mode shows the computed value, which removes the conversion guesswork.
Assets and exports: SVGs done right
Icons and illustrations should be exported as SVGs from Figma, not as PNGs. Dev Mode lets you select any element and export it in multiple formats.
// Exported from Figma as SVG, converted to React component
function ArrowRight({ size = 24, className }: IconProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<path
d="M5 12h14M12 5l7 7-7 7"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}Using currentColor for stroke and fill means the icon inherits the text color of its parent. viewBox ensures the SVG scales cleanly at any size. This pattern turns Figma icons into reusable React components that respond to theme changes without any extra work.
For bulk icon exports, Figma plugins like “SVG Export” or the Figma REST API can extract an entire icon library at once, feeding into an automated pipeline that generates React components from SVG files.
Responsive design: reading the breakpoints
Figma files typically contain frames at different widths representing mobile, tablet, and desktop. The differences between these frames are the responsive specifications.
Desktop (1440px) Tablet (768px) Mobile (375px)
┌──────────────────┐ ┌────────────────┐ ┌──────────┐
│ ■ ■ ■ ■ │ │ ■ ■ │ │ ■ │
│ 4-column grid │ │ 2-column grid │ │ 1-column │
│ gap: 24px │ │ gap: 16px │ │ gap: 12px│
│ padding: 80px │ │ padding: 40px │ │ padding: │
│ │ │ │ │ 16px │
└──────────────────┘ └────────────────┘ └──────────┘function ProductGrid({ products }: ProductGridProps) {
return (
<div className="grid grid-cols-1 gap-3 px-4 sm:grid-cols-2 sm:gap-4 sm:px-10 lg:grid-cols-4 lg:gap-6 lg:px-20">
{products.map((product) => (
<ProductCard key={product.id} product={product} />
))}
</div>
);
}Comparing the same section across breakpoints reveals which values change. Column count, gap, padding, font sizes, and visibility of elements are the most common responsive variations. Reading these differences systematically produces cleaner responsive code than guessing breakpoint behavior.
Conclusion
Figma is not just a design tool. For developers, it’s a specification document that contains exact values for every pixel on screen. Dev Mode makes those values accessible without asking the designer. Design tokens create a shared language between the Figma file and the codebase. Auto Layout maps to Flexbox. Component variants map to props. The developers who learn to read Figma properly spend less time in back-and-forth and produce implementations that match the design on the first pass.