Ho, ho, ho Smashing Friends,
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.
Meet our friendly front-end & UX workshops. Boost your skills online and learn practical, actionable insights from experts — live.
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 with 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)
From our sponsor
Build A Penpot Plugin And Win Up To $1,000!
Penpot, the free open-source design tool for design and code collaboration, has just introduced its Plugin System! To celebrate, join the Penpot Plugins Contest by Dec. 15th. Create your plugins for a chance to win one of 20 cash prizes. Imagine, create, and win!
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.
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:
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)
From our sponsor
Ensure Pixel-Perfect Experiences With BrowserStack’s Visual Testing Suite
Struggling with visual bugs that slip past functional tests? BrowserStack’s Visual Testing Suite—featuring Percy, App Percy, and Visual Scanner—helps you catch inconsistencies early and deliver
flawless UIs across 20,000+ devices. With seamless CI/CD integration and intelligent AI-powered visual testing, your team can ship faster with confidence. Get started for free!
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 in automation that makes it possible to quickly adapt the source system for specific needs without a lot of manual work. Clever! (cm)
From our friends
Open Web Docs is a community of web developers, standards makers, and technology companies that considers web platform documentation to be critical digital infrastructure. To ensure its long-term health, we work together on creating and maintaining documentation and compatibility data on MDN Web Docs, caniuse.com, Baseline, and other projects. Sponsor OWD on GitHub to support our work!
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?
Meet our newest book: Success At Scale by Addy Osmani. Get the book or browse the complete library.
9. Recent Smashing Articles
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