Smashing Magazine - #432: Design Systems

How do you organize a design system with 900 components and 25 designers? How do you design a UI component from scratch? How do you choose the right parts, products and people for your design system?Issue #432 Nov 21, 2023 View in the browser

Smashing Newsletter

Wan shang hao Smashing Friends,

How do you organize a design system with 900 components and 25 designers? How do you design a UI component from scratch? How do you choose the right parts, products and people for your design system?

In this newsletter, we look at design systems, how to build them up, how to maintain them and how to make sure that design guidelines are followed by teams.

If you’d like to dive deeper, we also cover plenty of design patterns in Smart Interface Design Patterns by yours truly, with friendly early-birds now available as well.

Smashing Meets Go Green
Smashing Meets Go Green, an upcoming free community event for the Smashing friends. Register for free.

We also have a few community events coming up soon:

We’d be absolutely delighted to meet you online and in-person this and next year. And we sincerely wish you a lot of hope, optimism, positive energy and love these days.


1. Organizing Design System Libraries

Looking for a few tips to manage your Figma libraries without any friction? Jérôme Benoit has your back: In “How To Organize Your Design System At Scale”, he explains how you can set up a design system with 900 shared components and 25 designers — with product-specific domain components and shared ownership between the design system guild and product designers.

How To Organize Design System At Scale

In many products, different feature teams often have very different needs, and that’s why secondary design systems emerge. With this setup, all teams are still working within one single design system, pulling and pushing components between levels and having search across all design work in all domains at once — without an organizational overhead! (vf)

2. Why Design Systems Fail

When building design systems, we need to keep in mind that they need to meet the needs of our organization, its culture, and its internal as well as external users. It’s quite critical to consider early where and when the design system work will happen. Often it’s an isolated effort of a single team in a small department, and as such, it often has a very hard time getting critical adoption or achieving alignment across the entire organization.

Why Design Systems Fail

Karen VanHouten has put together a very honest overview of common issues with design system projects and how to resolve them. Ideally, the design system effort shouldn’t live on the fringes of the business but within business-critical teams — by finding allies for your design system early in the process and bringing them on board to contribute. (vf)

3. Designing A Design System Component From Scratch

It’s tempting to jump straight to Figma to explore a new design and see how the UI will change with it. It’s fine to experiment and try things out, but make sure to constrain the time and level of detail, otherwise you’ll end up designing a solution to a problem that doesn’t exist.

Rama Krushna Behera has written a comprehensive guide on how to add a new component to a design system — from auditing and proof of concept to reviews, variants, organization, accessibility and release. Important note: bring engineers and QA early on board to avoid big surprises down the line. (vf)

From our sponsor

Seamlessly Integrate Video Meetings Into Your Platform With Whereby

Elevate your platform’s communication capabilities with Whereby. You can choose between using Whereby’s pre-built UI, or creating a completely custom experience using React hooks—no WebRTC skills needed. Ready to transform your platform’s communication experience? Get started now!

4. Design System Checklist (PDF)

The point of a design system is not to be fully comprehensive and cover every possible component you might ever need. It’s all about being useful enough to help designers produce quality work faster, and be flexible enough to help designers make decisions, rather than make decisions for them.

Design System Checklist PDF

In that regard, you may want to check out the Design System Checklist (available in PDF format) by Nathan Curtis. It’s a practical 2-page-worksheet for a 60-mins team activity that is designed to choose the right parts, products and people for your design system. A neat little helper to get your system off the ground! (vf)

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

6. Design Guidelines For Teams

I see many teams trying to mandate design guidelines by blocking launch unless the design meets every single criterion on a 4-pages-long checklist. While this might work to ensure consistency, often, it breaks the team’s spirit as guidelines feel heavily and rigorously enforced — often without exceptions.

Making Sure Teams Follow Design Guidelines

Designers should really have a strong sense of ownership over the guidelines that they personally shape and develop. An interesting case study by Linzi Berry on how the Lyft team enforces design quality by clearing time for designers, distributing ownership and pushing design QA early in the process. Ultimately, make time and space for the designers in your team to set and follow the guidelines. They might not need stricter rules or mandates; they need time, trust, and autonomy to make good decisions on their own. (vf)

From our sponsor

Get Security, Speed And AI Tools With Hostinger’s Managed WordPress Hosting

Secure your site with a malware scanner, web application firewall, automatic updates, and backups. Reach top speed with LiteSpeed and in-house CDN. Create content easily with AI. Everything is available on Hostinger’s Managed WordPress Hosting — get an extra 10% off now for yearly plans with the special Smashing Magazine code!

7. Design System In 90 Days Canvas

A canvas often acts as a great conversation starter. It’s rarely complete, but it brings up topics and problems that one wouldn’t have discovered on the spot. We won’t have answers to all questions right away, but we can start moving in the right direction to turn a design system effort into a success.

Design System In 90 Days Canvas

Dan Mall kindly shares a canvas he has used with many enterprise clients to help them get a design system product up and running (and adopted!) in 90 days or less (FigJam template available). The canvas includes useful prompts to create a design system for small and large organizations that are building a design system or plan to set up one. Saved! (vf)

8. How To Name Design Tokens

