Smashing Magazine - #387: Design Systems

Design tokens, multi-lingual design system, deciding on new components and design system canvas. Issue #387 Jan 10, 2023 View in the browser 💨

Smashing Newsletter

Boa noite Smashing Friends,

Getting a design system right is hard. There are so many different types of design systems and so many ways of setting up one and maintaining it over time. Fortunately, there is plenty of incredible resources all around design systems. And this newsletter issue is dedicated to just that.

From a comprehensive design system guide and design tokens to deciding on new components and design system canvas: hopefully, you’ll find a few design system gems here.

Coming up next, we have (incredible!) online workshop with Brad Frost on successful design systems, and a few other friendly workshops all around front-end, UX & design, too.

SmashingConf SF 2023 Speakers

Also, just in case you missed it: the first speakers for SmashingConf Front-End @ SF 2023 have been announced — with Josh W. Comeau, Una Kravets, Shaundai Person, and Jake Archibald will be joining in. Hurry up: there are only a few last-minute early birds left — we’d love to see you there!

Vitaly (@vitalyf)

1. Design System Questions To Ask

Starting into a meeting or call well-prepared is worth gold to ensure you maximize the time spent talking about the things that really matter. But how to prepare for a call where the subject is as complex as a design system? Whenever Kaelig Deloumeau-Prigent meets up with a new design system team for the first time, he asks them to fill out a short survey a few days before the actual call. This allows him and his clients to make the most of the time they have together on the call.

Questions I Ask Design System Teams Before Our First Meeting

Kaelig shared his design system template, so you can use and remix it to gather context about a design system. There are no fancy tools involved, just a good ol’ Google Doc that won’t take more than 30 to 60 minutes to fill it in. The answers will help you come up with challenging questions, tailor your advice to the team’s capacity and priorities, and flag topics you might want to research in advance. (cm)

2. Multi-Lingual Branding Design System

Every design system is different. Sometimes it’s about speeding up technical implementations, and sometimes about creating a versatile visual identity for various media. For 125 years, the Olympic Games have conveyed a message of inclusivity, universality and hope. And for their recent undertaking, they decided to reflect these attributes in their new design system.

Branding And Multi-Lingual Design System

The result? Unlike many other design systems, Olympics Design System is focused on branding and identity design but also provides examples of illustrations and graphic elements. It shows how to manage multi-lingual challenges and how to use typography, with plenty of good and not-so-good examples and many guidance notes along the way. And it looks fabulous! (vf)

3. A Spreadsheet Approach To Naming

How do you name your design tokens and components? With all the different conventions available, it can be difficult to choose a strategy for your design system — and to stick to it. Valentino Baptista shares an interesting approach that has worked for him in the last couple of years and that shows how having a rationale behind names simplifies not only the naming process but also maintaining a consistent interface.

Naming Design Tokens And Components

For components, Valentino relies on BEM to make the names easy to memorize, flexible, and scalable. For design tokens, he likes to create three levels — references, systems, and components — and keep them as agnostic as possible. At the heart of his approach is a spreadsheet with a column for every layer helps him select, from left to right, all required values for a token. Clever! (cm)

From our sponsor

Save The Date For axe-con 2023: The World’s Largest Accessibility Conference

axe-con 2023
Axe-con is back virtually on March 15–16 and welcomes developers and designers of all experience levels to an accessibility conference focused on building accessible digital experiences. Attendees will hear from experts at Google, Microsoft, GitHub, Adobe, and more in 40+ sessions. Register now for free.

4. Decision-Making Flow Chart

How to figure out if you should add a new pattern to your design system? Jan Klever and his team at Quero Educação developed a flowchart to help them align their decision-making.

Vanilla Pattern Flow Chart

The flowchart was inspired by Vanilla Pattern and helps the team identify if a change converges into the creation of a new component, the edition of a component that already exists, or the development of something locally. Both engineers and designers need to validate the solution inside the flow and approve it. By doing this, the team avoids loose ends and ensures that the design system can be considered global. (cm)

5. Upcoming SmashingConfs and Workshops

Every year we bring bright and kind people who care about the web to share what they’ve learned. For 2023, we can’t wait to welcome you to SmashingConf Freiburg 2023 (Sep 4–6, 2023) with adventures into design systems, accessibility, CSS/JS and interface design patterns. Get your early-bird ticket!

Smashing Online Events
SmashingConf Freiburg 2023: a friendly, practical conference for designers and front-end engineers.

We’re also very excited about our very first SmashingConf Front-End @ SF 2023 (May 23–26, 2023), entirely focused on cutting-edge front-end. From accessibility and advanced CSS to JavaScript gems and web performance. With a dash of Tailwind, Next.js and TypeScript. Get your early-bird ticket!

Smashing Online Events
SmashingConf Front-End @ SF 2023: a friendly, practical conference for designers and front-end engineers.

As always, here’s an overview of our upcoming workshops:

6. The Design System Guide

