Smashing Magazine - #486: Advanced Design Systems

Complex design systems, Figma organization, multi-brand systems, governance. Issue #486 Dec 10, 2024 View in the browser

Smashing Newsletter

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.

Smashing Online Workshops 2025
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 Design System Isn’t Working For Me!

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.

A practical guide to Design System components

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
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.

How we built our multi-platform design system at Booking.com

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.

Smashing Online Events
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.

How we organise our Design System libraries

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

BrowserStack
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.

eBay Playbook

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.

Making of true multi-brand design system

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
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?

Success At Scale
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

unsubscribe update preferences view in your browser

Older messages

#485: UX Research

Tuesday, December 3, 2024

How to measure UX impact, research templates, UX research field guide and research methods. Issue #485 • Dec 3, 2024 • View in the browser Smashing Newsletter Jó estét Smashing Friends, In many

#484: Web Forms

Tuesday, November 26, 2024

Live validation UX, form design layout and interaction, placeholders, segmented controls, names, required and optional fields, measuring forms UX. Issue #484 • Nov 26, 2024 • View in the browser

#483: UX Writing

Tuesday, November 19, 2024

With writing guides, content testing and practical guides for better content design. Issue #483 • Nov 19, 2024 • View in the browser Smashing Newsletter Hej Smashing Friends, Every digital product

#482: New Front-End Techniques

Tuesday, November 12, 2024

With high-definition colors, virtual keyboard on mobile, CSS and reliable dialog in HTML. Issue #482 • Nov 12, 2024 • View in the browser Smashing Newsletter Hej Smashing Friends, I remember the good

#481: Front-End Techniques

Tuesday, November 5, 2024

With text balancing, exclusive accordions, CSS-only validation, responsive video and audio. Issue #481 • Nov 5, 2024 • View in the browser Smashing Newsletter Hej Smashing Friends, As we keep searching

You Might Also Like

Hannah Martin's Notes From Design Miami: A Frenzy-Free Field Trip

Tuesday, December 10, 2024

View in your browser | Update your preferences ADPro This year in Miami I made a rule for myself: no “dinatoires.” You know what I'm talking about: The invitation says dinner, but it isn't

New Email Signatures Templates are Here!

Tuesday, December 10, 2024

Explore these new email signature templates in Postcards today and take your email communication to the next level.͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌

How can we help you get more press??

Tuesday, December 10, 2024

Help us help you in 2025! Helping creative businesses—like yours—get press and grow is why we founded Wolf Craft. We recently sent out a quick survey to better understand how we can be most helpful as

Celebrate the Season with New Christmas Email Templates and Exciting Postcards Updates

Tuesday, December 10, 2024

This week, we've released a selection of new Christmas email templates, ready for you to use directly from your Designmodo account.͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌

Inside the AD100

Tuesday, December 10, 2024

View in your browser | Update your preferences ADPro The Path to the Peak It's that time again: Yesterday, we revealed our 2025 edition of the AD100, AD's list of the year's definitive

Agile is not the enemy

Tuesday, December 10, 2024

Issue 223: Misconceptions designers have about the methodology ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Accessibility Weekly #426: Don’t Use aria-label on Static Text Elements

Tuesday, December 10, 2024

December 9, 2024 • Issue #426 View this issue online or browse the full issue archive. Featured: Don't use aria-label on static text elements "Don't use the aria-label or aria-labelledby

The One Bank Account Every Designer Should Have

Tuesday, December 3, 2024

View in your browser | Update your preferences ADPro Designers are highly attentive to details—from finishes and trims to the just-right proportions. But what about those tedious ones tied to billing,

#485: UX Research

Tuesday, December 3, 2024

How to measure UX impact, research templates, UX research field guide and research methods. Issue #485 • Dec 3, 2024 • View in the browser Smashing Newsletter Jó estét Smashing Friends, In many