#453: Design Systems

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 systems! We’ve been designing and building them for quite some time now. They went broad and large, often including [voice and tone guidelines]( [naming conventions]( and even [ways of working](. Yet many challenges around design systems are still unresolved: how to make them work over long time, how to bridge the gap between design and code, and how to merge design systems once you have a few. In this newsletter, we look at just that: tools to build design systems faster, what types of design systems are out there, how to establish a component sprint for a design system, and how to consolidate multiple systems into one — along with useful tools and references to keep nearby. [Smashing Meets Performance on Tuesday, May 7, 2024]( Smashing Meets Web Performance, our friendly online community event for people who care about speed. [Get a free ticket](. On our end, we are happy to invite you to [Smashing Meets Performance]( (Tue, May 7), our community event on web performance, with 3 wonderful speakers — free for everyone, so bring your friends and colleagues! And, of course, if you’d like to dive deeper into design systems, we have a few wonderful lil’ conferences coming up this year — with friendly team pricing for… friendly teams: - [SmashingConf Freiburg 2024]( 🇩🇪 – The Web, Sep 9–11 - [SmashingConf NY 2024]( 🇺🇸 – Front-End & UX, Oct 7–10 - [SmashingConf Antwerp 2024]( 🇧🇪 – Design & UX, Oct 28–31 - [Online Workshops on Front-End & UX]( 🍰 – weekly! We hope to meet you this year — and in the meantime, let’s explore a few helpful goodies for better design systems! 🎉🥳 — [Vitaly]( --------------------------------------------------------------- 1. The Anatomy Of A Component Sprint If you’ve been following a design-led or a developer-led approach when shipping new components, it might be time to reconsider your process. To ensure meaningful collaboration and bring in diverse perspectives, the teams at The Washington Post developed a component sprint that acts as a bridge between design and development. Design System Lead Brian Alfaro and designer Victor Alejandro Aguilar share insights into the [anatomy of The Washington Post component sprint](. [The anatomy of a component sprint]( Refined over years, the teams evolved their component sprints from a closed, linear approach to a more open and inclusive one. Each sprint spans roughly ten days and is championed by a designer-developer pair to ensure the communication between different teams at every step of the process — from evaluating the candidate component and defining its scope to design, implementation, testing, refinement, and documentation. (cm) --------------------------------------------------------------- 2. Design Systems Generator (Figma) You want to quickly set up a design system in Figma to keep your designs unified and on-brand? Then [Figr Identity]( might be for you. The plugin helps you generate a scalable component library with a few clicks. No need to define Figma variables manually, the tool automates the repetitive tasks, so that you can focus completely on the creation process. [Figr Identity]( To make creating and managing a design system simple and intuitive, Figr Design handles all parts of your design system in one place — colors, text styles, shadows, spacing, grids, border radius, and UI components. You can update and customize your design system on the fly and load it up in multiple Figma files to keep your project current without any extra hassle. A great starter kit for beginners and pros alike. (cm) --------------------------------------------------------------- From our sponsor SVGator’s New Lottie Support Feature Is Out! [SVGator]( Now it takes only one tool to create or edit Lottie animations and export them instantly. SVGator, the web-based animation app has come up with [a new feature that lets you import and export Lottie files]( without the need of any third-party apps or libraries. --------------------------------------------------------------- 3. Types Of Design Systems What is a design system? Even if you’ve worked on one, it might still be hard to define the term, as there are a lot of different definitions out there. In his design systems work, Dan Mall noticed [six different kinds of things that can be described as design systems]( a brand identity, a UI kit, a product, a process, a service, and a practice. [What is a design system?]( One of the many, but a good one: [NordHealth]( a comprehensive design system for healthcare applications. Is it a problem that there is no standard definition of “design system”? Not at all, argues Dan. He rather sees the diversity of what falls under term as a benefit, as it allows us to be more inclusive of where any team is in their design system journey. However, when you’re working on a design system, it is important that you and your team align on one of the definitions (or a set or a combination) to make sure you are working toward a common goal. A great reminder. (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: - [Typography Masterclass]( design with Elliot Jay Stocks. May 1–15 - [Behavioral Design Workshop]( ux with Susan Weinschenk. May 6–20 - [Scalable CSS Masterclass]( dev with Andy Bell. May 9–23 - [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 - [Jump to all workshops →]( --------------------------------------------------------------- 5. Consolidating Multiple Design Systems It’s not uncommon that there are several design system efforts in a company, led by different teams, serving different projects with different business value, budgeting, resources, time allocation, and expertise. However, sooner or later, leadership might come up with the idea of consolidation. But what is the best way to consolidate multiple design systems? Evgeny Khoroshilov [explores several options of consolidation]( each highlighting pros, cons, risks, costs and quick wins that aim to improve the current situation tactically. [How to consolidate multiple design systems]( As Evgeny points out, consolidation is not a switch that can be flipped overnight; it requires patience, meticulous planning, and openness to gradual progress. It might take several years to consolidate multiple design systems, and, in some cases, it might turn out that complete consolidation is not the optimal solution after all. With his article, Evgeny offers a realistic look at consolidation, backed up by the experiences of companies who have navigated similar challenges. (cm) --------------------------------------------------------------- From our sponsor Learn The Story Structure That Made Toy Story A Success At Sanity Connect [Sanity]( Matthew Luhn, creative force behind Toy Story, Finding Nemo, and more, joins Sanity Connect. He’ll share tips on telling compelling stories in the AI age, so you can scale content while preserving your brand’s unique voice. [Join us and get a chance to win Matthew’s book "The Best Story Wins"](. --------------------------------------------------------------- 6. Design System Canvas If you’re at the beginning of your design system journey, the [LeanDS Framework canvas]( might be for you. Created by Marianne Ashton-Booth, it helps you plan and structure the focus of your design system to respond effectively to your business needs. [LeanDS Framework]( The LeanDS Framework is split into eleven sections over three key areas and helps paint a clear picture of all the aspects and considerations of your design system — from the organization’s environment and business goals to system problems, system users, benefits, outcomes, metrics, solutions, team model, scope, risks, and the plan. A great reminder of all the fine little details to keep in mind when starting a conversation. If you’re looking for similar canvases for your design systems work, Vitaly compiled some [more options you might want to explore](. (cm) --------------------------------------------------------------- 7. Design Systems For Car Interfaces Finding the right solutions to combine security and usability in one environment is one of the main challenges when designing car interfaces. And while it certainly isn’t an everyday challenge that many designers face, it still is interesting to see how big names in the automotive industry tackle the challenge. [Design Systems For Car Interfaces]( [Å koda Flow]( for example, is Å koda’s design system that pins down guidelines for components and applications of in-car interfaces — with do’s and don’ts, examples, mobile implementation, UX writing, and a showcase of templates and pages. An impressive (and inspiring!) design system. Looking for more? Vitaly collected more [resources all around in-car UX]( with design systems from renown brands, case studies, and actionable insights. Happy browsing! (cm) --------------------------------------------------------------- From our sponsor How Will Human And AI Developers Work Together? [Netlify]( What does the world look like when human developers can partner with fully realized AI software engineers? Join us on April 25 for our virtual event where we explore the future of human and AI partnership. [Reserve your seat for Compose: Web + AI]( today. --------------------------------------------------------------- 8. News From The Smashing Library 📚 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](. --------------------------------------------------------------- 9. Recent Smashing Articles - [Converting Plain Text To Encoded HTML With Vanilla JavaScript]( - [How To Monitor And Optimize Google Core Web Vitals]( - [Sliding 3D Image Frames In CSS]( - [Penpot’s CSS Grid Layout: Designing With Superpowers]( --------------------------------------------------------------- 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](