So you want to create a design system in your organization. Where do you even start? What would be a good process to use to make sure that your efforts don’t hit the wall of tough deadlines and final tweaks? The Design System Guide, kindly released by Romina Kavcic, has got your back.

The Design System Guide

The guide is a very comprehensive interactive book on the foundations of design systems, design metrics, design tokens, checklists, and handy resources for managing design systems. And if this isn’t enough, you can also explore The Ultimate Design Systems Resources List. This will keep you busy for a while! (vf)

7. Design System Canvas

Once we want to establish a design system in your company, you need a proper plan in place. We need to gather information about the people involved, the process, the assets, affected products, and so many other things. Wouldn’t it be wonderful to have all of these things together in one place?

Design System Canvas

Fortunately, Paavan Buddhdev has released Design Systems Canvas, a handy little PDF/FigJam checklist that helps you establish an overview of the design system, its process, maintenance, people involved, and everything in-between. A great little one-page plan that might be a perfect starting point for the entire design system journey! (vf)

8. Data Visualization In Design Systems

Not every project will need a sophisticated set of design patterns and guides around data visualization. But what if you actually need one? Fortunately, there are a few wonderful design systems that provide very detailed documentation on just that.

Data Visualization In Design Systems

If… design system provides a comprehensive data visualization documentation, with do's, don’ts, and plenty of examples. Kaizen and Carbon Design System also include very thorough documentation with dozens of external resources that you might find quite helpful. (vf)

9. New On Smashing Job Board

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

Key phrases

Older messages

#386: CSS

Tuesday, January 3, 2023

With CSS skewed highlights, CSS trees, CSS overlaps and shiny new CSS techniques. Issue #386 • Jan 23, 2023 • View in the browser 💨 Smashing Newsletter Namaste Smashing Friends, 2023 is here, a new

#385: Getting Ready For 2023!

Tuesday, December 27, 2022

Keyboard shortcuts, tech teams app stacks, AI tooling for designers, terms of services and licenses explained. Issue #385 • December 27, 2022 • View in the browser 💨 Smashing Newsletter Dobroho vechora

#384: Color and Data Visualization

Tuesday, December 20, 2022

Color management, data visualization guidelines, typography for data charts, color contrast and accessible data visualizations. Issue #384 • December 20, 2022 • View in the browser 💨 Smashing

#383: Psychology and UX

Tuesday, December 13, 2022

Behavioral science, user interviews, product design methods, UX research and design system ROI calculator. Issue #383 • December 13, 2022 • View in the browser 💨 Smashing Newsletter Goeije 'n avend

#382: Front-End & UX Advent Calendars

Tuesday, December 6, 2022

With advent calendars on accessibility, CSS/JS, UX and Web Performance. Issue #382 • December 6, 2022 • View in the browser 💨 Smashing Newsletter Gamarjoba Smashing Friends, It's December! So

One West Village Studio Suitable For Two

Tuesday, February 7, 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 Photo: William Jess Laird When

Latest stories

Tuesday, February 7, 2023

Submit Story How Optimized Videos Create a Better User Experience When videos move at a snail's pace, take an age to load, or stall throughout playback, they bore and frustrate your users—who don

AI and Design, Grid Areas, FigStats, ChatGPT, Payments UX

Tuesday, February 7, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar February 7 2023 Combining AI and Design: A Step-by-Step Guide

Game On! 23 Glorious Game Rooms From the AD Archive

Monday, February 6, 2023

Plus, The Future Perfect spotlights contemporary Korean design & more news View in your browser | Update your preferences Architectural Digest AD PRO Logo moon jars on a shelf THE FUTURE PERFECT

🏡 Flawless Smart Home Mobile Apps + 🏆 Challenge Updates

Monday, February 6, 2023

Your UpLabs Design Fix Is Here 🙌 First and foremost, we want to congratulate RH Agency, the winner of our latest 📑 Asana Redesign Challenge! Congrats! Secondly, the end of January has brought us an

Accessibility Weekly #330: Modern Health, Frameworks, Performance, and Harm

Monday, February 6, 2023

Sponsored by Automattic. They're hiring. February 6, 2023 • Issue #330 View this issue online or browse the full issue archive. Featured: Modern Health, frameworks, performance, and harm “A person

Latest stories

Monday, February 6, 2023

Submit Story Techcopes – The best free online SEO tools you will ever need Unlock the Full Potential of Your Youtube Channel with These Must-Have Free Online SEO Tools and more Find used fonts on any

Netflix Users, color-mix(), Poline, WhatsApp, TresJS

Monday, February 6, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar February 6 2023 The users Netflix forgot about

Pondering the future of web interactions

Sunday, February 5, 2023

Issue 129: If the internet was designed today, what would it feel like? ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Latest stories

Sunday, February 5, 2023

Submit Story ColorMagic – Generate ideal color palettes with the power of AI ColorMagic is a color palette generator with GPT-3 AI. Just enter a color mood or image in text to generate a ready-to-use