August 27, 2024 Smashing Newsletter: Issue #471
This newsletter issue was sent out to 198,321 subscribers on Tuesday, August 27, 2024.
Editorial
Gone are the times when we were discussing and debating the role of design systems in digital products. These days, many of us are redesigning, refactoring, migrating, reorganizing, and refining design systems. Perhaps even moving from one version of the design system to another, often with multi-themed and multi-brand set-ups.
So let’s explore how to properly manage design systems once they get larger: how to structure and organize them in Figma, how to choose design tokens, decide when to add a component and map variables, and design system structure. All of it is expecting you in this very email newsletter today.
And if you’d like to dive deeper into the shiny world of design systems, we have a few wonderful workshops and conferences coming up:
- Successful Design Systems (starts today), an online workshop with Brad Frost,
- Advanced Design Systems (Nov 12–20) with Brad Frost,
- Figma Workflow Masterclass (Nov 14–22) with Christine Vallaure,
- SmashingConf NY 2024 🇺🇸 (Oct 7–10)
- SmashingConf Antwerp 2024 🍫 (Oct 28–31)
Wishing you a wonderful, optimistic, and positive week, everyone! You’ll achieve miraculous things this week! ☀️
— Vitaly
1. Structure Design System By User Flows
Organization is key to ensuring a design system serves as a single source of truth for your product. Otherwise, you risk that the design work will lose coherence as the scope grows.
The team behind the travel app Bonjour RATP chose an approach for their filing system in Figma, which you won’t see often but which has proved to be super powerful: they design and organize all screens in user flows.
In their case study, they share golden rules you can follow if you want to give the user flows methodology a try. To get a better understanding of what it looks like when applied to a real-world project, be sure to check out the Figma working files that the team opened for public viewing. (cm)
2. Organizing Design Systems
From design to engineering, from management to content and accessibility — a good design system makes sure that everyone involved shares a common understanding of where in the system they can find the information they need. And that can be quite a challenge.
Saurav Rastogi shares insights into how the design team at Razorpay organizes their design system — and a Figma template in case you want to adapt their approach. Valuable tips for organizing Figma files in a way that everyone can make sense of.
Another great read on the topic comes from Jérôme Benoit. He shares Figma file organization tips that have worked for the Doctolib design team, a team of 27 designers with different backgrounds and different levels of Figma knowledge.
Even if it might seem like a chore at first to remodel your files, the effort of establishing a well-thought-out structure is well worth it, as it ultimately enables you and your team to work more smoothly and efficiently. (cm)
3. Decision Trees For UI Components
Which UI component should you choose to solve a particular problem? The question can lead to never-ending discussions in design teams. To avoid long discussions, confusion, and misunderstanding when deciding what UI components to use and when decision trees are a wonderful solution you might want to look into.
In his article “Decision Trees For UI Components,” Vitaly explores real-world examples of decision trees and how you can get the most out of them. As it shows, a decision tree is not only a great way to visualize design decisions, but it also serves as documentation and establishes a shared standard across teams, with examples to follow. (cm)
4. Redesigning Design Systems
Whether you’re at the very beginning of your design system journey or are planning to improve an existing system, Redesigning Design Systems has got your back. Created by design systems expert Ness Grixti, the site is a goldmine for anyone looking to create a design system that people love to use.
The site provides practical guides and resources for creating, documenting, and maintaining your design system components. You’ll learn how to create the ultimate component library and assess and evolve your design system. Precious tips to level up a design system and make a positive impact on your business. (cm)
5. 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:
- Deep Dive On Accessibility Testing dev
with Manuel Matuzović. Sep 23 – Oct 7 - Inclusive Design Patterns For 2025 free
with Vitaly Friedman. Sep 24 - Accessible Typography for Web & UI Design Masterclass design
with Oliver Schöndorfer. Oct 10 – 18 - Cascading Style Systems: Resilient & Maintainable CSS dev
with Miriam Suzanne. Oct 14 – 18 - Interface Design Patterns UX Training (Autumn 2024) ux
with Vitaly Friedman. Nov 1 – Dec 2 - Advanced Design Systems workflow
with Brad Frost. Nov 12–20 - Figma Workflow Masterclass design
with Christine Vallaure. Nov 14–22 - Smart Interface Design Patterns UX
with Vitaly Friedman. Video course, 35 lessons. - Jump to all workshops →
6. Design Tokens Naming Playbook
Naming is hard, and design tokens are no exception. So, where do you start when naming tokens? How many layers do you need? To help you get started, Romina Kavcic created the Design Tokens Naming Playbook. The template includes components for all categories and allows you to experiment with different naming structures.
If you want to dive deeper into naming tokens, also be sure to check out Romina’s guide to design tokens and the interactive naming guide which covers everything from different naming approaches to running naming workshops. It also features a playground where you can play with names simply by dragging and dropping. (cm)
7. Launching A New Component
What do you need to consider when launching a new component for a design system? And why does it take so much time? Rama Krushna Behera’s behind-the-scenes guide takes a closer look at all the steps involved in creating a design system component.
The guide covers everything from component research to creating a proof of concept, creating variants, documentation, reviews, going live — and everything in between. A comprehensive overview of a process that seems simple from the outside but is more complex than one might think. But no worries, Rama’s tips will guide you through it safely. (cm)
8. Variable Mapping And Structure
Since their release last year, Figma variables have made building designs and managing a design system more efficient than ever before. So, if you haven’t already, now is the time to take a closer look at how to get the most out of them. Luis Ouriach created a handy guide to variable mapping and structure to save you time and effort.
The guide explores how to structure your variable collections for single, multi-brand, and multi-product systems. If you are new to variables, it also includes an introductory primer to variables, explaining the different types and how they are structured within Figma. (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.