Developer Handoff: Dev Mode, Inspect & Exporting Assets

Figma

Chapter 9 · Developer Handoff: Dev Mode, Inspect & Exporting Assets

Chapter 8's own tip box pointed here directly: the same shared prototype link used for review is exactly what a developer opens to enter Dev Mode. This chapter covers that developer-facing side of Figma — inspecting exact specs, reading code snippets, and exporting the actual image assets a real build needs.

What Dev Mode Actually Is

Dev Mode is a dedicated view of a Figma file built specifically for developers, surfacing exact measurements, spacing, colors, and code snippets rather than the editing tools a designer would use. It's the same underlying file Chapter 8's collaborators were viewing and commenting on, viewed here through a different lens built for implementation rather than design feedback.

Inspecting a Design: Measurements, Spacing, and Colors

Selecting any element in Dev Mode surfaces its exact pixel dimensions, its distance from neighboring elements, its exact color values, and its font settings — the precise numbers a developer needs to recreate the design accurately, rather than guessing spacing and colors by eye from a static image.

Code Snippets: CSS, iOS, and Android

Dev Mode generates basic code snippets for a selected element — CSS for web, Swift/SwiftUI-oriented values for iOS, and XML/Compose-oriented values for Android — translating the design's own visual properties into a starting-point implementation in whichever platform's language a developer is working in.

Reading Design Tokens Directly From Styles

Chapter 6's own named color and text styles surface directly in Dev Mode as design tokens — a developer inspecting an element sees its actual style name ("Primary Brand Blue," "Heading 1") alongside its raw value, letting a real codebase reference the same named token rather than a disconnected hex code that could quietly drift out of sync with the design over time.

Exporting Assets: Icons and Images at the Right Resolution/Format

Individual assets — icons, illustrations, images — export directly from the design at whatever format and resolution a real build actually needs: SVG for a scalable icon (the same resolution-independence payoff Vector Graphics' own Chapter 9 described), or PNG at multiple fixed pixel densities (1x, 2x, 3x) for platforms that expect raster images sized for different screen densities.

Dev Mode (or Equivalent) in Penpot

Penpot offers its own Inspect functionality covering the same core ground — measurements, spacing, and basic code output — though Figma's own Dev Mode is generally the more mature, actively developed implementation of the two, another honest instance of the lopsided gap Chapter 2 named directly rather than smoothing over.

Asset type	Recommended export format
Icons (simple, scalable shapes)	SVG — resolution-independent, per Vector Graphics Ch.9
Photos/complex illustrations	PNG/JPG at 1x, 2x, 3x for different screen densities
Colors and text	Design tokens (named styles from Ch.6), not raw hex/font values

This closes the loop for the capstone

Chapter 10's own capstone ends exactly here — a real screen designed, prototyped, and finally handed off through Dev Mode, closing every earlier chapter's own contribution into one complete workflow.

Dev Mode's code snippets are a starting point, not a finished implementation

It's tempting to treat Dev Mode's generated code snippets as complete, production-ready code that can simply be pasted directly into a real project. These snippets capture a selected element's own visual styling — dimensions, colors, spacing — as a structural starting point, not the whole implementation: real interactivity, actual data, accessibility considerations, and how the element fits into a larger codebase all still need genuine development work on top of what Dev Mode provides. Dev Mode reduces guesswork and back-and-forth, but it doesn't eliminate the need for a developer's own judgment and implementation work.

Hands-On Exercises

Exercise 1

A developer needs to know the exact spacing between two elements and the exact hex value of a background color, without asking the designer directly. Using this chapter's own material, explain how Dev Mode provides this.

📄 View solution

Exercise 2

A junior developer copies a Dev Mode CSS snippet directly into production and is surprised when the button doesn't actually do anything when clicked. Using this chapter's own warning box, explain why this is expected.

📄 View solution

Exercise 3

Explain, using this chapter's own material, why an icon should typically be exported as SVG while a photo should typically be exported as PNG at multiple resolutions, referencing Vector Graphics' own material on resolution independence.

📄 View solution

Chapter 9 Quick Reference

Dev Mode is a developer-facing view of the same file, surfacing exact specs instead of editing tools
Inspect reveals exact measurements, spacing, colors, and font values for any selected element
Code snippets cover CSS, iOS, and Android, translating design properties into a starting-point implementation
Named styles from Chapter 6 surface as design tokens in Dev Mode, not disconnected raw values
Export SVG for icons, PNG at multiple densities for photos — and treat code snippets as a starting point, not finished code