April 23, 2024 Smashing Newsletter: Issue #453
This newsletter issue was sent out to 205,285 subscribers on Tuesday, April 23, 2024.
Editorial
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 a 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.
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.
Refined over the 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.
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)
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.
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.
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.
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)
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.
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.
Š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)
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 →
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.