figma guide
Figma Dev Mode for Designers: A Handoff Checklist That Engineers Actually Use
Prepare Figma files for Dev Mode: component hygiene, descriptions, variables, export marks, and review rituals so inspect data matches what engineering ships.
- Published
- Updated
- May 29, 2026
- Read time
- 5 min
- Level
- Intermediate
Quick answer
Dev Mode is only as good as the file you hand off. Before you invite engineers, confirm every screen uses published components (not detached copies), variables for color and spacing (not local hex), auto layout on flexible regions, and layer names a stranger can read. Add component descriptions for behavior Inspect cannot see—validation timing, empty states, breakpoints—and mark exportable assets on components, not one-off groups. Run a 15-minute pre-handoff pass with Dev Mode open on the same frames engineering will build first. For plugin-heavy stacks, compare this checklist with best Figma dev handoff plugins; for file structure, start at how to organize a Figma file and the Figma guides hub.
Who this is for
- Product designers who own the last mile before sprint kickoff.
- Design system contributors publishing libraries consumed in Dev Mode.
- Solo designers working with contractors who only see Inspect, not Slack threads.
What Dev Mode gives you (and what it does not)
| Dev Mode shows well | Still needs human spec |
|---|---|
| Spacing from auto layout | “Sidebar collapses at 1024px” |
| CSS snippets for straightforward frames | Gesture thresholds, haptics |
| Component properties and variants | Business rules (“hide if plan = free”) |
| Marked raster/SVG exports | Animation curves beyond smart animate |
| Variable names and modes | API-driven content limits |
Verdict: treat Dev Mode as geometry + token truth, not product requirements. Write the latter in descriptions, tickets, or a linked Notion page—see Notion × Figma workflow if your team lives there.
Pre-handoff file hygiene
1. Components and instances
- Replace detached frames with instances from the library.
- Name variants clearly:
state=error,size=md—notFrame 427. - Keep variant count sane; split into two component sets if size × state explodes (same rule as designing forms in Figma).
2. Layout
- Convert stacks to auto layout where width or copy changes (Auto Layout patterns).
- Document min/max width on columns in the cover page when responsive frames use multiple breakpoints.
3. Tokens
- Bind fills and strokes to semantic color variables, not one-off
#3B82F6. - Use spacing variables or consistent gap tokens on auto layout—engineers map these to CSS gap/padding.
- For typography, publish text styles (typography guide); Dev Mode surfaces style names when layers use them.
4. Assets
- Set export settings on components intended for code (icons, illustrations), not buried inside masked groups.
- Match @1x/@2x/@3x policy to what mobile and web expect—see production-ready exports and fix blurry exports if QA reports wrong sizes.
The designer’s Dev Mode checklist (printable)
Use this in order before you ping #engineering:
| Step | Action | Pass? |
|---|---|---|
| 1 | Open target frame in Dev Mode (toggle in toolbar) | ☐ |
| 2 | Select primary component—confirm variant props match design spec | ☐ |
| 3 | Click nested text—confirm text style name appears, not “Mixed” | ☐ |
| 4 | Verify auto layout direction, gap, and padding read sensibly in Inspect | ☐ |
| 5 | Check color variables on surfaces (not raw hex on production UI) | ☐ |
| 6 | Read component description—states, validation, analytics hooks noted | ☐ |
| 7 | Confirm export marks on icons/images devs will download | ☐ |
| 8 | Scan layer list—no Rectangle 12 on shipped UI | ☐ |
| 9 | Compare mobile frame safe areas if applicable (mobile UI frames) | ☐ |
| 10 | Link ticket / prototype for flows Inspect cannot explain | ☐ |
Time box: 15 minutes per epic screen; 5 minutes for small bugfix frames.
Writing component descriptions that survive sprints
Put descriptions on the main component (library source), not only the instance on a marketing page.
Template (copy into description field):
Purpose: [one line]
States: default | hover | focus | error | disabled
Content: max 40 chars title; helper optional
Validation: on blur for email; on submit for password
Responsive: below 768px stack actions vertically
Analytics: fire `checkout_started` on primary click
Out of scope: payment method icons (engineering asset pack)Engineers read this in Dev Mode without hunting Figma comments. For interactive behavior in prototypes, link interactive components and prototype basics—but keep acceptance criteria in text for anything beyond hover/press demos.
Review ritual with engineering (30 minutes)
- Designer shares Dev Mode link to one canonical frame per feature (not the whole file).
- Engineer clicks through top 3 components while designer watches—note where Inspect shows “Mixed” or missing styles.
- Agree on token names that map to code (
surface/default, notGray/100). - Capture gaps in the ticket: animation, permissions, empty states.
- Schedule library publish if fixes require component updates—coordinate with multiplayer etiquette so branches do not collide.
Repeat monthly on your highest-churn screens; quarterly is enough for stable marketing pages.
When to add plugins on top of Dev Mode
| Situation | Stay native | Consider plugins |
|---|---|---|
| Standard SaaS UI with variables | Yes | — |
| Token sync to Git repos | Variables help | Tokens Studio class tools (handoff plugins roundup) |
| Legacy imported Sketch screens | Fix structure first | Measure/redline plugins temporarily |
| External spec portal required | — | Zeplin-style workflow in plugin post |
Common mistake: buying a code-export plugin before components and variables are clean—exported React will encode your mess.
Common mistakes
| Mistake | What devs see | Fix |
|---|---|---|
| Detached hero button | Wrong spacing on build | Swap to library instance |
| Local colors on cards | Hex soup in CSS | Bind semantic variables (color system guide) |
| Exports on grouped masks | Missing assets | Export on component root |
| Spec only in comments | Lost after resolve | Descriptions + ticket |
| One desktop frame only | Wrong mobile layout | Breakpoint frames + cover note |
FAQ
Do designers need a paid seat to prep files for Dev Mode?
File prep is the same in Design mode—Dev Mode is primarily how engineers inspect. Confirm your org’s seat mix with admin; handoff quality does not depend on designers living in Dev Mode daily.
Should every layer be a component?
No. Atoms and patterns that repeat or have variants should be components; one-off marketing illustrations can stay frames if exports are marked and documented.
How does Dev Mode relate to developer plugins?
Native Inspect is the baseline; plugins extend tokens, annotations, or portals. See best Figma plugins for developers for the wider stack.
What changed recently?
Platform shifts land often—skim quarterly Figma check-in and May 2026 updates when your team upgrades plans or permissions.
Bottom line
Dev Mode rewards disciplined libraries. Run the checklist on every handoff frame, write descriptions for behavior Inspect cannot infer, and fix instances, variables, and exports before you ask for a pixel-perfect build. Continue with dev handoff plugins, export production assets, and the tutorials hub.
§ Keep reading