Here are some tips on using groups, frames, and sections to organize design system Figma files.
Creating a well-structured Figma file template makes it easy for collaborators and viewers of the systems file to navigate and quickly find what they need.
Groups
Groups allow you to combine multiple elements together as a single top level layer. A group's bounds are determined by its child elements, so resizing or moving those elements will cause the group's bounds to adjust automatically.
- Use groups if the elements inside your group aren't reusable accross your file.
- The elements inside the group don't need auto-layout and resizing properties.
- Use groups if you need to set auto-layout and constraints, and make elements dynamic.
Learn more about Figma groups and how to set up them.
Frames
Frames allow you to create dynamic layouts on Figma. Differently from Groups, frame sizes are set independently from their child elements. When repositioning or scaling child elements inside a frame, its bounds will not auto-adjust.
We always use Frames to construct our Gestalt components.
- Use frames to construct components or any reusable assets.
- To control padding, margins, and spaces.
- Use frames if you don't need dynamic controls and your elements aren't reusable acrros your file.
Learn more about Figma frames and tricks to get up to speed.
Sections
Sections allow you to organize your canvas by adding labels, and to guide collaborators through your file.
Use Sections for organizing information inside your pages and layouts. They work as layer types allowing to add and organize other artboards inside. Please note: Cannot be contained within frames or groups.
- Use sections to organize your canvas by adding labels to specific part of your design.
- Use sections to replace groups or frames.
Learn more about (Figma Sections) and its best practices.