Master Figma Dev Mode end-to-end — every Inspect panel section, the measurement overlay workflow, code snippet extraction, and a systematic 5-minute component specification process that eliminates guesswork.
Figma Dev Mode is the most important interface for developers working with design files. It transforms the editing environment into a read-only specification viewer where every element's properties are instantly accessible. Mastering Dev Mode eliminates the back-and-forth with designers for measurements, colors, and typography specifications.
The goal is to extract a complete, accurate component specification in under 5 minutes — without estimating, without asking the designer, and without implementing and then correcting. This lesson covers every section of the Inspect panel and establishes a systematic extraction workflow.
Dev Mode is activated via Ctrl+Shift+D or the mode switcher at the top of the Figma window. The right sidebar transforms into the Inspect panel with these sections:
Interaction tips:
The most efficient way to read spacing is Alt+hover, which avoids searching through the Inspect panel for padding values.
Alt+hover technique:
What measurements mean in CSS:
Practical measurement session for a navigation bar:
1Select the logo → Alt+hover over the nav links group:
2 Shows: 32px gap
3 CSS: gap: 2rem (on the header flex container)
4
5Select a nav link → Alt+hover over the frame top edge:
6 Shows: 0px (vertically centered via flex align-items: center)
7
8Select a nav link → Alt+hover over adjacent nav link:
9 Shows: 4px
10 CSS: gap: 0.25rem (between nav items)
11
12Select the nav container → Alt+hover over header left edge:
13 Shows: 24px
14 CSS: padding-left: 1.5rem (or: padding-inline: 1.5rem on header)Measurement overlay is also useful for verifying implementations:
Alt+hover also works between elements on different layers — useful for measuring distance between a modal and the viewport edge to verify the margin/inset values.
A systematic extraction order ensures you never miss a property:
Step 1 — Navigate to the master (30s):
Step 2 — Outer frame (30s):
Step 3 — Child layers top-to-bottom (90s):
Step 4 — Variables check (30s):
Step 5 — Prototype states (60s):
Step 6 — Document (30s):
Write a brief spec:
1Card outer: VFlex, p-5, gap-3, border-1-E5E7EB, r-12, shadow-card
2Thumb: 16:9 img, no radius (bleeds to card edge)
3Badge: HFlex, p-1.5-8, r-pill, text-11-700-upper-0.08em
4Title: 17px-700-0f172a, lh-1.35, clamp-2
5Meta: 13px-400-6B7280
6Btn: fill-w, h-40, r-8, bg-brand, text-15-600-white
7Hover: shadow-md + border-brandThis shorthand is readable to any developer and maps directly to CSS.
The Code section in Dev Mode generates CSS that requires consistent corrections before production use. Here is a complete correction checklist:
Or better: font-family: inherit
16px → 1rem, 14px → 0.875rem, 12px → 0.75rem, 24px → 1.5rem
rgba(37, 99, 235, 1) → #2563eb
0.88px on 11px font → 0.08em (0.88 / 11 = 0.08)
0.32px on 16px font → 0.02em (0.32 / 16 = 0.02)
24px on 16px font → 1.5 (24 / 16 = 1.5)
52px on 48px font → 1.083 (52 / 48 = 1.083)
Auto Layout children should be in flow, not absolutely positioned
background: #2563eb → background: var(--color-action-primary)
Buttons and badges should use inline-flex, not flex
1/* Before corrections (Figma output) */
2.badge {
3 position: absolute; /* WRONG: remove */
4 display: flex; /* WRONG: use inline-flex */
5 padding: 3px 8px; /* WRONG: use rem */
6 border-radius: 9999px;
7 background: rgba(220, 252, 231, 1); /* WRONG: use hex */
8 font-family: 'Inter'; /* WRONG: use inherit */
9 font-size: 11px; /* WRONG: use rem */
10 font-weight: 700;
11 letter-spacing: 0.88px; /* WRONG: use em */
12 color: rgba(22, 101, 52, 1); /* WRONG: use hex */
13}
14
15/* After corrections (production) */
16.difficulty-badge {
17 display: inline-flex; /* inline-flex for inline element */
18 align-items: center;
19 padding: 0.1875rem 0.5rem; /* 3px/8px → rem */
20 border-radius: 9999px;
21 background: #dcfce7; /* opaque rgba → hex */
22 font-family: inherit; /* not hardcoded */
23 font-size: 0.6875rem; /* 11px → rem */
24 font-weight: 700;
25 letter-spacing: 0.08em; /* 0.88px/11px → em */
26 color: #166534; /* opaque rgba → hex */
27}A complete simulated Dev Mode session extracting all specifications from a hero section and translating them to production CSS.
1/*
2DEV MODE SESSION TRANSCRIPT — Hero Section
3(Reading the Figma Inspect panel, layer by layer)
4
5Hero outer frame:
6 Auto Layout: Vertical, align center
7 Padding: 96px 24px (top/bottom / sides)
8 Gap: 32px
9 Background: linear-gradient(135deg, #1E3A5F 0%, #0F1F3D 100%)
10 Min-height: 600px
11 Width: Fill
12
13Hero badge ("New Course"):
14 Auto Layout: Horizontal, hug, center
15 Padding: 6px 14px
16 Gap: 6px
17 Border-radius: 9999px
18 Border: 1px rgba(255,255,255,0.2)
19 Background: rgba(255,255,255,0.08)
20 Text: Inter 12px 700 uppercase tracking 6%, white
21
22Hero heading:
23 Font: Inter 800
24 Font size: 56px → clamp(2.25rem, 5vw, 3.5rem)
25 Line height: 62px → 62/56 = 1.107
26 Letter spacing: -2% → -0.02em
27 Color: #FFFFFF
28 Max-width: 720px
29 Text align: center
30
31Hero subtext:
32 Font: Inter 400 20px
33 Line height: 30px → 1.5
34 Color: rgba(255,255,255,0.7) → rgb(255 255 255 / 0.7)
35 Max-width: 560px
36 Text align: center
37
38Hero CTA row:
39 Auto Layout: Horizontal, hug, center, gap 16px
40
41Primary button:
42 Auto Layout: Horizontal, center
43 Padding: 14px 28px
44 Height: 52px
45 Border-radius: 10px
46 Background: #2563EB → var(--color-action-primary)
47 Font: Inter 600 17px white
48
49Secondary button:
50 Same size, border: 1.5px white 50% opacity
51 Background: transparent
52 Font: Inter 600 17px white
53
54Trust signals row:
55 Auto Layout: Horizontal, hug, center, gap 24px
56 Font: Inter 400 14px, rgba(255,255,255,0.6)
57*/
58
59/* PRODUCTION CSS FROM DEV MODE SESSION */
60:root {
61 --color-action-primary: hsl(220, 90%, 56%);
62 --color-action-hover: hsl(220, 90%, 46%);
63}
64*, *::before, *::after { box-sizing: border-box; }
65body { margin: 0; font-family: system-ui, sans-serif; }
66
67/* Hero outer: vertical flex, centered, gradient bg */
68.hero {
69 display: flex;
70 flex-direction: column;
71 align-items: center;
72 padding: 6rem 1.5rem; /* 96px / 24px */
73 gap: 2rem; /* 32px */
74 background: linear-gradient(135deg, #1e3a5f 0%, #0f1f3d 100%);
75 min-height: 37.5rem; /* 600px */
76 text-align: center;
77}
78
79/* Hero badge */
80.hero-badge {
81 display: inline-flex;
82 align-items: center;
83 gap: 0.375rem; /* 6px */
84 padding: 0.375rem 0.875rem; /* 6px / 14px */
85 border-radius: 9999px;
86 border: 1px solid rgb(255 255 255 / 0.2);
87 background: rgb(255 255 255 / 0.08);
88 font-size: 0.75rem; /* 12px */
89 font-weight: 700;
90 text-transform: uppercase;
91 letter-spacing: 0.06em; /* 6% */
92 color: white;
93}
94
95/* Hero heading */
96.hero-title {
97 font-size: clamp(2.25rem, 5vw, 3.5rem); /* 56px clamped */
98 font-weight: 800;
99 line-height: 1.107; /* 62/56 */
100 letter-spacing: -0.02em; /* -2% */
101 color: white;
102 max-width: 45rem; /* 720px */
103 margin: 0;
104}
105
106/* Hero subtext */
107.hero-subtitle {
108 font-size: 1.25rem; /* 20px */
109 font-weight: 400;
110 line-height: 1.5; /* 30/20 */
111 color: rgb(255 255 255 / 0.7); /* rgba 70% */
112 max-width: 35rem; /* 560px */
113 margin: 0;
114}
115
116/* CTA row */
117.hero-actions {
118 display: flex;
119 align-items: center;
120 gap: 1rem; /* 16px */
121 flex-wrap: wrap;
122 justify-content: center;
123}
124
125/* Shared button base */
126.hero-btn {
127 display: inline-flex;
128 align-items: center;
129 justify-content: center;
130 height: 3.25rem; /* 52px */
131 padding: 0.875rem 1.75rem; /* 14px / 28px */
132 border-radius: 0.625rem; /* 10px */
133 font-size: 1.0625rem; /* 17px */
134 font-weight: 600;
135 font-family: inherit;
136 cursor: pointer;
137 text-decoration: none;
138 transition: 150ms ease;
139 white-space: nowrap;
140}
141
142/* Primary button */
143.hero-btn-primary {
144 background: var(--color-action-primary);
145 border: 1.5px solid var(--color-action-primary);
146 color: white;
147}
148.hero-btn-primary:hover { background: var(--color-action-hover); }
149
150/* Secondary button */
151.hero-btn-secondary {
152 background: transparent;
153 border: 1.5px solid rgb(255 255 255 / 0.5);
154 color: white;
155}
156.hero-btn-secondary:hover { border-color: white; background: rgb(255 255 255 / 0.05); }
157
158/* Trust signals */
159.hero-trust {
160 display: flex;
161 align-items: center;
162 gap: 1.5rem; /* 24px */
163 flex-wrap: wrap;
164 justify-content: center;
165 font-size: 0.875rem; /* 14px */
166 color: rgb(255 255 255 / 0.6); /* rgba 60% */
167 list-style: none;
168 margin: 0; padding: 0;
169}This Dev Mode session transcript shows the complete workflow: reading each layer in sequence (outer frame → badge → heading → subtext → CTA row → buttons → trust signals), converting all values (96px → 6rem, 62/56 = 1.107 unitless, -2% → -0.02em, rgba white at 70% → rgb(255 255 255 / 0.7)), and applying CSS custom properties for tokenized colors. The gradient background is transcribed exactly from the Figma linear-gradient specification. The clamp() on the hero title implements the responsive behavior implied by the design (56px on desktop, should scale down on mobile — the designer communicates this via responsive frames in the prototype).
The next lesson covers exporting assets from Figma — SVG optimization, image format selection, responsive image srcset patterns, and naming conventions for a clean asset pipeline.
Your progress is saved in this browser, on this device only.