December 10, 2024 Smashing Newsletter: Issue #486
This newsletter issue was sent out to 192,826 subscribers on Tuesday, December 10, 2024.
Editorial
The challenges we have about design systems today differ from those we had just a couple of years ago. We speak about layers of design tokens, governance, ownership, and scale.
We often design systems that support multi-themed, cross-product, and multi-brand experiences, with components designed for the web and native, with mobile components for iOS and Android. We venture into DesignOps, design system metrics, and migration strategies.
In other words, design systems have matured. And with it, the level of complexity increases. In this issue, we want to make sense of this space and shed a spotlight on some of these useful little helpers.
If you’d like to dive deeper into design systems, typography, and storytelling, we’ll keep running online workshops with folks from the industry in 2025 as well — you can already grab your early-bird ticket (while they last!).
P.S. Friendly reminder of our new video course on UX, all around How To Measure UX and Design Impact. Use the coupon code IMPACT to save 20% off.
For now, though, wishing you a calm and peaceful week ahead of the upcoming holidays. And hopefully, you’ll find time for yourself before the busyness begins!
— Vitaly
1. Strategies For Design System Governance
When design system users run into issues designing and developing your system, they often have a hard time distinguishing why it isn’t working for them. But not everything they describe as a “bug” is actually one. In his article “The Design System Isn’t Working For Me!”, Brad Frost dives deeper into the different types of issues people might encounter and how to handle them.
The article not only offers practical tips for handling different scenarios, it is also a great reminder of how important communication and collaboration are for a successful design system.
As Brad points out, people want to be heard, understood, and helped, so be proactive and super clear about how they can connect with you. When you don’t hear anything from consuming teams, you should be extremely skeptical. It typically isn’t a sign that everything is going great but that something is going very wrong. As Brad recommends, when in doubt, have a conversation. (cm)
2. A Practical Guide To Design System Components
If you’re looking for a strategic guide that makes learning about and evolving design systems fun, easy, and accessible Redesigning Design Systems is for you. Created by Ness Grixti, it provides practical tips, templates, and resources to level up your system in a structured way.
The heart of Redesigning Design Systems is a four-step guide that takes you through the complete process of creating a design system component — from the research phase to designing, building, and releasing it. Sticking to the process not only results in an accessible, well-thought-through component but also foolproof usage documentation, an aligned cross-platform build, and, most importantly, guaranteed adoption. (cm)
3. Building A Multi-Platform Design System
Building a design system can be a challenge at any scale. But how do you approach the task of creating a design system that works for 150+ product teams, 200+ designers, 800+ developers, and serves four platforms? That’s exactly the challenge that the design system team at Booking.com faced.
In her case study “How We Built Our Multi-Platform Design System”, Nicole Saidy shares insights into how the Booking.com team established a design language, used design tokens, and created a Design API to have one single source of truth for all themes, tokens, and modes. They also documented the entire development process in a Figma Kit, along with a checklist that guides you through every step. (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:
- Hybrid Apps with Web and Native Technologies dev
with Átila Fassina. Jan 9–17 - The Power of Storytelling ux
with Chiara Aliotta. Jan 20 – Feb 3 - Design Patterns for AI Interfaces ux
with Vitaly Friedman. Jan 22 – Feb 5 - New Front-End Adventures, 2025 Edition ux
with Vitaly Friedman. Jan 27 – Feb 10 - Accessible Typography for Web & UI Design Masterclass design
with Oliver Schöndorfer. Feb 10–18 - Building Modern HTML Emails dev
with Rémi Parmentier. Mar 3–11 - How To Measure UX and Design Impact UX
with Vitaly Friedman. Video course + UX training - Jump to all workshops →
5. Organizing A Design System Library
How can we manage our Figma libraries without any friction? How to keep them 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 900 shared components and more than 40 people involved.
Different feature teams having different needs often result in secondary design systems emerging. Not so at Doctolib where all teams work within one single design system. To accommodate their different needs, the Doctolib setup allows them to pull and push components between levels and search across all design work in all domains at once — without any organizational overhead. A great example of what a smart, scalable Figma library can look like. (cm)
6. eBay Playbook Design System
You’re looking for some design system inspiration? The eBay Playbook is an outstanding example of what a comprehensive design system can look like. It features plenty of in-context examples of how a particular component can be used on a page or within a particular template, and it goes well beyond the things you’ll usually find in a design system.
Data visualization, metrics, bulk editing, motion, photography, accessibility annotations, type testing and color pairing tools, and even Google Slides templates and email design considerations make the eBay Playbook useful and relevant for all stakeholders. And the design is not only visually impressive but also accessible, going way beyond mainstream WCAG guidelines with motion design and inclusive illustrations.
If you’re looking for more inspiration, Vitaly has some nice recommendations of useful design systems you might want to take a closer look at. They range from B2B to banking, in-car UI, healthcare, and insurance. (cm)
7. Multi-Brand Design System
What could a multi-brand, multi-theme design system look like? Pavel Kiselev has been tinkering with the idea of a design system for true white-label products for a few years and now shares a behind-the-scenes look at how he created such a system that can adapt to different brands.
Pavel’s approach works like a forking repository or CodePen project: to get started with a new project, designers can copy the single master Figma file that includes all the components, styles, and variables. To save them time and effort when they want to change colors, typography, spacing, radii, elevation, and component styles, he built automation that makes it possible to quickly adapt the source system for specific needs without a lot of manual work. Clever! (cm)
8. 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.