April 22, 2025 Smashing Newsletter: Issue #504
This newsletter issue was sent out to 190,938 subscribers on Tuesday, April 22, 2025.
Editorial
Although we’ve been working on design systems for nearly a decade now, there are still pending challenges and issues that find a way to creep into every project.
In this newsletter, we look at some design system tactics, an organization in Figma, design system flowcharts, playbooks, and helpers — and how to make folks follow design guidelines. We hope it will help you with some of your challenges.
On another note, have you ever struggled with a design system or have had too much on your plate? Join us tomorrow at 8 AM (PT) for a second episode of OPEN UP with Brad Frost and Geoff Graham who’ll join you live and share their advice and solutions. You’re welcome to submit all your questions beforehand and bring a friend along (tickets are free)!
Also coming up, mark your calendar for another online (free!) event: Meets for Work. We’ll be talking about a topic very close to everyone: work. How do you find the job you’ve always wanted? How can you work best with difficult folks? Christine Vallaure, Jason Mesut, and Geoff Graham share their experiences and pointers on achieving your work goals in life.
I hope you’ve left a wonderful weekend behind and have a truly fantastic, productive week ahead, everyone!
— Vitaly
1. Design System Tactics
How do you set up a strategy for your design system? How do you improve collaboration? How to introduce new components? And how to document and validate the system? Whether you’re at the very beginning of your design system journey or are maintaining a mature system, Ness Grixti’s growing collection of Design System Tactics helps you make progress at every stage.
The tactics are divided up into seven categories, ranging from Strategy & Setup to System Validation & Exercises, and cover the complete design system process. From the basics to more nuanced problems you might encounter on your design system journey, the tactics have got your back, helping you reduce friction, improve collaboration, and create a design system that people will love to use. (cm)
2. Design System Organization In Figma
Organization is key to ensuring a design system serves as a single source of truth for your product. Otherwise, you risk that the design work will lose coherence as the scope grows. The team behind the travel app Bonjour RATP chose an approach for their filing system in Figma, which you won’t see often but which has proved to be super powerful: they design and organize all screens in user flows.
In their case study, the RATP Smart Systems team shares golden rules you can follow if you want to give the user flows methodology a try. To get a better understanding of what it looks like when applied to a real-world project, be sure to check out the Figma working files that the team opened for public viewing. (cm)
3. Smashing In-Person Workshops In NYC and Antwerp
The Smashing Cat is going places! We are launching a brand new adventure — Smashing In-Person Workshops, with practical UX and front-end workshops coming to the city near you. We kick off with workshops on UX and design systems in NY, USA 🇺🇸 on June 23–24, 2025.
- Design Patterns For Complex UIs and AI (NY 🇺🇸, Jun 23), with Vitaly Friedman
- Diving Deep Into Design Tokens (Antwerp 🇧🇪, Sep 4), with Brad Frost
- How To Measure UX and Design Impact (Antwerp 🇧🇪, Sep 4) with Vitaly Friedman,
- Jump to all in-person workshops →
4. Illustrations For Design Systems
If you’re looking for illustrations of UI components, the SaaS UI illustrations library has got you covered. Created by Tomasz Owczarczyk, the collection features more than 220 free illustrations designed specifically for documentation, frameworks, and design systems.
No matter what kind of UI component you can think of, chances are good that SaaS UI has it listed. From accordions to beacons, from file upload to kanban, from password input to toggle buttons, the illustrations are a perfect fit for technical documentation and a great source of inspiration for your own design system components. (cm)
5. Better Design System Documentation
The best design documentation is the one that is being used by the team. Reality often looks different, though, and the stuff you’ve carefully written goes unnoticed in the hustle of day-to-day work. Slava Shestopalov helps you figure out why that happens and how you can prevent your documentation from turning into a cemetery of ideas.
According to Slava, there are three main things to consider to make documentation more effective. First, involve the people you are writing the documentation for right from the beginning. Second, measure the success of your documentation based on how often it helps the team instead of how well it’s composed. And last but not least, the best tool for documentation is the one that your team is already familiar with. Valuable tips to help you turn documentation into a living environment that people will refer to. (cm)
6. 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:
- The Secrets of Web Performance dev
with Ryan Townsend. May 7–21 - How To Measure UX and Design Impact UX
with Vitaly Friedman. May 12–20 - Enterprise UX Masterclass UX
with Marko Dugonjić. May 14–21 - Design Patterns For AI Interfaces UX
with Vitaly Friedman. Jun 4–18 - Accessibility for Designers UX
with Stéphanie Walter. Jun 16–24 - Smart Interface Design Patterns UX
with Vitaly Friedman - Jump to all workshops →
7. Design System Process Flowcharts
A design system isn’t a side project or something designers do post-launch. It’s a product — with its own roadmap, backlog, ownership, and resources. To maximize its impact, we need to be transparent about why the design system is needed in the first place and the design system process so that designers and engineers can contribute to it.
If you’re looking for some real-world examples of what this could look like, Vitaly compiled a selection of decision trees and flowcharts highlighting design process, maintenance, and contribution guidelines. They come from companies like British Gas, Nordhealth, Boston Scientific, GitHub, and Zalando and provide valuable insights into how the design system teams set the foundation for further innovation and enhancements. (cm)
8. Design System Playbooks And Helpers
How to best name design tokens? How to streamline handoff? And how to get stakeholders to support your design system efforts? To help you strategically approach the challenges that design systems bring along, Romina Kavcic created a collection of useful Figma templates and playbooks.
In the collection, you’ll find six resources to support your design system efforts, among them a Design Tokens Naming Playbook for experimenting with different naming structures, a Strategy Map you can share with stakeholders to get buy-in, and a Design Audit Template and Design Documentation Template to simplify the handoff process and streamline your design documentation. A powerful toolkit, no matter if you’re new to design systems or looking to brush up on your skills. (cm)
9. Recently Published Books 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
- Success at Scale by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out all books →
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 Geoff Graham (gg), 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.