#427: Design Systems

SmashingConfs 2024, design systems, how to organize design tokens, best practices, design documentation and how to decide on new design system components. Issue #427 • October 17, 2023 • [View in the browser]( [Smashing Newsletter]( Kia Ora Smashing Friends, We’re just returning from SmashingConf Design & UX in the magical city of Antwerp, Belgium 🇧🇪, and oh my, what an [incredible experience]( it has been — with 550 smart, kind, and passionate attendees, learning everything around design, UX, research, AI and design systems. Just before opening the conference, I carefully peeked from the curtains at the audience. I couldn’t believe the incredibly friendly energy that was filling up the astonishingly beautiful venue. The only way to describe the feeling is that it was beautifully overwhelming in so many ways — and it was one of the most beautiful conferences we’ve ever had! [SmashingConf 2024]( [SmashingConfs 2024]( the schedule for next year is set, and we’d be absolutely delighted to welcome you. So, no wonder that we are delighted to be coming back to Antwerp next year! Meet [SmashingConf Antwerp 2024]( 🍫 in the magical Bourla on Oct 28–31, 2024 — with friendly team tickets for truly smashing teams. [Super-duper-early-birds are now on sale](. - [SmashingConf Freiburg 2024]( 🇩🇪 (Oct 28–31, 2024) - [SmashingConf NYC 2024]( 🇺🇸 (Oct 28–31, 2024) - [SmashingConf Antwerp 2024]( 🇧🇪 (Oct 28–31, 2024) For this newsletter, though, we explore the wonderful and mysterious world of design systems — specifically focusing on better ways to structure and maintain them over time. Thank you so much yet again for your kind and ongoing support, everyone! 👏🏼👏🏽👏🏾 — Vitaly ([@vitalyf]( --------------------------------------------------------------- 1. Design Tokens Taxonomy Design tokens might be the smallest part of a design system but also the most important one. Romina Kavcic calls them the “backbone of your design system,” the “building blocks of your design language.” In her [Design System Guide]( she dives deeper into what you can achieve with design tokens and shares naming conventions for colors, typography, and levels to help you keep your brand’s visual style consistent and easy to manage. [Design Tokens]( Another [fantastic read on the topic]( comes from Nate {NAME}. He shares insights into how the Intuit Design System team evolved the system’s tokens to create a flexible taxonomy. What makes this particularly interesting is that the Intuit Design System serves as the foundational system for other multidimensional systems for a wide array of different products. An interesting look into design tokens that goes beyond the brand theme. (cm) --------------------------------------------------------------- 2. Organizing Design System Libraries How to make a design system at scale work? How do you keep it clean, well-organized, and easily accessible for everyone involved? Jérôme Benoit shares valuable insights into [how the team at Doctolib manages their design system]( with more than 40 people involved who are inserting more than 70,000 components within a week. [How we organise our Design System libraries to help Doctolib designers use more than 70 000 components a week]( Jérôme’s top tips to keep things organized: Be clear on rights, permissions, and ownerships from the start, rely on multiple libraries instead of a monster containing everything, include everyone and synchronize, and stay smart when deprecating components. Precious advice, particularly for fast-scaling teams. (cm) --------------------------------------------------------------- From our sponsor Get A Complete Picture Of Your Site’s Performance [SpeedCurve]( Learn how users experience the speed of your site by using Lighthouse audits to fix issues and measure the impact of slowdowns on business and user engagement metrics. Integrate with your CI/CD process to fight regressions and stay fast. [Explore SpeedCurve today]( --------------------------------------------------------------- 3. Design System Structure Best Practices How to best set up a design system structure in Figma? The Figma advocate team collected their tips in a [FigJam file](. It highlights example structure setups for each paid plan, different types of design system files, and recommendations for non-global components. [Design System Structure Best Practices]( In general, the Figma team recommends to build your design system’s structure on top of three pillars: a main design system team, with projects and files for your foundations, atomic components, assets, and brand elements; a design system project within individual teams for team-specific components or styles; and components pages within your files for components localized to a specific feature you’re working on. A great foundation to make your design system more efficient. (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: - [Customer-Centric Product Strategy Workshop]( UX with Debbie Levitt. Oct 18–26 - [Design KPIs Masterclass]( UX with Vitaly Friedman. Oct 31 – Nov 8 - [Accessibility for Designers]( UX with Stéphanie Walter. Nov 6–15 - [Building Modern HTML Emails]( Dev with Rémi Parmentier. Nov 9–17 - [Advanced Modern CSS Masterclass]( Dev with Manuel Matuzović. Nov 27 – Dec 11 - [Successful Design Systems]( Workflow with Brad Frost. Nov 28 – Dec 12 - [Design Management Masterclass]( UX with Slava Shestopalov. Nov 30 – Dec 8 - [Smart Interface Design Patterns]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 5. Keeping Design Documentation Alive The best design documentation is the one that is being used by the team. Reality often looks different, though, and the stuff you’ve carefully written goes unnoticed in the hustle of day-to-day work. Slava Shestopalov helps you figure out [why that happens]( and how you can prevent your documentation from turning into a cemetery of ideas. [Why do they ignore my awesome design documentation?]( According to Slava, there are three main things to consider to make documentation more effective and valuable. First, you need to involve the people you are writing the documentation for right from the beginning. Second, measure the success of your documentation on how often it helps the team to communicate and collaborate instead of how well it’s composed. And last but not least, the best tool for documentation is the one that your team is already used to. Precious tips to keep your design documentation alive. (cm) --------------------------------------------------------------- From our sponsor The World Of Composable Web Architecture Comes Together At Netlify Compose 2023 [Netlify ComposeConf]( Developers at businesses of all sizes are turning to composable web architecture for unmatched agility, speed, and efficiency. Compose 2023 gathers a diverse ecosystem of technology decision-makers, developers, engineers and more, to shape the path towards a modern, composable future of the web. [Join in person or virtually]( --------------------------------------------------------------- 6. Introducing New Components To Design System A design system is constantly evolving, and adding new components is a common task. If you don’t have a dedicated design system team but different people contributing to the system, you’ll need to ensure that quality stays consistent as new things are being added. Andrey Sundiev shares a robust [five-step process]( for doing just that. [5 steps to introduce a new component to the design system]( The process which Andrey describes is called “rationalisation” and follows the classic “double diamond” pattern. It covers everything from gathering context and figuring out how the new component can solve particular user goals to outlining the scope of the solution, exploring design options, and documenting everything users need to know to use the component effectively. A handy set of guidelines that can be adapted to your team’s needs. (cm) --------------------------------------------------------------- 7. Measuring Design Adoption Code adoption metrics often don’t tell the whole story about how well a design system is adopted, as adoption starts earlier in the process: in the design phase. To gain deeper insights into design adoption, the team at Pinterest built [FigStats]( a tool to measure how their design system is used across the board in Figma. It runs every night to check all Figma files and calculates an adoption percentage across the organization. [How Pinterest’s design systems team measures adoption]( The metrics gathered by FigStats help the design system team see trends about where the system is easy or difficult to use and which teams struggle with incorporating the system. FigStats also runs a cloud linting process to ensure file hygiene standards and it identifies customized local file components that are distributed across the team and that might be worth adding to the larger design library. (cm) --------------------------------------------------------------- From our sponsor Create Outstanding Websites Without Coding [Readymag]( Design pixel-perfect landing pages, presentations, editorials, e-shops or portfolios, collaborate to make decisions together and publish immediately with [Readymag]( — the design tool for outstanding websites. --------------------------------------------------------------- 8. Smashing 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? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Jump to all books →]( [Success At Scale]( … and we’re currently working on a new book: [Success At Scale]( shipping in fall. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 9. Recent Smashing Articles - [Gatsby Headaches: Working With Media (Part 2)]( - [Gatsby Headaches: Working With Media (Part 1)]( - [Everything I Know About UX Research I First Learned From Lt. Columbo]( - [How To Choose Typefaces For Fintech Products: Our Best Practices Guide (Part 1)]( - [A High-Level Overview Of Large Language Model Concepts, Use Cases, And Tools]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- 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](