Organize your canvas with sections
Before you start
Who can use this feature
Supported on any team or plan
Anyone with can edit access can create sections in a file
Organize your canvas with labeled sections to group related ideas and guide collaborators through your file.
Sections let you:
- Designate areas of the canvas for collaboration or ideation
- Organize files for easier navigation
- Link to a grouping of designs
- Mark content as "Ready for development" to help with the developer handoff
Sections in Figma design are a top-level element on the canvas by default. Sections can contain all layer types, including other sections, but cannot be contained within frames or groups.
Create a section
There are a few ways to create a section:
Toolbar and shortcut
- Click Section in the top toolbar or use the keyboard shortcut ⇧ Shift S.
- Click and drag the location of the canvas where you’d like the section to go.
You can also click and drag a section over the objects you want to add to it.
Selection
- Click and drag objects on the canvas you’d like to add to a section.
- Right-click the selection.
- Click Create section from the menu.
Tip: Double-click a section's icon in the Layers panel to navigate to it.
Add objects to a section
There are a few ways to add objects to a section:
- Move a section over an object
- Resize a section over an object
- Select and move an object into a section using your mouse or keyboard arrows
Edit a section
Title
- Double-click the section title on the canvas or Layers panel.
- Edit the title.
- Press Return or Enter.
Fill and stroke
Change the background and border color for a section using the Fill and Stroke sections of the right sidebar.
Learn how to apply and adjust stroke properties →
Share a section
You can direct collaborators to a specific section in your canvas by copying the link to that section.
- Select the section you want to share.
- Click Share in the top toolbar.
- Check the box to Link to selected section.
Mark a section as ready for development
Once content inside a section is finalized, you can mark the section as ready for development. This helps developers using Dev Mode by flagging the section for them.
To mark a section as ready for development:
- Select the section.
- Click Mark as ready for dev.
- To unmark a section as ready for dev, click the three dot menu in the Ready for dev label and select Remove ready status.
Note: Marking a section as ready for development does not prevent changes from being made to content in that section.
Delete a section
To delete a section and its contents:
- Select the section.
- Press Delete/Backspace.
To delete a section without deleting its contents:
- Select the section.
- Press CommandDelete/ControlBackspace.
Prototype with sections
In prototypes, sections help connect flows across different portions of your design.
When you create a connection to a section, Figma remembers the last visited frame of that section and automatically returns to it.