Smashing Magazine - #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:

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.

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 Events
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:


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
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


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

unsubscribe update preferences view in your browser

Older messages

#456: How to Name Things

Tuesday, May 14, 2024

How to name design tokens, colors, UI components, HTML classes and variables. Issue #456 • May 14, 2024 • View in the browser Smashing Newsletter Konbanwa Smashing Friends, Naming is hard. As designers

#455: CSS

Tuesday, May 7, 2024

CSS Masonry Layout, Self-Modifying CSS Variables and Hanging Punctuation Issue #455 • May 7, 2024 • View in the browser Smashing Newsletter Dobryi vechir Smashing Friends, When I first encountered CSS

#454: JavaScript

Tuesday, April 30, 2024

Front-End Engineer Handbook, JavaScript Cheatsheet, File System APIs and Invokers. Issue #454 • Apr 30, 2024 • View in the browser Smashing Newsletter Labas vakaras Smashing Friends, Let's talk

#453: Design Systems

Tuesday, April 23, 2024

Design system generator, types of design systems and how to consolidate design systems. Issue #453 • Apr 23, 2024 • View in the browser Smashing Newsletter Buổi tối vui vẻ Smashing Friends, Ah, design

#452: Design Workflow

Tuesday, April 16, 2024

How to choose the right idea, navigate difficult conversations and communicate design. Issue #452 • Apr 16, 2024 • View in the browser Smashing Newsletter Iyi akşamlar Smashing Friends, Design workflow

You Might Also Like

The Color Secrets Pros Swear By

Thursday, July 11, 2024

View in your browser | Update your preferences ADPro Keeping Up With Color It seems there's a new hot topic in color every week. This year alone, we've seen the “unexpected red” theory take

What’s Behind a Microtrend?

Tuesday, July 9, 2024

View in your browser | Update your preferences ADPro If you've ever wondered about the next big decor moment or debated dipping a toe into TikTok, AD's Senior Digital Design Editor Sydney Gore

#464: Friendly Little Helpers

Tuesday, July 9, 2024

Radio time machine, reverse dictionary, micropedia and templates on how to say No and Goodbye with grace. Issue #464 • July 9, 2024 • View in the browser Smashing Newsletter Gamarjoba Smashing Friends,

Accessibility Weekly #404: Overlays Misunderstand Accessibility

Monday, July 8, 2024

July 8, 2024 • Issue #404 View this issue online or browse the full issue archive. Featured: Overlays misunderstand accessibility "Accessibility overlays are a peculiar approach to accessibility

Reflections from Config

Sunday, July 7, 2024

Issue 202: Thoughts from the annual Figma conference ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Athena Calderone and Young Huh’s Savviest Social Media Advice

Tuesday, July 2, 2024

View in your browser | Update your preferences ADPro As we head into the July 4th holiday, we're revisiting some of our most popular business tips. Among our faves: This conversation on social

#463: Data Visualization

Tuesday, July 2, 2024

Data visualization in design systems, visual data visualization vocabulary, decision trees, color scales and accessible charts. Issue #463 • July 2, 2024 • View in the browser Smashing Newsletter Hello

Accessibility Weekly #403: In Detail - 1.4.11 Non-Text Contrast

Monday, July 1, 2024

June 24, 2024 • Issue #403 View this issue online or browse the full issue archive. Featured: In detail: 1.4.11 Non-Text Contrast (User Interface Components) "The Web Content Accessibility

Spotlight: Kate Syuma

Sunday, June 30, 2024

Issue 201: A conversation on scaling at Miro, Growthmates, and advising ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Inside Balsamiq: our new approach to internal product training

Thursday, June 27, 2024

Streamlining our team's product knowledge ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