Naming is hard! How do we name and organize design tokens in our design systems? Let’s take a look at some do’s, don’ts, guides, and examples to get started. Design tokens represent small, repeatable design decisions. Instead of using exact HEX or px-values, we refer to a token whose name describes how and where they are used. It makes it much easier to update the design by changing one value in one place and not breaking anything else in between.

How To Name Design Tokens

We break apart every single UI component into standalone tokens. The more specific these tokens are, the more confidence we have in using and changing them across the product. But the more generic the tokens, the more flexibility we have in using them. In fact, component tokens are where most design system teams struggle.

Naming patterns are exhibited via naming levels; common levels are category, concept, property, variant/scale, and state. Regular design systems typically use a few levels, but large multi-platform systems might have as many as 5–6 naming levels. (vf)

From our sponsor

Like a website builder, but better

Is it possible to create websites that you’re proud of, but without code? Absolutely, with Readymag — the design tool made by and for designers. Enjoy free composition, no layout limitations, text presets crafted with love for typography, and limitless interaction scenarios set up in just a couple of clicks.

For first-time customers, promo code SMART gives a 20% discount off any plan. Offer valid until November 30, 2023 and cannot be combined with other discounts. Use the discount or try Readymag for free.

9. 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
… and we’re currently working on a new book: Success At Scale, shipping in fall. Pre-order your copy or browse the complete library.

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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#431: Lovely Little Websites

Tuesday, November 14, 2023

Helpful and inspiring websites, UX guides, vintage posters and a smart recipe website. Issue #431 • Nov 14, 2023 • View in the browser Smashing Newsletter Boa noite Smashing Friends, The web is a

#430: UX Guides, Templates and Career Ladders

Tuesday, November 7, 2023

30-60-90 day plan for designers, UX guidelines, user journey templates and UX research glossary. Issue #430 • November 7, 2023 • View in the browser Smashing Newsletter Bonne soirée Smashing Friends,

#429: Front-End Accessibility

Tuesday, October 31, 2023

With WCAG 2.2 explainers, how to make a strong case for accessibility, accessibility testing and accessible data visualizations. Issue #429 • October 31, 2023 • View in the browser Smashing Newsletter

#428: Useful Front-End Tools

Tuesday, October 24, 2023

With online workshops, modern CSS, calculators, useful front-end tools and resources. Issue #428 • October 24, 2023 • View in the browser Smashing Newsletter Hello Smashing Friends, What are some of

#427: Design Systems

Thursday, October 19, 2023

SmashingConfs 2024, design systems, how to organize design tokens, best practices, design documentation and how to decide on new design system components. Issue #427 • October 17, 2023 • View in the

For the Teen in Their Analog Era

Thursday, November 30, 2023

A bluetooth printer that makes phone photos physical. The Strategist Every product is independently selected by editors. If you buy something through our links, New York may earn an affiliate

The Best Online Learning Platforms to Gift Your Team This Year

Wednesday, November 29, 2023

Plus, sign up for AD PRO's How to Design for the Modern Workplace workshop View in your browser | Update your preferences Architectural Digest AD PRO Logo RESERVE YOUR SPOT: HOW TO DESIGN FOR A

Brand Identity, Cookie Permissions, hanging-punctuation, Brickception, Designer Layoffs

Wednesday, November 29, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar November 29 2023 Crafting A Killer Brand Identity For A Digital

For the Traveler Who Never Checks a Bag

Wednesday, November 29, 2023

A versatile, well-organized duffel. The Strategist Every product is independently selected by editors. If you buy something through our links, New York may earn an affiliate commission. Lo & Sons

Karl Lagerfeld Loved to Buy Homes—Here’s a Look at His Extravagant Portfolio

Tuesday, November 28, 2023

Plus, Louis Vuitton launches tableware and more news View in your browser | Update your preferences Architectural Digest AD PRO Logo Artemest Galleria LOUIS VUITTON LAUNCHES TABLEWARE, DIPTYQUE UNVEILS

How TM Davy’s Loft Was Saved for the Satyrs and Fairies

Tuesday, November 28, 2023

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman An East Williamsburg Loft Full of Satyrs

#433: Dashboards, Maps & UX

Tuesday, November 28, 2023

Designing better dashboards, AR, in-car voice assistant, maps UX and natural language input — along with SmashingConfs 2024 and community events. Issue #433 • Nov 28, 2023 • View in the browser

Prompt Structure, Stochastic Parrot, DALL·E Party, CSS Ribbons, Inter 4.0

Tuesday, November 28, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar November 28 2023 Prompt Structure in Conversations with

What Comes After Our ’70s Design Obsession?

Monday, November 27, 2023

Plus, 25 new design books to add to your holiday wishlist View in your browser | Update your preferences Architectural Digest AD PRO Logo 25 NEW DESIGN BOOKS YOU'LL WANT TO ADD TO YOUR HOLIDAY

💰 Resourceful Fintech Mobile UI Designs + 🏆 Challenge Updates

Monday, November 27, 2023

Enrich Your Design Expertise with UpLabs' Weekly Creativity Capsule! 📰 First of all, let's congratulate Sharmin Akter Diti, the winner of our latest 🛵 DoorDash Redesign Challenge!