#408: Design Systems

Design System ROI calculator, practical guides, tools and design system checklist. Issue #408 • June 6, 2023 • [View in the browser]( [Smashing Newsletter]( Kalimera ora Smashing Friends, Design systems are nothing but an exercise in persistence and collaboration. We need to think in a systematic way, and we need to agree on components that are flexible and reusable — both in design and in code. [Goldman Sachs Design System]( A sophisticated design system around everything, from data tables to drag-and-drop: [Goldman Sachs Design System](. In this newsletter, let’s take a look at some of the useful tools and resources to build and implement better design systems. You’ll find some guides and inspiring enterprise design system resources, but also a checklist for components and an ROI calculator. We hope you’ll find them useful! [A Smashing Hour with Oliver Reichenstein]( We have some exciting events coming your way — including a [Smashing Hour]( with the one-and-only Oliver Reichenstein. Mark your calendars for [Smashing Meets AI]( (free, June 20, online), a friendly get-together to discuss the challenges of AI alongside designing and building with it. We’ll also exploring a diversity of topics at our upcoming [SmashingConf Freiburg]( 🇩🇪 (Sept 4–6, only 25 tickets left!) and at [SmashingConf Antwerp]( 🇧🇪 (Oct 9–11), with a few practical workshops around design, frontend and UX — we’d love to see you there. 🙌 Until then, let’s get to the bottom of design systems! — Vitaly ([@vitalyf]( --------------------------------------------------------------- 1. ROI Calculator Your boss is hesitant that the work you’ll put into a design system will eventually pay off? The [Design System ROI Calculator]( might be just what you needed to convince them that the time and money invested in a design system is a good investment. [Design System ROI Calculator]( The ROI calculator helps you understand and project cost savings when implementing a design system. It calculates total employee savings from implementing a design system, as well as time saving and efficiency gain by component or UI element. You can also choose different scenarios based on team size and product calculation to estimate total savings. (cm) --------------------------------------------------------------- 2. Inspiring Enterprise Design Systems Some design systems strike with their level of detail. The [Goldman Sachs Design System]( is such an example. Customized for institutional finance, it allows teams to create digital products that put clients first. But even if you’re not in the financial industry, with its touch screen considerations, accessibility guidelines, do’s and don’ts, and much more, the design system is a treasure chest for any UI/UX designer. Particularly since Goldman Sachs open-sourced their Figma kits, so be sure to check out their [Foundation UI Kit]( the [Components UI Kit]( and the [Patterns & Layouts UI Kit](. [Goldman Sachs Design System]( Another fascinating example of an enterprise design system is the [OpenBridge Design System](. Created for maritime workplaces and equipment, it describes solutions to common problems in maritime user interfaces. You’ll discover patterns for transportation systems and sea-shore interfaces, for example, or day, dusk, and night modes. You can dive deeper into the patterns in the [docs]( download the [Figma kit]( or check out the [component library]( to tinker with the code. Looking for more? Vitaly compiled some [less-known enterprise design systems]( with docs and Figma kits for large organizations, governments, and complex applications. Inspiration is guaranteed! (cm) --------------------------------------------------------------- From our sponsor Cut Development Time In Half [Cut Development Time In Half]( The possibilities of a headless setup are endless. A CMS such as [Storyblok]( can help you make your website more resilient without losing the flexibility to deliver time-relevant content. [Try Storyblok today](. --------------------------------------------------------------- 3. Proportional Scales Consistency is key in a design system. Still, a lot of systems lack universal rules for sizing. [Proportio]( is here to change that. Created by Nate {NAME}, the open-source tool helps you ensure cohesive sizing, spacing, and scale across your system to get you well-prepared for all those occasions when you need to add new sizes or densities to your components. [Proportio]( Proportio leverages the typographic scale to create all values for text and icon sizes, spacing, radius, and elevations for you. The interface shows a live preview of your specification as you work on it. Once you’re happy with the result, you can export the values as either W3C Design Tokens or CSS variables — perfect for a simple, stress-free hand-off to engineers. (cm) --------------------------------------------------------------- 4. Enterprise Design Systems 101 Introducing an enterprise design system is a lot of work. But it is work that will eventually pay off. Especially with large teams, multiple platforms, and numerous user interfaces to manage, having a single source of truth helps maintain a consistent user experience. So what do you need to consider when building your own? [Adam Fard takes a closer look](. [Enterprise Design System: Everything You Need to Know]( As Adam explains, an enterprise design system is a system of best practices, reusable design elements, processes, usage guidelines, and patterns that help reinforce the brand, improve the UX design process, and optimize the user experience. If your enterprise traverses numerous sites or apps, Adam’s writeup is a great opportunity to learn more about the building blocks of a successful enterprise design system. (cm) --------------------------------------------------------------- 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 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 a quick overview: - [Deep Dive On Accessibility Testing]( Dev with Manuel Matuzović. June 12–26 - [The React Performance Masterclass]( Dev with Ivan Akulov. June 29 – July 13 - [Data Visualization Masterclass]( Dev with Amelia Wattenberger. July 4–18 - [Figma Workflow Masterclass]( UX with Christine Vallaure. July 20–28 - [Smart Interface Design Patterns Video Course]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 6. Free Design Systems Video Course Are you about to build your first design system? Or maybe you’re just curious to learn more about them? Then Figma’s “[Introduction to Design Systems]( is for you. The free 80-minute video course walks you through the entire design systems journey over four lessons. [Introduction to Design Systems]( The course covers fundamental design system concepts, building and testing, documenting your system, and everything in between. Along the way, it demonstrates real-world applications and shares valuable tips for how Figma features support your design system process. The course also equips you and your team with questions to help make meaningful decisions — whether you even need a design system, for example. A great introduction to the ever-evolving world of design systems. (cm) --------------------------------------------------------------- 7. Activity For Starting A Design System Starting a design system can be a daunting task, especially for small teams who are in awe of the scale of finished systems by large corporations. Nathan Curtis shares a [quick, two-stage activity]( that helps small teams set the base for a design system that is truly tailored to their needs. [Picking Parts, Products & People]( At the heart of the activity is a [two-page worksheet](. The first stage orients the group around tangible parts of the system and what does and what doesn’t matter to them. Stage two is all about prioritizing the system. It helps the team assess the effort they plan to put into each of the different parts, prioritize their most important products, and identify who will play key roles in decision-making and the creation process of the system. A great activity to see things more clearly. (cm) --------------------------------------------------------------- 8. New On Smashing Job Board - [Front-End Developer]( at wemakeit AG (Karlsruhe, Germany) - [Visual Designer]( at UCLA (Los Angeles / New York / Remote) - [Wordpress/PHP Developer]( at Razorbraille (Toronto) --------------------------------------------------------------- 9. Recent Smashing Articles - [iA Presenter: A Case Study On Product Pricing Considerations]( - [How To Enable Collaboration In A Multiparty Setting]( - [Primitive Objects In JavaScript: When To Use Them]( - [Advanced Form Control Styling With Selectmenu And Anchoring API]( - [Create Your Own Path In June (2023 Wallpapers Edition)]( - [Designing A Better Design Handoff File In Figma]( - [Meet Success At Scale, A New Smashing Book By Addy Osmani]( - [Read more 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](