Inspect Panel
View detailed CSS, iOS, and Android code for selected elements in Dev Mode.
Developer Handoff
No shortcutIntermediate9 min readQuick Reference
Inspect Panel
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
Select:Code:Copy:Measure:
The Inspect Panel in Dev Mode shows developers every property of a selected layer, including dimensions, colors, typography, spacing, and effects. It also generates production code.
Where to Find It
Switch to Dev Mode using the toggle at the top of the editor, then select any layer to inspect its properties.
How to Use
- Select: Click any layer to see its properties in the right sidebar.
- Code: The Code panel shows CSS, iOS (Swift), and Android (Kotlin) code.
- Copy: Click the copy icon next to any property or code block to copy it.
- Measure: Hold Alt and hover over elements to see spacing and alignment.
Pro Tips
- Designers should enable Dev Mode during review to catch potential implementation issues early.
- Developers can click 'Copy All' to copy all CSS properties for a selected layer at once.