Figma for Developers

Introduction

Figma is where your designs live. As a developer, knowing how to extract information efficiently from Figma saves hours of back-and-forth with designers. Dev Mode, auto-layout inspection, and component analysis let you translate designs to code accurately.

You don't need to be a Figma power user, but you do need to understand how to read design files, extract spacing/typography/colors, and identify component patterns.

This guide covers everything developers need to know about working with Figma designs.

Key Concepts

Dev Mode

Figma's Dev Mode shows CSS properties, spacing, colors, and typography for any selected element. Toggle it with the </> icon. It generates code snippets in CSS, iOS, and Android formats.

Auto Layout = Flexbox

Figma's Auto Layout maps directly to CSS Flexbox. Horizontal = flex-direction: row. Vertical = flex-direction: column. Gap, padding, and alignment translate 1:1.

css

/* Figma Auto Layout → CSS */
/* Direction: Vertical, Gap: 16, Padding: 24 */
.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

Design Tokens

Colors, typography, spacing, and shadows in Figma should map to design tokens in your codebase. This ensures consistency and makes design updates propagate automatically.

Practical Examples

1. Extracting Design Tokens

typescript

// tokens.ts — derived from Figma styles
export const colors = {
  primary: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a8a' },
  gray: { 50: '#f9fafb', 200: '#e5e7eb', 900: '#111827' },
};

export const spacing = {
  xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px',
};

export const typography = {
  h1: { fontSize: '36px', fontWeight: 700, lineHeight: 1.2 },
  body: { fontSize: '16px', fontWeight: 400, lineHeight: 1.5 },
};

2. Component Mapping

typescript

// Figma Component → React Component mapping
// Card (Figma) → <Card /> (React)
// - Has variants: default, highlighted, compact
// - Props from Figma: title, description, image, tag

interface CardProps {
  variant?: 'default' | 'highlighted' | 'compact';
  title: string;
  description: string;
  image?: string;
  tag?: string;
}

3. Responsive Breakpoints

Check Figma frames for common viewport widths: 375px (mobile), 768px (tablet), 1440px (desktop). Map these to your CSS breakpoints and note layout changes between sizes.

4. Exporting Assets

In Figma, select any element and use the Export panel (bottom right). Export icons as SVG, photos as WebP/AVIF, and illustrations as SVG or PNG@2x. Use the Slice tool for precise export areas.

Best Practices

✅ Use Dev Mode for accurate CSS properties
✅ Map Figma Auto Layout to Flexbox/Grid
✅ Create design token files from Figma styles
✅ Export SVG icons and optimize with SVGO
✅ Check all viewport sizes in the design
❌ Don't eyeball spacing — use Figma's inspect tool
❌ Don't screenshot designs — export assets properly

Common Pitfalls

🚫 Hardcoding pixels instead of using design tokens
🚫 Missing responsive variants — check all breakpoints
🚫 Not asking designers about interaction states (hover, focus, loading)
🚫 Exporting raster images where SVG would work better