Organize your canvas with sections

Before you start

Who can use this feature

Available on any team or plan

Anyone withcan editaccess to a file can create sections

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

1. Click Section in the toolbar or use the keyboard shortcut ⇧ Shift S.
2. 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

1. Click and drag objects on the canvas you’d like to add to a section.
2. Right-click the selection and select Wrap in new section from the menu.

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

1. Double-click the section title on the canvas or Layers panel.
2. Edit the title.
3. 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 add fills →

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.

1. Select the section you want to share.
2. Click Share in the right sidebar.

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:

1. Select the section.
2. Click Mark as ready for dev.
3. To unmark a section as ready for dev, click the three dot menu in the Ready for dev label and select Remove ready status.

Update the dev status

After you’ve marked the a section Ready for dev, if you make changes to the design, Figma automatically changes the dev status to Changed. The Changed status helps developers keep track of designs that iterate after being marked as ready for development.

To resolve the changed status for a section, click the Changed status indicator and enter a reason for the change. After, the dev status is returned to Ready for dev.

Learn more about managing the dev handoff process →

Delete a section

To delete a section and its contents:

1. Select the section.
2. Press Delete/Backspace.

To delete a section without deleting its contents:

1. Select the section.
2. Use the shortcut:
   • Mac: CommandDelete
   • Windows: 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.

Learn more about prototyping with sections →