Figma Dev Mode: Complete CSS Extraction Workflow

Figma Dev Mode is available to all Viewer roles (free) — you do not need an Editor seat.

Activating Dev Mode:

• Keyboard shortcut: Ctrl+Shift+D (Windows/Linux) or Cmd+Shift+D (macOS)
• Or: toggle the </> icon in the toolbar (right side of top bar)
• Dev Mode replaces the design cursor with an inspection cursor
• You cannot accidentally edit anything in Dev Mode

Dev Mode interface layout:

Left panel (Layers and Pages):

• Layers: shows full component hierarchy, same as design mode
• Pages: shows all pages in the file
• Use layers panel to navigate to specific artboards or components

Canvas:

• Click any element to select it
• Red measurement lines appear between elements
• Hold Alt+hover: shows distance from selected element to hovered element
• Click + Shift+click: select multiple elements, see relative measurements
• Double-click into components to inspect child layers

Right panel (Code and Inspect tabs):

• Code tab: CSS code for selected element
• Inspect tab: full list of all properties
• Click Properties sections to copy individual values
• 'Copy code' button: copies the entire CSS block

Component panel (bottom of right panel):

• Shows which Figma component the selected element is an instance of
• Link icon: jump to the main component
• Docs tab: if the designer added component documentation, it appears here

Dev Mode breadcrumb:

• Top of right panel shows the layer path: Page / Frame / Component / Child
• Click any part of the breadcrumb to navigate to parent layers
• Use this to understand nesting without the layers panel

Keyboard shortcuts in Dev Mode:

• Space + drag: pan canvas
• Ctrl+scroll: zoom
• Escape: deselect / move up to parent
• Ctrl+click: enter group/component to select child
• F: zoom to fit selection
• Z: zoom to fit page

The Code tab generates CSS for any selected element. Unlike XD's CSS generation, Figma Dev Mode outputs rem values, unitless line-heights, and correct Flexbox properties from Auto Layout.

Selecting elements for CSS extraction:

• Click a component instance → Code tab shows the outer container CSS
• Double-click → enters the component, click child layer → child CSS
• Click the text layer inside a component → shows typography CSS

Code tab sections:

For a button component:

1/* Figma Dev Mode generated CSS — close to production-ready */
2.btn-primary {
3  /* Auto Layout → Flexbox */
4  display: flex;
5  flex-direction: row;
6  align-items: center;
7  justify-content: center;
8  gap: 0.5rem;
9
10  /* Auto Layout padding */
11  padding: 0.875rem 1.5rem;
12
13  /* Fill */
14  background-color: #2563eb;
15
16  /* Border radius */
17  border-radius: 0.5rem;
18
19  /* Typography (from text child layer) */
20  font-family: 'Inter', sans-serif;
21  font-size: 0.9375rem;
22  font-weight: 600;
23  line-height: 1.467;  /* unitless — correct */
24  color: #ffffff;
25}

For a text layer, the Code tab shows typography specifically:

1.label-text {
2  font-family: 'Inter', sans-serif;
3  font-size: 1rem;
4  font-weight: 500;
5  line-height: 1.5;
6  letter-spacing: 0;
7  color: #374151;
8}

For a frame with Auto Layout:

1.card-body {
2  display: flex;
3  flex-direction: column;
4  align-items: flex-start;
5  gap: 0.5rem;
6  padding: 1rem;
7}

Remaining manual corrections after Figma CSS:

1. Add font-family fallback: 'Inter', system-ui, -apple-system, sans-serif
2. Add missing interactive properties: border: none, cursor: pointer, transition
3. Add ARIA/accessibility attributes in HTML
4. Add focus-visible styles (Figma does not generate these)

Copying individual properties:

• In the Inspect tab (not Code), each property has a copy icon
• Click the color swatch → copies hex
• Click padding values → copies the shorthand value
• Click border-radius → copies the value
• This is faster than parsing the full CSS block when you only need one value

Figma Variables (design tokens) appear in Dev Mode with their variable names — not raw hex values — when the designer has applied them correctly. This is the key advantage over reading one-off colors.

