If you’ve been working in Figma, you know how important it is to organize your board so you and your team can clearly understand a design’s workflow. Maybe you’ve used Figma’s sections feature for this reason.
Let’s cover the use cases for Figma’s sections and how to use them so you can maintain an organized, collaborative workspace.
Sections are new objects introduced to enhance organization within boards, and they improve the way we organize our design files and streamline the prototyping process. Unlike frames and shapes, sections are specifically designed for organizing and coming up with distinctive visual and functional features.
With the introduction of sections, our workflow becomes more efficient, enabling seamless collaboration and enhanced clarity in our projects. They can be found under the frame tool and have similarities to frames, but with some differences:
Overall, sections have various use cases, including designating areas for collaboration or ideation, organizing files for easier navigation, linking to specific design groups, and indicating readiness for implementation during developer handoff.
With sections, designers can better organize their Figma files, improve collaboration, and streamline the design process.
Get ready to take your design organization to the next level!
Before we dive into how to use sections, let’s clarify the difference between frames and sections.
Sections are used to organize our workspace and frames within the Figma file. They can be found in the top left toolbar in the following dropdown menu:
Sections are also activatable through Shift + S.
Sections are an organizational tool, while frames, although seemingly similar, are design tools.
This means that certain characteristics, such as effects, cannot be attributed to sections, and we cannot take advantage of certain functionalities such as Auto Layout, layout grid, and clip content:
When we create a section, by default it will take on the background color of our workspace. By zooming out, we can notice that the name assigned to the section will always be clearly visible and legible, making it easy to identify.
Remember that the name of the section can be modified through the left sidebar, where we find all the different levels present in our workspace, or by directly clicking on the name above the section:
Similar to frames, if we wrap a group of components, elements, or frames with sections, they will automatically be included within it:
Sections can be nested within other sections, but we cannot have nested sections within frames or layouts:
There’s one primary reason we use sections, and it’s organizing our workspace. We just need to wrap our components to enclose them within the section:
We can share a specific section with other users by simply selecting the section and pressing the share button. Automatically, the user who receives the link will be able to view the section.
The use of sections greatly facilitates the ability to navigate and orient oneself within the workspace, as it only requires typing the section name in the Find field to locate it, thus avoiding the risk of getting lost or disoriented in a crowded workspace.
The use of sections helps us most especially in the prototyping phase. They have allowed us to solve a problem that caused a lot of confusion during this phase, as it forced designers to increase the number of screens and links:
On the left, we have three frames (A, B, and C), each equipped with a button that, when clicked, allows us to access the right frame in red (D). The frame (D) is equipped with a back button, which, when pressed, automatically redirects the user to the initial screen (A, B, or C).
During the prototyping phase, to achieve this result in the past, we would have been forced to operate using this next solution. However, this solution makes our prototype more complex due to the excessive number of connections and frames that we are compelled to create:
Figma, before the introduction of sections, was unable to recognize the starting frame, so we couldn’t generate a dynamic link that would automatically recognize which screen it came from. For this reason, the solution was to duplicate frame (D), each of which had to be linked to the following screens (A, B, and C).
But with the introduction of sections, this problem has been solved, simplifying the prototyping process:
To solve this problem, we just need to insert frames (A, B, and C) into one section (section1) and frame (D) into another separate section (section 2). Once we’ve done that, we’ll connect the buttons of frames (A, B, and C) to frame (D). In order to go back and automatically have Figma recognize the starting screen, we’ll connect the (back) button to section 1, which contains frames (A, B, and C).
By offering a unique set of visual and functional features, sections revolutionize the way we manage our design files and streamline the prototyping process.
Sections differ from frames in that they are specifically designed for organization rather than design, making them ideal for structuring our workspace efficiently. They can be easily identified with their distinctive icon, rounded edges, and automatic resizing based on content.
Sections offer various use cases, such as facilitating collaboration, providing clearer navigation, linking to specific design groups, and indicating implementation readiness during developer handoff.
The advantages of using sections become particularly evident during the prototyping phase. By using sections, you can create dynamic links that recognize the starting frame, reducing the need for excessive connections and duplicated frames. This simplifies the prototyping process and improves overall efficiency.
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
When familiar patterns start to feel stale, these seven ways will help you revive your design inspiration and to create standout user experiences.
Here’s the lowdown. Scaling icons properly keeps them crisp and clear on any screen size. I talk more on this in the blog.
Brands like Amazon and Walmart have a product page design that sells itself. In this blog, I analyze how they do it and what you can learn from them.
The aesthetic-usability effect shows that users equate beauty with functionality. But where’s the line between looks and usability? The challenge lies in balancing visual appeal with true usability.
Learn more →
