
New website, course and product updates - April 2024

From designing to prototyping, Figma is the ideal collaboration tool for designers and developers. When using the platform, staying organized to ensure an efficient workflow is a challenge many designers encounter.
Fortunately, Figma has an impressive feature for keeping a structured project: Sections. Beyond organizing and grouping elements within a canvas, you'll be able to use the feature for your Figma prototypes.
Let's dive in and explore more about Figma Sections in this article.
Figma Sections allow you to structure and group content on your canvas for ideation and prototyping to guide collaborators within your file.
Using Sections to divide parts of your design, especially for large projects, makes it easier to navigate. There are also useful collaborative functionalities:
Another great aspect of Sections is its ability to supplement the flow of Figma prototypes. Sections organize your design pages and structure the connection across prototypes.
When presenting your final output with Sections, Figma remembers the user's last viewed frame. This ensures that when the user returns, it will show the previously viewed frame first. This creates a more comprehensible transition of your prototype.
There are three ways to create a Section in Figma: Toolbar, Shortcut, and Selection.
A completed project contains multiple frames, groups, and elements. This can appear cluttered, making it difficult for developers to look through your design.
Figma Sections help you address file organization efficiently. Using the feature ensures your designs are clear and easy to navigate, making for a seamless handover process.
Organizing your design is the most basic function for Sections. When you use Sections for organization and structuring, you can add and delete elements and customize the Section.
To add and delete elements:
You can also share a link to the selected Section with your collaborators and mark them as ready for development for your developers.
To share a link to selected Sections:
Apart from seamless page organization, Sections serve another purpose by facilitating prototyping. When grouping and organizing prototypes, you can use Sections to connect different parts of your prototype, creating a cohesive flow throughout your design.
Prototyping your designed interfaces is a straightforward process that connects one component to the next page after an action is performed. In Figma, you can choose which components and pages would be part of the flow and specific actions to trigger the transition.
Suppose you're designing a cryptocurrency app with two main entry points: the main market page and a dedicated cryptocurrency coin screen. You aim to direct both pages' specific components to a buy-and-sell page. Utilizing the known prototyping method, you can successfully achieve this interaction.
However, your client or product manager then asks to link back the buy-and-sell page to both screens where it came from. This becomes a big hurdle when prototyping, as you can only create one link to one screen. Therefore, in the user flow, linking back a screen of your app would only return you to the one screen it's connected to.
With Figma prototypes, your design becomes more dynamic. Instead of linking back to just one page, Sections remembers the last page a user interacted with, returning them to the last opened page.
Sections combine pages of your design, allowing Figma to know which areas perform which flows in your prototype.
Using the same cryptocurrency app example, use Sections with prototype:
When you've prototyped with Sections, you're no longer locked to specific pages. This allows you to design seamlessly while significantly reducing the time you take to create a prototype.
There are many other ways to prototype efficiently in Figma; utilizing Sections is just one of them. If you want to understand better how you can use Figma to create flawless and effective prototypes, check out our Ultimate Figma Masterclass course.
In this end-to-end Figma course, you'll be able to master Figma and UI design concepts such as Auto Layout, prototypes & animations, design systems, design frameworks, and more in just 10 hours.
The Ultimate Figma Masterclass Course emphasizes practical, hands-on learning taught by industry expert Michael Wong. This course also allows designers to enhance their skills and apply these learnings to real-life scenarios. Taught in a compelling step-by-step method, this course's engaging content will captivate every eager student's attention.
Don't take our word for it; our students have enough to say.
Mizko, also known as Michael Wong, brings a 14-year track record as a Founder, Educator, Investor, and Designer. His career evolved from lead designer to freelancer, and ultimately to the owner of a successful agency, generating over $10M in revenue from Product (UX/UI) Design, Web Design, and No-code Development. His leadership at the agency contributed to the strategy and design for over 50 high-growth startups, aiding them in raising a combined total of over $400M+ in venture capital.
Notable projects include: Autotrader (Acquired. by eBay), PhoneWagon (Acquired by CallRails), Spaceship ($1B in managed funds), Archistar ($15M+ raised) and many more.