#376: Design Systems

With accessible design systems, Figma kits and real-life examples. Issue #376 • October 25, 2022 • [View in the browser]( 💨 [Smashing Newsletter]( Dobryi vechir Smashing Friends, There is a moment in time for every complex project when design teams start thinking about setting up a design system. The reasons are often the same — alignment, reusability, consistency; and so are problems that start creeping out eventually. Usually, design systems decay; they are used sporadically, and often they aren’t as helpful and practical as they could be. In this newsletter, we explore useful resources and examples for people who work with a design system. We’ll explore features, components, and things to keep in mind when building accessible design systems. Hopefully, some of these pointers will help you create a more successful design system. [Smashing Hour with Sara Soueidan]( We also have a couple of events lined-up, all around design systems: - [Smashing Hour with Sara Soueidan]( a free 1h-session from design systems and SVG to accessibility and pizza toppings. - [Online Meet-up on Design Systems]( on theming and best practices around design systems. - [Creating and Maintaining Successful Design Systems]( a 5×2h online workshop on design systems with Brad Frost. Let’s get to the bottom of design systems — we’d love to see you there! — Vitaly ([@vitalyf]( --------------------------------------------------------------- 1. Components Encyclopedias Wouldn’t it be fantastic to be able to search for a particular component — let’s say an accordion — and check how it’s designed and implemented across design systems out there? [Components Encyclopedias]( [The Component Gallery]( allows you to do just that. It’s an up-to-date repository of interface components based on real-life examples, with search, a list of features for each component and its name all gathered in one place. [Storybook Component Encyclopedia]( serves the same purpose, and references thousands of components from UI engineering teams around the world, along with links to Storybook repositories, all grouped, sorted and searchable. A goldmine! (vf) --------------------------------------------------------------- 2. Accessibility And Naming Conventions Bringing together everything that’s required to manage a healthcare business digitally, Nordhealth creates software that aims to redefine healthcare. As such, their design system [Nord]( is heavily focused on accessibility. [Nord]( Nord offers plenty of customization options, themes, and a fully-fledged CSS framework, plus dedicated guides to [naming conventions]( and [localization]( for example. Unfortunately, the [Nord Figma Toolkit]( isn’t open-sourced yet. (cm) --------------------------------------------------------------- From our sponsor Write It. Show It. Rock It. [iA Presenter]( [iA Presenter]( text-based interface cuts creation time to a minimum. The design engine automatically adjusts the layout of your slides to your phone, PC or projector aspect ratios. Presenting feels like karaoke. A fresh, fast and fun way to create and hold presentations. The first 1,000 SmashingMag subscribers get [direct access]( to the beta. --------------------------------------------------------------- 3. Comprehensive Live Examples Gusto serves more than 200,000 businesses worldwide, automating payroll, employee benefits, and HR. To enable their team to develop cohesive and accessible experiences for Gusto’s platform, the [Workbench]( design system encompasses Gusto’s design philosophy, design tokens, creative assets, React components, and utilities — and documentation to tie it all together. [Workbench]( What really stands out in the Workbench system are the comprehensive live examples that explain exactly how components should be used in different contexts. Do’s and don’ts, visual explanations, and implementation details ensure that both designers and developers working with Workbench can use the design system effectively. For even more convenience, there’s also a [Gusto Workbench VS Code Extension]( with common snippets for UI components. (cm) --------------------------------------------------------------- 4. Branding And Multi-Lingual Design The Olympic Games are probably one of the most widely recognized brands in the world. Since the birth of the modern Games more than 125 years ago, hundreds of people have grown and enhanced the Olympic brand. To increase consistency, efficiency, and impact across all that they do, the IOC hired a Canadian agency to create a comprehensive branding-focused design system that conveys the timeless values of the Olympic Games and propels the brand into the future. [Evolving The Olympic Brand]( The [Olympic design system]( is focused on 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 guidance notes along the way. (cm) --------------------------------------------------------------- 5. Frontend & UX Online Workshops As you probably know, we run [online workshops on frontend and design]( be it accessibility, performance, navigation, or design systems. In fact, we have a couple of new workshops coming up soon, and we thought that, you know, you might want to join in as well. [Smashing Online Workshops]( 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 an overview of our [upcoming workshops]( - [Pushing CSS to The Limit]( CSS with Amit Sheen. Nov 2–10 - [Deep Dive On Accessibility Testing]( Dev with Manuel Matuzović. Nov 14–28 - [Mastering the Design Process]( Workflow with Paul Boag. Nov 15–23 - [Designing The Perfect Web Forms]( UX with Vitaly Friedman. Nov 17–18 - [Figma Workflow Masterclass]( UX with Christine Vallaure. Nov 17 – Dec 1 - [Successful Design Systems]( Workflow with Brad Frost. Jan 10 – 24, 2023. Also, we’ve just updated [Smart Interface Design Patterns Video Library]( an 8h-video course on interface design with 100s of real-life examples. With [live UX training]( and 5 new videos added every year. --------------------------------------------------------------- 6. Accessible Design Systems A good design system includes documentation, guidelines, and implementation notes for accessibility. But what do you need to consider when embedding accessibility throughout a design system? Henny Swan [dives deeper into accessible design systems]( what they should include, who creates and maintains them, and what benefits they bring along. [Accessibility Beyond Compliance Playbook]( To shift the understanding of accessibility from one of basic compliance to a truly inclusive, human-centered experience, the team at AdHoc released their [Accessibility Beyond Compliance Playbook](. It explores several ways to improve accessibility — from the immediate task of building accessible products to creating teams of people that underscore an Accessibility Beyond Compliance mindset. (cm) --------------------------------------------------------------- 7. Custom Design Attributes Pure and contrasting nature, digital society, and smart, independent-minded people are the core values behind the brand Estonia. The [Brand Estonia design system]( maps the country’s strengths and shows how to express them through writing, designs, presentations, and videos. [Estonia]( Stories, core messages, facts, and plenty of examples and templates provide a solid foundation for creating texts and designs across the brand — be it on the web, in social media, or print. A special highlight of Estonia’s design system lies on authentic photos and custom design attributes such as wordmarks and boulders to underline the message. (cm) --------------------------------------------------------------- 8. Design Systems For Figma Atlassian, Uber, Shopify, Slack — these are just a few of the design systems you’ll find on [Design Systems For Figma](. Curated by Josh Cusick, the site is a growing repository of freely available Figma kits of design systems — grouped, organized, and searchable. [Design Systems For Figma]( Not featured in the collection, but worth looking into as well, is the [GOV.UK design system Figma kit](. It focuses specifically on complex user journeys and web forms. Lots of valuable insights and inspiration are guaranteed. (cm) --------------------------------------------------------------- From our sponsor Start Accessibility Testing In Just Minutes With The Free axe DevTools Extension [Deque]( Is your website accessible to people with disabilities? [Download the free axe DevTools Chrome extension]( to build a more accessible website and get instant results with detailed information on your web accessibility issues (and how to fix them). No accessibility experience necessary. --------------------------------------------------------------- 9. Visual Examples Of Do’s And Don’ts Audi UIs range from websites to applications for a particular service. The [Audi design system]( provides a joint set of components, modules, and animations to create a well-balanced, system-wide user experience — from the app to the vehicle. [Audi]( Along with brand appearance guidelines and UI components, a handy feature of the design system is its comprehensive set of visual examples of how a component should (and shouldn’t) be used in Audi’s interfaces. There is also a Audi UI Kit for Figma and a Sketch UI library that ensure that designers use the most up-to-date components and icons in their products. (cm) --------------------------------------------------------------- 10. Content Guidelines And UX Writing Deutsche Bahn, the national railway company of Germany, is one of the most recognized brands in Germany. With the help of their [DB Digital Product Platform]( the company enables developers, designers, and copywriters to build flexible digital experiences with an emphasis on mobility. [DB Digital Product Platform]( The design system features content guidelines, accessibility considerations, code examples, components, and contextual examples of how to use them. It also provides guidelines around UX writing and helpful visual guides to accessibility and logo. Everything is open source on GitHub and NPM. (cm) --------------------------------------------------------------- From our sponsor Northwestern’s Online MS in Information Design and Strategy [Northwestern’s Online MS in Information Design and Strategy]( Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. [Learn more](. --------------------------------------------------------------- 11. New On Smashing Job Board - [Web Developer m*w*d]( at 4wd media GmbH & Co. KG (Darmstadt, DE) - [Design System Builder / DesignOps Specialist]( at zooom productions GK (Tokyo / Remote) - [Developer — Omnichannel & CCaaS Platform]( at THRIO, INC. (Madrid) --------------------------------------------------------------- 12. Recent Smashing Articles - [Futuristic CSS]( - [State Of CSS Survey: Influence The Future Of CSS]( - [What’s New In DevTools: Halloween Edition]( - [Understanding Privacy: A New Smashing Book Is Here]( - [WordPress Full-Site Editing: A Deep Dive Into The New Feature]( - [Effective Communication For Everyday Meetings]( - [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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](