May 21, 2024 Smashing Newsletter: Issue #457
This newsletter issue was sent out to 204,280 subscribers on Tuesday, May 21, 2024.
Editorial
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.
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.
Different feature teams having different needs often result 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.
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.
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.
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.
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.
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)
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.
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.
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 →
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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.