Dev Mode
Switch to Dev Mode for developers to inspect designs, copy production-ready code, and export assets.
Developer Handoff
No shortcutIntermediate8 min readQuick Reference
Dev Mode
FigmaKeyboard Shortcut
N/A
Toolbar Location
Figma toolbar
Best Used For
- ▸Refer to the tutorial content for specific use cases
- ▸Practice with sample projects to build experience
- ▸Combine with other tools for advanced workflows
Intermediate⏱ 30–60 minutes to master
Key Settings
Inspect:Code:Measure:Alt
Dev Mode is a developer-focused view of your Figma designs. Developers can inspect element properties, copy CSS/iOS/Android code, export assets, and measure spacing without editing the design.
Where to Find It
Click the toggle switch at the top of the Figma toolbar to switch between Design and Dev Mode.
How to Use
- Inspect: Click any layer to see its properties — dimensions, colors, typography, and effects.
- Code: The Code panel shows CSS, iOS (Swift), and Android (Kotlin) code for the selected layer.
- Measure: Hold Alt and hover over a layer to measure spacing from neighboring elements.
- Export: Select a layer and click Export in the right sidebar to download assets.
Pro Tips
- Dev Mode is free for anyone to use — developers don't need a paid Figma account to inspect designs.
- Enable Dev Mode for design handoff reviews before development starts to catch issues early.