Left
All Post

How to Speed Up Prototyping by 50% with Figma Sections

Menu
Figma
clock
8 min read
upload
July 21, 2023

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.

What are Sections in Figma?

Figma Sections

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:

  • Marking Sections as "Ready for development" to help with developer handover
  • Sharing specific sections to focus on smaller tasks within the project

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.

How to create Figma Sections

There are three ways to create a Section in Figma: Toolbar, Shortcut, and Selection.

Toolbar

How to create Figma Sections with Toolbar
  • Select the dropdown button next to the frame icon on the Toolbar
  • Locate and select Section
  • Create your Section by clicking and dragging over your desired space in the canvas

Shortcut

How to create Figma Sections with Shortcut
  • Press the keyboard shortcut Shift + S to bring up the Section cursor.
  • Create your Section by clicking and dragging over your desired space in the canvas

Selection

How to create Figma Sections with Selection
  • Click and drag over your desired space in the canvas within your Figma canvas.
  • Right-click the selected area and click Wrap in New Section

How to use Figma Sections

How to use Figma Sections

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.

How to organize your design with Sections?

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:

Organize your design with Sections?
  1. Create a Section on your canvas by selecting and dragging your cursor to your desired area.
  2. Label your Section as desired.
  3. Add other elements to your Section by selecting and dragging the elements into the Section.
  4. Customize the color fill, border stroke, and opacity of the selected Section on the right panel in Figma to edit the Section.
  5. Double-click the section title on the canvas or Layers panel to rename the Section.

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:

  1. Select the Section you wish to share.
  2. Click on Share on the top right of the toolbar.
  3. Tick the Link to selected section box.
  4. Copy the link or send an invite to your collaborators.
  5. Click on the Section and mark the Section ready for development.
  6. Unmark the Section by performing the following:

    - Click the Ready for dev label.
    - Click the three-dot menu.
    - Select Remove ready status.

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.

Building Prototypes with Figma Sections

Prototypes with Figma Sections

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.

Let's examine a use case

Prototype On Drag Animation

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.

Prototype Link Back Action

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.

How do we solve this?

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:

Prototype with Figma Sections
  1. Create separate Sections of the areas you wish to connect by performing the following:

    - Use the toolbar to open Sections; or
    - Press Shift + S to open Sections; or
    - Click and drag the area you wish to section, right-click and press Wrap in Section.
  2. Label your Sections as desired. (In this case, we used 'Market' and 'Buy / Sells')
  3. Click 'Prototype' on the right panel in Figma.
  4. Connect the subsequent flow by performing the following:

    - Click the component on the 'Market' Section that you want to trigger the connection.
    - Find a small circle icon on the component and drag it to the screen in the 'Buy / Sells' Section.
    - Adjust the Interaction details (mouse action, delays, animation, etc.)Repeat for other screens as necessary.
  5. Link back the 'Buy / Sells' section to the 'Market' section by performing the following:

    - Click the back component on the 'Buy / Sells' section.
    - Find a small circle icon on the component and drag it to the 'Market' Section without linking it to any screen.
    - Adjust the Interaction details (mouse action, delays, animation, etc.)
  6. Preview the prototype by clicking the 'Play' button on the upper-right toolbar in Figma.
Prototype Presentation

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.

Master Prototyping in Figma

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.

Michael Wong
Founder of Designership & z0 Studio

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.

You can learn more about me on:
Did you like this article?
Spread the word!
sunsun
moonmoon
Michael Wong
Writer
Contributor
Catch the latest updates
Subscribe to our newsletter and stay in the loop.
Thank you!
Oops! Something went wrong while submitting the form.
Table of content
socialsocial
Blogs

The design pulse

Tips, trends, and thought pieces on UX/UI design.
What's New

New website, course and product updates - April 2024

A lot happened this month. Take a look at what's coming.
Michael Wong
Apr 17, 2024
·
7 min read
UX Design

Using Quantitative and Qualitative Research in UX Design

What's the difference between qualitative and quantitative methods in UX research? Learn how to choose the best approach to enhance your user experience design in 2024.
Michael Wong
Feb 23, 2024
·
7 min read
UX Design

A Complete Guide to Primary and Secondary Research in UX Design

Unlock the secrets of UX success with our in-depth guide on primary and secondary research methods. Discover tools, strategies, and examples to elevate your user experience design projects. Perfect for beginners and seasoned professionals alike.
Michael Wong
Feb 19, 2024
·
7 min read
UI Design

10 Best Free Fonts for UI Design (2024 Edition)

UI Design Fonts don't have to be expensive to make your design stand out — some of the best ones are free. Find them here.
Michael Wong
Jan 30, 2024
·
10 min read
UX Design

The Ultimate Guide to UX/UI Design in 2024

Dive into the future of UX/UI design with our comprehensive guide for 2024. Discover cutting-edge trends, tools, and techniques that will shape the industry and empower you to create stunning, user-friendly designs.
Michael Wong
Jan 25, 2024
·
7 min read
UX Research

16 Best UX Research Tools in 2024: Gather Faster & Better Insights

Discover the 16 best UX research tools in 2024. From analytics to user testing, our guide helps you choose the right tools to elevate your user experience research and design.
Michael Wong
Jan 9, 2024
·
7 min read
UX Research

15 Most Effective UX Research Methods: Pros and Cons

Uncover the diverse world of UX research methods. From user interviews to usability testing, learn how different techniques can enrich your UX design process for optimal results.
Michael Wong
Jan 5, 2024
·
7 min read
Figma

The Ultimate Guide to Figma for Beginners (Updated 2024)

Unlock the full potential of Figma with our ultimate guide. Dive into the world of UI design and discover how Figma's powerful tools can transform your design process.
Michael Wong
Dec 15, 2023
·
7 min read
UX Research

The Ultimate Guide to UX Research (Updated 2024)

Master the art of UX research with our ultimate guide. Explore methodologies, utilize the best tools, and adopt industry best practices for impactful user experience research.
Michael Wong
Dec 8, 2023
·
15 min read

Join our newsletter

Get the latest updates, exclusive offers, and more straight to your inbox!
Please insert valid email
WELCOMESHIP5
Copy
Oops! Something went wrong while submitting the form.