The Dev Panel provides developer-focused tools for inspecting designs, measuring elements, generating code, and ensuring development-ready handoff.
Enabling Dev Mode
- Access from sidebar panels menu
- Available in Developer tier (enable in Preferences)
- Green indicator shows Dev Mode active
Panel Tabs
Inspect
View detailed element properties:
- Position (x, y) and dimensions
- Padding and margin values
- Colors with format options (hex, rgb, hsl)
- Typography details
- Border radius and stroke
- Shadows and effects
Code
Generated code for selected elements:
- CSS - Standard CSS properties
- Tailwind - Tailwind CSS classes
- Flutter - Dart widget code
- SwiftUI - iOS native code
- React - JSX with styled-components
Resources
Link development resources to design elements:
- GitHub PRs - Pull requests and commits
- Jira Tickets - Issue tracking links
- Storybook - Component documentation
- Documentation - Technical docs and wikis
- Confluence - Team knowledge bases
- Linear - Issue tracking
- Notion - Project documentation
- Figma - Related design files
- Other Links - Any relevant resources
Features:
- Auto-detects resource type from URL
- Suggests titles based on URL patterns
- Add custom descriptions and notes
- Blue link indicator in layers panel
- Click indicator to view resources
- Open links directly in browser
Measure
Measure distances and spacing:
- Hover over elements to see spacing
- Red lines show distances
- Click to lock measurements
- Shift+click for multiple measurements
Assets
Export-ready assets:
- Images and icons
- Export presets (1x, 2x, 3x)
- Format options (PNG, SVG, PDF)
- Download individual or batch
Variables
Design tokens used by selection:
- Bound variables
- Token values
- Copy as code
Compare
Version comparison tools:
- Compare with previous version
- Highlight differences
- View change history
Inspection Mode
Hover Inspection
- Hover over elements to see dimensions
- Blue overlay shows element bounds
- Tooltip displays key properties
Click to Inspect
- Click element to select
- Panel shows full details
- Properties organized by category
Copying Values
Copy Individual Values
- Click any value to copy
- Values copy in selected format
- Toast confirms copy
Copy All CSS
- Select element
- Go to Code tab
- Click "Copy All"
- Complete CSS copied to clipboard
Measurement Tools
Distance Measurement
- Select an element
- Hold Alt/Option key
- Hover over another element
- Distance lines appear automatically (red dashed lines with labels)
Nested Layer Measurement
To measure to elements inside frames or groups:
- Select an element
- Hold Cmd+Alt (Mac) or Ctrl+Alt (Windows)
- Hover over nested children inside frames/groups
- Measures to the deepest (smallest) element under cursor
Manual Measurement
- Hold Alt/Option
- Drag between two points
- Distance shown in pixels
Accessibility Checking
Built-in accessibility tools:
- Color Contrast - WCAG AA/AAA checks
- Touch Targets - Minimum size verification
- Text Size - Readability checks
Code Generation Options
CSS Options
- Units: px, rem, em
- Colors: hex, rgb, hsl
- Include comments
- BEM naming
Framework Options
- Component vs inline styles
- CSS-in-JS format
- Variable references
Best Practices
- Use Dev Mode for handoff reviews
- Check spacing consistency
- Verify color token usage
- Export assets at needed sizes
- Run accessibility checks before handoff