Azyrom organizes panels into tiers based on usage frequency and context. This helps keep the interface clean while ensuring the right tools are available when needed.
The Four Tiers
Primary Tier
Always visible, essential for all workflows:
- Layers - Element hierarchy
- Properties - Element styling
- Design/Prototype/Code - Mode-specific tools
These panels are always available in the sidebars.
Secondary Tier
Frequently used panels available in the sidebar:
- Components - Component library
- Styles - Color, text, effect styles
- Variables - Design tokens
- AI Assistant - AI help
Open these when needed for specific tasks.
Contextual Tier
Appear automatically based on selection:
- Text - When text is selected
- Image - When image is selected
- Component - When instance is selected
- Path - When in path edit mode
The interface adapts to show relevant options.
Developer Tier
Advanced panels for power users:
- Code Preview - Generated code
- Analytics - Design metrics
- Extensions - Plugins
- Console - Debug output
Enable in Preferences to access developer panels.
Managing Panel Visibility
Show/Hide Panels
- Right-click Sidebar - Quick panel menu
- Panel Header X - Close individual panel
- Keyboard Shortcuts - Toggle specific panels
Enable Developer Tier
- Open Preferences (
Cmd/Ctrl + ,) - Go to Interface section
- Enable "Show Developer Panels"
- Developer panels become accessible in the sidebar
Contextual Auto-Show
Some panels appear automatically:
Selection-Based
- Select text → Text options appear
- Select image → Image options appear
- Select component instance → Override options appear
Mode-Based
- Enter Draw mode → Brush/path panels show
- Enter Sites mode → Web-specific panels show
- Start prototyping → Interaction panel shows
Configure Auto-Show
- Preferences > Interface > Auto-show contextual panels
- Options: Always, Smart, Never
Panel Layout
Left Sidebar
- Typically: Layers, Pages, Components
- Navigation and structure focused
Right Sidebar
- Typically: Properties, Design, Prototype
- Configuration and settings focused
Bottom Panel
- Console, Search results
- Expandable/collapsible
Tips
- Learn which tier each panel belongs to
- Trust contextual panels to appear when needed
- Enable Developer tier when doing handoff work
- Use Workspace Presets for quick tier changes
- Collapse unused panels to save space