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.

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.

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.

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.

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

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!

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!

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:

• Successful Design Systems Workflow
  with Brad Frost. Jan 10 – 24
• Designing For Complex UI Masterclass UX
  with Vitaly Friedman. Jan 19 – Feb 2
• New Front-End Adventures, 2023 Edition DEV
  with Vitaly Friedman. Feb 8–22
• Universal Principles of Typography Masterclass UX
  with Elliot Jay Stocks. Mar 2–16
• Interface Design Patterns UX Training UX
  with Vitaly Friedman. Mar 10 – Apr 7
• Figma Auto Layout Masterclass 🇺🇦 UX
  with Christine Vallaure. Mar 27
• Smart Interface Design Patterns Video Course UX
  9h-video + UX training on interface design with Vitaly Friedman
• Jump to all 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 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?

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.

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

• Web & Mobile Application Designer / Digital Designer
  at Air Line Pilots Association (West Mclean, VA)
• Frontend Engineer
  at Alasco GmbH (Munich, Germany)
• Senior Designer
  at DUMBO (Cologne, Germany)

10. Recent Smashing Articles

• Making Your Collaboration Problems Go Away By Sharing Components
• Understanding Authentication In Websites: A Banking Analogy
• A Guide To Getting Data Visualization Right
• The State Of Usability In 2023
• Read more articles on Smashing Magazine →

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