Sections are great for organizing components, documenting states, grouping elements in external embeds, and better visibility of component and frame names.
Are you using #sections in @figma yet? They are one of the most underrated features in Figma. I switched my Figma component documentation entirely to sections and it has made a huge difference. Here's why: pic.twitter.com/WaqErkYBLi— Christine Vallaure (@moonlearning) April 11, 2023
You can now keep your workspaces, teams, projects, and files more organized with custom sidebar sections on Organization and Enterprise plans.
Luis shares a few tips on structuring library files. He recommends optimizing variants for searching and usage rather than maintenance, and suggests this file structure: Page → Section → Variant. Also, check out his other thread on naming and splitting your library files.
We spend a lot of time talking about component structure, but the library files themselves are often ignored— luis. (@disco_lu) February 27, 2023
So what goes into structuring a good Figma component library?
Here are a few tips, hopefully a good starting point 📈 pic.twitter.com/2zL7xk9eSx
Patrick Morgan with tips for tidying your Figma account with a file thumbnail component.
Feeling like your @figma account could use some tidying? I know, I've been there.— Patrick Morgan (@itspatmorgan) February 25, 2023
Here are the 8 steps I follow to build a file thumbnail component that's minimal, consistent, and scales: pic.twitter.com/iJhBEoK0Es
Miggi shows how to use Figma sections for prototyping. Besides being a wonderful organizational tool, sections give you the ability to remember the states of areas of your prototype.
Anyone else love sections in Figma? @miggi takes it one step further to show you how to use sections for prototyping. pic.twitter.com/Z3IJZnRGjW— Figma (@figma) February 13, 2023
Jess starts a productive discussion on organizing files in Figma by asking about having one file per feature where iterations/updates happen and another file for all “done” work. That’s similar to how I organize my work projects, but in reality, bringing work back to the “single source of truth” file or abstracting it to the design system is always hard to prioritize.
You're on a product team and you're organising your files in @figma. It's a large product and if all design work is in one file, the file is too big.— Jess 🇺🇦 (@jesseddy) February 7, 2023
What do you think about having one file for each feature where iterations/updates happen. And one file for all "done" work? pic.twitter.com/6iSlphJEHP
Luis Ouriach wrote a massive multi-part guide on structuring teams, organizing projects, and managing files in Figma.
Jackie Zhang writes about approaches to enhance team communication through logically structuring Figma files, labeling and annotating your designs, and hooking up all your files in a single FigJam flow. I particularly like the last recommendation and going to try it on the next project.
The team at Deliveroo built a library of “file management goodies” to bring more context to their designs and help people across the business navigate design files more efficiently. Section banners, flow and screen details, highlights, notes, and linked resources helped their team annotate their thinking within Figma.
Continuing the theme of supercharging built-in features, this plugin takes Figma’s “Select all with…” command to the next level by offering a whole range of properties to choose from.
“Customers can collaborate confidently with agencies and companies, knowing that the right company can own the work. Customers on Professional, Organization, and Enterprise plans can now transfer teams and projects from one company to another in a few clicks, and customers on Organization and Enterprise plans can receive transfers.”
In addition to Joey’s thumbnail kit, check out this template from the design team at Doist. It’s specific to their products, but can be easily customized or used as an inspiration.
Joey Banks published an update to his file thumbnail UI kit with dozens of custom combinations, and now even easier to edit with component properties.
A few changes to team controls and permissions on Enterprise and Organization plans.
Organize content with sections to help teammates navigate through busy Figma files. A section is a default top-level element on the canvas and its own layer type is used primarily for organizing files and grouping designs. Additionally, sections allow you to organize prototypes and preserve their state, as Miggi shows in one video and Anthony in another. See also Sho Kuwamoto’s notes on the controversy surrounding launching this feature.
The step-by-step guide on cleaning up a Figma file that was inherited from another designer. I like Edward’s focus on communicating with the team and automating repetitive work in the process.
Clara Ujiie shows how to archive your work using pages and version history.
Want to archive your work in Figma?— Figma (@figma) September 6, 2022
Here's how to do it.
Thanks, @claraujiie for the #FigmaTip 🤩 pic.twitter.com/rgBoePMlTA
The design team at Spotify discusses balancing conflicting goals of creating a playful space for experimentation and fostering interdisciplinary team collaboration in the Figma files. The key to achieving both is balancing the exploratory nature of design with a logical organization in your shared work. “A chaotic mess of brilliant designs is incomprehensible without a helpful file structure but too much structure early on might stifle your team's inspiration.”
Post-it notes are great for gathering and organizing feedback. (I often use comments as to-do’s, but also copy a post-it note from FigJam to my Figma files for higher visibility and questions.)
I capture all feedback in my @figma design file using sticky notes. I review all the feedback and make a list of revisions to bring into the next design round. I keep meticulous track of everything, so there is visible history. pic.twitter.com/S3f7a8xlpu— Jess 🇺🇦 (@jesseddy) July 19, 2022
Patrick Morgan created a useful library of Figma helpers and wrote about designing systems and tools for yourself to facilitate your own unique design workflow.