Boost Your Design System With These Features

Nobody is surprised by design systems these days. A novelty just half a decade ago, they have become an established part of the design process. To me personally, their main benefit isn't necessarily in having a set of reliable UI components, but in establishing a very strong alignment between teams, and removing work that is usually redundant or unnecessary.

Not every design system is the same though, and some can be more helpful than others. In this newsletter, I'd love to share some of the useful features and examples of design systems that I keep referring to often in my work — and hopefully they can boost your design system, too.

Just a quick note: this overview is also an upcoming part of the Smart Interface Design Patterns, a live UX training and video library with me, Vitaly Friedman, featuring 100s of real-life examples and design patterns that you can apply to your work right away.

1. Decision Trees and Flow Charts

Workday Design System seems like a regular design system with content guidelines, UI components, patterns and accessibility guidelines. However, what really stands out to me are decision trees and flow charts that are used to help designers and developers make a decision around a particular component or how it could be used.

And if you need 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. 

2. Comprehensive, Live Examples

Workbench Design System is a wonderful design system by Gusto, with usage guidelines, do's and don'ts, visual explanations and implementation details. What really stands out to me are very, very comprehensive live examples that explain how exactly components should be used in different contexts.

The developers have also built a Gusto Workbench VS Code Extension with common snippets for their UI components.

3. Accessibility Guidelines and Naming Conventions

Nordhealth is created for healthcare applications for clinics and practices, and as such, it’s heavily focused on accessibility. There are also dedicated guides to naming conventions and localization guidelines. Plus, there is a plenty of customization options, themes and a fully-fledged CSS framework. Unfortunately, the Figma toolkit isn’t open-sourced yet.

4. Branding and Multi-Lingual Design

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.

5. Content Guidelines and UX Writing (currently offline)

For a short period of time, Deutsche Bahn Design System (case study) gave a glimpse into a lovely design system with content guidelines, accessibility considerations, components and contextual examples of components in use. It also provided a number of guidelines around UX writing (in German) and international writing and helpful visual guides to accessibility and logo.

6. Visual Examples of Do’s and Don’ts

Audi Design System has been around for a while. Along with brand appearance guidelines and UI components, one useful feature it provides is a comprehensive set of visual examples of how a component should and shouldn’t be used in Audi’s interfaces. There is also a freely available Audi UI Kit for Figma and Sketch UI library.

7. Bonus: 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!

8. Free Design Systems Figma Kits

Design Systems Figma Kits is a growing repository of freely available Figma kits of design systems — grouped, organized and searchable. Additionally, I can only recommend Gov.uk design system Figma kit, focused specifically on complex user journeys and web forms.

And That’s A Wrap!

Obviously there is no reason to copy-paste an existing design system, but we can get inspired for features and the ways to present do’s and don’ts, for various contexts. I hope that some of these examples will be helpful for your work. Thanks for reading, everyone!

Just updated: Smart Interface Design Patterns

We’ve just released 3 shiny new segments for the 9h-video library on design patterns — on everything from enterprise-grade data tables to design KPIs and pricing plans. You can also join the upcoming live UX training, with yours truly in March 2023. Also available for small and large teams. Thank you for your kind support, everyone! 🎉 🥳