#457: Figma Organization

Cleaner Figma files, Figma workspace template, organization template, multi-brand Figma kit. Issue #457 • May 21, 2024 • [View in the browser]( [Smashing Newsletter]( Shikamoo Smashing Friends, How do you organize your Figma files? That’s the question that we asked ourselves. And to find the answer, we explore how designers out there use and organize Figma to improve maintainability and ensure that Figma files aren’t slow and heavy. In this newsletter, we highlight some useful case studies that will help you make your Figma files slightly cleaner and slightly lighter. [Meets Web Design]( In the upcoming weeks and months, we have a few friendly events coming up, and perhaps you’d love to join in as well: - [Smashing Meets Web Design]( (June 18, free for everyone!) - [SmashingConf Freiburg 2024]( 🇩🇪 — The Web, Sep 9–11 - [SmashingConf New York 2024]( 🇺🇸 — Front-End & UX, Oct 7–10 - [SmashingConf Antwerp 2024]( 🇧🇪 — Design & UX, Oct 28–31 - [Figma Workflow Masterclass]( (online workshop, Nov 14–22) Thank you so much for your kind and ongoing support, everyone! And we hope to see you this year. Sending a lot of positive vibes your way — and let’s declutter Figma! — [Vitaly]( --------------------------------------------------------------- 1. Organizing Design System Libraries How to manage your Figma libraries without any friction? In his post “[How We Organise Our Design System Libraries]( Jérôme Benoit shares insights into how the team at Doctolib set up a design system with 900 shared components and more than 40 people involved — with product-specific domain components and shared ownership between the design system team and product designers. [How We Organise Our Design System Libraries]( Different feature teams having different needs often results in secondary design systems emerging. Not so at Doctolib where all teams work within one single design system. To accommodate their different needs, the Doctolib setup allows them to pull and push components between levels and search across all design work in all domains at once — without any organizational overhead. A great example of what a smart, scalable Figma library can look like. (cm) --------------------------------------------------------------- 2. Figma Organization Kits Looking for more insights into how teams organize their Figma files? Vitaly compiled useful [Figma kits, templates, and guides]( to help you better organize your work and improve collaboration. [How We Organize Design Files in Figma]( The collection includes kits for thumbnails and annotations, file management goodies, and recommendations from teams on how they set up a well-established file organization practice at their company. A treasure chest for anyone who plans to bring more structure into their Figma files and design systems. (cm) --------------------------------------------------------------- 3. Figma Hygiene Checklist Keeping your Figma files clean and organized doesn’t take much effort, but it makes working with them a lot more convenient — not only for yourself but everyone who views or navigates the files. Anna Gordiyevska shares a checklist with [16 simple tips for keeping Figma files clean](. [How to keep Figma files clean]( The checklist includes tips for naming layers, frames, and sections, for organizing pages and creating chapters and cover pages, as well as documentation. Useful plugins and tutorials are also included. Small tips that go a long way. (cm) --------------------------------------------------------------- 4. Upcoming Workshops and Conferences That’s right! We run [online workshops on frontend and design]( be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. As always, here’s a quick overview: - [Design Token and UI Component Architecture]( workflow with Nathan Curtis. June 6–14 - [Accessibility for Designers]( ux with Stéphanie Walter. June 3–12 - [Designing For Complex UI Masterclass]( ux with Vitaly Friedman. June 20 – July 2 - [Advanced Modern CSS Masterclass]( dev with Manuel Matuzović. June 24 – July 8 - [Design Patterns For AI Interfaces]( ux with Vitaly Friedman. July 9–23 - [Fast and Budget-Friendly User Research and Testing]( workflow with Paul Boag. Jul 11–25 - [Creating and Maintaining Successful Design Systems]( workflow with Brad Frost. Aug 27 – Sept 10 - [Figma Workflow Masterclass]( design with Christine Vallaure. Nov 14–22 - [Jump to all workshops →]( --------------------------------------------------------------- 5. Booking.com Design System Organization How do you build a design system for 150+ product teams, 200+ designers, 800+ developers, and serving four platforms? That’s the challenge that the design system team at Booking.com faced. [How we built our multi-platform design system at Booking.com]( In “[How We Built Our Multi-Platform Design System]( Nicole Saidy shares insights into how they established a design language, used design tokens, and created one source of truth for all themes, tokens, and modes by building a Design API. They documented the entire process in a [Figma Kit]( along with a checklist to guide you through every step of the multi-platform development process. For other interesting case studies to dive into, also be sure to check out Vitaly’s [roundup](. He collected design system case studies from teams such as Wise, AirBnB, Salesforce, IBM, Storyblocks, and more. Lots of valuable takeaways for your own design system are guaranteed. (cm) --------------------------------------------------------------- 6. Figma Workspace Template Microsoft designers Raquel Piqueras and Christina Yang recently adapted the way they work in Figma to improve collaboration and productivity. To help you do the same, they released the [Figma Workspace Template]( a toolkit to stay organized and bring more focus and clarity to your workflow. [Figma Workspace Template]( If you want to give it a try on your next project, duplicate the Figma file and use it as your workspace. It includes a cover and intake form that keeps everyone aware of links, stakeholders, and deadlines. You can also track your progress and past work, map requirements to your visuals, use stickies to clarify aspects of your design, and map screens out to user stories. A handy little helper! (cm) --------------------------------------------------------------- From our sponsor Make Your Design System Thrive With What Is Live [StackBlitz]( Join us May 29th to uncover how you can use live environments to ship products faster, enhance code efficiency, and adopt design systems. [Save your spot today](. --------------------------------------------------------------- 7. Design File And Cover Page Organization We often assume that fellow team members know how to navigate Figma the way we do. However, other designers may have different methods, and engineers and PMs may not know where to start at all. To organize your Figma files so they are easy to use for everyone involved in a project, Lee Munroe shares the [template]( he and the design team at One Signal Design use for organization. [How we Organize Design Files and Cover Pages in Figma]( The template has pages for everything from the cover to designs anyone can reference, local components, wireframes, user testing, and user research material already included. A fantastic boilerplate that can be adapted and modified depending on the size and complexity of the project. (cm) --------------------------------------------------------------- 8. Multi-Brand Figma Kit What could a multi-brand, multi-theme design system look like? Pavel Kiselev has been tinkering with the idea of a design system for true white-label products for a few years and now shares a [behind-the-scenes look at how he created such a system]( that can adapt to different brands. [Making of true multi-brand design system]( Pavel’s approach works like a forking repository or CodePen project: to get started with a new project, designers can copy the single master Figma file that includes all the components, styles, and variables. To save them time and effort when they want to change colors, typography, spacing, radii, elevation, and component styles, Pavel built in automation that makes it possible to quickly adapt the source system for specific needs without a lot of manual work. Clever! (cm) --------------------------------------------------------------- 9. Recently Published Books 📚 Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as [printed books](. Have you checked them out already? - [Success at Scale]( by Addy Osmani - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Check out all books →]( [Success At Scale]( It’s here, and it’s shipping! [Success At Scale]( a new book by Addy Osmani. [Get the book]( or [browse the complete library](. --------------------------------------------------------------- 10. Recent Smashing Articles - [Hidden vs. Disabled In UX]( - [Beyond CSS Media Queries]( - [Why Designers Aren’t Understood]( - [Building A User Segmentation Matrix To Foster Cross-Org Alignment]( - [Transforming The Relationship Between Designers And Developers]( --------------------------------------------------------------- That’s All, Folks! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](