NL #471: Design Systems

Decision trees for UI components, organizing design systems, design tokens, how to design a new component, and variable mapping. Issue #471 • Aug 27, 2024 • [View in the browser]( [Smashing Newsletter]( God eftermiddag Smashing Friends, 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. [SmashingConf New York]( Meet [SmashingConf NY 2024]( all around UX, front-end, design — and also design systems. [Get your ticket!]( 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. [How user flows became the core of our powerful filing system in Figma]( 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, also be sure to check out the Figma working files which 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. [Organizing Design Systems]( 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. [Decision Trees For UI Components]( 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, it also serves as documentation and establishes a shared standard across teams, with examples to follow. (cm) --------------------------------------------------------------- From our sponsor How I Cut 22.3 Seconds Off an API Call with Sentry 🕒 [SurveyJS]( Struggling with slow API calls? Dan Mindru walks through how he used Sentry’s Trace View to shave off 22.3 seconds from an API call that handles HTTP calls, file I/O, AI generation, and DB queries. [Read the blog]( to learn how to identify bottlenecks and more. --------------------------------------------------------------- 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. [Redesigning Design Systems]( 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. [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: - [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. [Design Tokens Naming Playbook]( 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. [Behind The Scenes Of Designing A Design System Component]( The guide covers everything from component research to creating a proof of concept, creating variants, documentation, reviews, and 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. [Variable Mapping And Design System Structure]( 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) --------------------------------------------------------------- From our sponsor Join Netlify Compose 2024 — Limited Spots Available! [Netlify]( Get ready for an exciting lineup this year with over a dozen inspiring speakers and sessions focused on simplifying development, smarter workflows with AI, and the latest in the composable ecosystem. Hands-on learning. Community connection. Platform insights. [Don’t miss out!]( --------------------------------------------------------------- 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 - [Generating Unique Random Numbers In JavaScript Using Sets]( - [Mastering Typography In Logo Design]( - [Regexes Got Good: The History And Future Of Regular Expressions In JavaScript]( - [Pricing Projects As A Freelancer Or Agency Owner]( --------------------------------------------------------------- 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](