Sections are organizational containers that help you structure large design files. Unlike frames, sections don't clip content and are purely for organization - they're visible in the editor but don't export.
Creating Sections
- Select the Section Tool from the toolbar
- Or press
Shift + Sto activate - Click and drag to draw a section area
- Name the section in the label that appears
Section vs Frame
| Section | Frame |
|---|---|
| Organizational only | Design container |
| Doesn't clip content | Can clip content |
| Not exported | Exportable |
| Semi-transparent fill with dashed stroke | Has fill, stroke, effects |
| Contains frames | Contains elements |
Using Sections
Naming Sections
- Double-click the section label to rename
- Use descriptive names like "Header Variants" or "Mobile Screens"
- Section names appear in the Layers panel
Moving Sections
- Click and drag the section label to move
- Contents move with the section
- Hold
Cmd/Ctrlto move section only
Resizing Sections
- Drag section edges to resize
- Contents are not affected by resize (sections are just visual organizers)
- Resize manually to encompass your content area
Section Colors
Customize section appearance for better organization:
- Sections automatically assign colors from an 8-color palette (red, blue, green, magenta, yellow, cyan, orange, purple)
- Customize colors via Properties Panel when section is selected
- Color appears as subtle background tint with dashed border
- Helps visually distinguish project areas
Navigation with Sections
- Layers Panel - Sections appear as top-level groups
- Zoom to Section - Double-click in Layers to zoom
- Find Sections - Use
Cmd/Ctrl + Fto search for sections by name
Common Organization Patterns
- By Screen - "Login Flow", "Dashboard", "Settings"
- By Component - "Buttons", "Cards", "Forms"
- By State - "Default", "Hover", "Active", "Disabled"
- By Platform - "iOS", "Android", "Web"
- By Status - "In Progress", "Review", "Approved"
Best Practices
- Create sections before starting a large project
- Keep related frames within the same section
- Use consistent naming conventions
- Color-code by project phase or team
- Sections help collaborators navigate shared files
Tips
- Sections can contain other sections (nested organization)
- Use sections for handoff - group screens by developer assignment
- Collapse sections in Layers panel to reduce clutter
- Sections are perfect for design system organization