June 6, 2023 Smashing Newsletter: Issue #408
This newsletter issue was sent out to 212,704 subscribers on Tuesday, June 6, 2023.
Editorial
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.
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!
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.
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.
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)
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 Baldwin, 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 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.
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.
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.
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.
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)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.