Using Figma’s new section feature | by Ben McLaren | October, 2022

We now have access to the same sections facility that has been available in FigJam for a long time. (as of 10/22) This represents a much-needed addition to keeping our design systems, libraries, and files easy-to-use.

sections and boxes

Previously, we used shapes or frames to organize our boards. However, frames and shapes are not built to fit and can be difficult to differentiate and work with.

Enter “Section”. Purpose designed for the organization. They are a new object similar to frames with some significant differences in both form and behavior. Let’s take a look at how they work and more importantly, how they are used.

section

In general they look and can do most of what the frame can do with a few key distinctions. There are also some design features that focus on customizing the organization.

left square, middle section, right frame

one section design

Sections have some visual design differences that make them different from our frame counterparts:

  1. Sections are the page background color by default.
  2. Sections automatically have a 2px rounded edge.
  3. A section heading font is a strong black color for clarity and is contained within a box that is colored the same as the section.
  4. A section title font color will automatically adjust its color to a darker or lighter background to maintain good contrast. (Frames do this too)
  5. Stroke lines are automatically inside the shape.
  6. The section title depends on whether it is nested or not.
  7. Opacity on the fill color does not affect the title color.

section layer icon

Sections have a new unique icon that helps differentiate them from frames, shapes, and other object design oriented objects.

section headings

Naming sections are similar to frame idea headings. Sections now have a new blue highlight to make it easier to see where you need to double click to change headings.

Note: If you are not too close to the title when you rename it, it will automatically move to the section when you rename it. (It can be a little annoying if you accidentally triple click)

nesting

We can nest sections in the same way we frame. Sometimes, if you’re duplicating a segment instead of drawing a new one, it can take a while for Figma to notice that it’s nested.

There are some minor differences with frames in that you can’t nest sections inside frames or groups.

planning

Aside from the visual design sections there are a few small features that help keep us organized:

  • Sections automatically push themselves to the top of the layer stack.
  • Double-clicking on the section’s outline will automatically resize it based on the section’s content.
  • Different sections with the same name still group assets under a unified name on the asset panel.
  • Sections are their own layer object which means we can treat them as a separate layer.
  • Sections may not have auto-layout or constraints applied to them.

prototype

We can wire the prototype to the sections themselves and any screens, frames, and subsections within those sections.

Sections are able to contain position, if your prototype links to a section instead of a frame then Figma will remember the previous screen in that section if you exit.

This allows you to exit a flow and re-enter at the same point without having to handle any fancy prototype wiring.

This is one of the first “state” features (besides the auto-back feature) introduced by Figma. Thriller!

export

Exporting with sections is 99% the same, except for the section title. This makes the export output a little nicer.

The new Figma docs have some great ways they saw useful use cases they can do:

  • Designate areas of the canvas for collaboration or consideration
  • Organize files for easy navigation
  • Link to Designs group
  • Add clarity on what is ready for implementation during developer handoff

Let’s look at some more concrete examples of how we can use sections for these.

Designate areas of the canvas for collaboration or consideration

It’s great to have a clear area for organization and collaboration. Here we can divide the regions for:

  • Prototyping new components or screens.
  • Onboarding or training area in your file.
  • When you need to reserve a space for use or work in progress.
  • Areas reserved for different team members.

Organize files for easy navigation

  • Using sections we can precisely divide areas, indicate position and group in a visual way.
  • The new section icons help us separate the organization from our design frame.

Note: You can add emoji to most text layers.

Link to Designs group

This is something I’ve been waiting for for ages!

Whenever I send a link to a developer to reference a design, I always need to send a link to the first frame, the whole file, or page.

Now I can disassemble the design and link them to it! It works the same way as linking to a frame.

Note: If you share a link to a section (or frame) copy and paste that section/frame to another page the link will no longer work. You can use right click on “Move to Page” to preserve the share-link.

Add clarity on what is ready for implementation during developer handoff

When we add the nesting and linking features above we can use sections to indicate which parts of the design area are ready for hand-off.

We can add these to our widgets, annotations, and any document to make our design more clear.

The section is a great addition. This sets the scene for even more improvements in the future to help us collaborate even better.

I can’t wait to see what we get at the Figma Schema 2022 conference! Feel free to check out my other article The Complete Guide to Figma Branching

I hope this article has been useful! If you have any questions, things to add or want to drink coffee, get in touch at is connected in either Tweet me Ben McLaren

If you liked this article, show your support by clapping or following this author.

Leave a Comment