How variables appear in Dev Mode:

• Inspect panel → Fill section shows: '--color-primary-600 (resolved: #2563EB)'
• The variable name appears first, hex is the resolved value in parentheses
• If the designer used a raw hex without a variable, only the hex appears (no variable name)

Translating Figma variable names to CSS custom properties:

1Figma variable name         CSS custom property
2--color/primary/600        → --color-primary-600: #2563eb
3--color/neutral/900        → --color-neutral-900: #111827
4--spacing/4               → --space-4: 1rem
5--typography/body/md      → Use as .text-body-md class reference
6--radius/lg               → --radius-lg: 0.75rem

When Figma shows variables in the Code tab:

1/* With variables applied by the designer */
2.card {
3  background-color: var(--color-bg-surface, #f9fafb); /* variable name + fallback */
4  border-color: var(--color-border, #e5e7eb);
5  border-radius: var(--radius-lg, 0.75rem);
6}
7
8/* Without variables (hardcoded design) */
9.card {
10  background-color: #f9fafb;
11  border-color: #e5e7eb;
12  border-radius: 0.75rem;
13}

When to use a CSS variable vs a hardcoded value:

• Variable shown in Figma → always use a CSS custom property
• Hardcoded hex in Figma → check if it appears in the Variables panel as a token
• If it is a design token → create a CSS custom property
• If it is a one-off value → use the hex directly

Checking the Variables panel in Figma:

1. Edit menu → Local Variables (or Ctrl+Alt+V)
2. Lists all collections: Color, Spacing, Typography
3. Search any hex value → see if it has a variable name
4. Variables with multiple modes → support dark mode: use var() in CSS

Design mode values panel during code review:

• Inspect tab → Typography section → if the text style shows a name (e.g., 'Body / MD'), it is a library style
• Inspect tab → Fill section → if the color shows a name (e.g., 'Primary / 600'), it is a token
• Both should become CSS custom properties in your implementation

Dev Mode provides direct asset export and a dedicated annotations system for developer-specific notes.

Exporting assets from Dev Mode:

1. Select any image, icon, or graphic element
2. Right panel → Export section (bottom of Inspect tab)
3. Choose format: PNG @1x, @2x, @3x, SVG, PDF
4. Click Export
5. File downloads immediately — no designer action needed

Export settings best practices:

1SVG:  icons, logos, illustrations, decorative graphics
2      Always choose SVG first for vector content
3PNG @2x: photos, complex illustrations that need raster
4PNG @3x: mobile apps where highest density is needed
5PDF:  print materials only

SVG export cleanup after Figma:

1. Open SVG in a text editor
2. Remove comments and Adobe/Figma metadata attributes
3. Or run SVGO: svgo --config svgo.config.js icon.svg
4. For React: npx @svgr/cli --typescript icon.svg --out-dir src/icons/

Dev Mode Annotations:

Designers can add developer-specific annotations that appear only in Dev Mode:

1. Figma Annotate tool (A key in design mode): pin a note to any element
2. Dev Mode: annotations show as blue pin markers
3. Click annotation to read the full note

Useful annotation content designers should add:

1Animation annotations:
2'Transition: background-color 150ms cubic-bezier(0,0,0.2,1) on hover'
3'Opens with translateY(-100%) → translateY(0), 250ms ease-out'
4
5Behavior annotations:
6'Closes on Escape key and click outside'
7'Sticky at top: 0 when scrolled past 64px'
8'Lazy loads images — use loading=lazy attribute'
9
10Breakpoint annotations:
11'Mobile: 1 column, no horizontal padding'
12'Tablet 768px+: 2 columns with 24px gap'
13'Desktop 1024px+: 3 columns'
14
15Content annotations:
16'Max 2 lines of text — use line-clamp: 2'
17'Course title: truncate at 60 characters'
18'Price shows as $0.00 when course is free'

Dev Mode Code Comparison:

1. Select the frame you are implementing
2. Click the 'Ready for Development' toggle (if designer set it)
3. Dev Mode shows 'In Progress' vs 'Ready' status per frame
4. This signals which frames are stable vs still being designed