October 17, 2023 Smashing Newsletter: Issue #427
This newsletter issue was sent out to 209,526 subscribers on Tuesday, October 17, 2023.
Editorial
We’re just returning from SmashingConf Design & UX in the magical city of Antwerp, Belgium 🇧🇪, and oh my, what an incredible experience it has been — with 550 smart, kind, and passionate attendees, learning everything around design, UX, research, AI and design systems.
Just before opening the conference, I carefully peeked from the curtains at the audience. I couldn’t believe the incredibly friendly energy that was filling up the astonishingly beautiful venue. The only way to describe the feeling is that it was beautifully overwhelming in so many ways — and it was one of the most beautiful conferences we’ve ever had!
So, no wonder that we are delighted to be coming back to Antwerp next year! Meet SmashingConf Antwerp 2024 🍫 in the magical Bourla on Oct 28–31, 2024 — with friendly team tickets for truly smashing teams. Super-duper-early-birds are now on sale.
- SmashingConf Freiburg 2024 🇩🇪 (Oct 28–31, 2024)
- SmashingConf NYC 2024 🇺🇸 (Oct 28–31, 2024)
- SmashingConf Antwerp 2024 🇧🇪 (Oct 28–31, 2024)
For this newsletter, though, we explore the wonderful and mysterious world of design systems — specifically focusing on better ways to structure and maintain them over time.
Thank you so much yet again for your kind and ongoing support, everyone! 👏🏼👏🏽👏🏾
— Vitaly (@vitalyf)
1. Design Tokens Taxonomy
Design tokens might be the smallest part of a design system but also the most important one. Romina Kavcic calls them the “backbone of your design system,” the “building blocks of your design language.” In her Design System Guide, she dives deeper into what you can achieve with design tokens and shares naming conventions for colors, typography, and levels to help you keep your brand’s visual style consistent and easy to manage.
Another fantastic read on the topic comes from Nate Baldwin. He shares insights into how the Intuit Design System team evolved the system’s tokens to create a flexible taxonomy. What makes this particularly interesting is that the Intuit Design System serves as the foundational system for other multidimensional systems for a wide array of different products. An interesting look into design tokens that goes beyond the brand theme. (cm)
2. Organizing Design System Libraries
How to make a design system at scale work? How do you keep it clean, well-organized, and easily accessible for everyone involved? Jérôme Benoit shares valuable insights into how the team at Doctolib manages their design system, with more than 40 people involved who are inserting more than 70,000 components within a week.
Jérôme’s top tips to keep things organized: Be clear on rights, permissions, and ownerships from the start, rely on multiple libraries instead of a monster containing everything, include everyone and synchronize, and stay smart when deprecating components. Precious advice, particularly for fast-scaling teams. (cm)
3. Design System Structure Best Practices
How to best set up a design system structure in Figma? The Figma advocate team collected their tips in a FigJam file. It highlights example structure setups for each paid plan, different types of design system files, and recommendations for non-global components.
In general, the Figma team recommends building your design system’s structure on top of three pillars: a main design system team, with projects and files for your foundations, atomic components, assets, and brand elements; a design system project within individual teams for team-specific components or styles; and components pages within your files for components localized to a specific feature you’re working on. A great foundation to make your design system more efficient. (cm)
4. 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:
- Customer-Centric Product Strategy Workshop UX
with Debbie Levitt. Oct 18–26 - Design KPIs Masterclass UX
with Vitaly Friedman. Oct 31 – Nov 8 - Accessibility for Designers UX
with Stéphanie Walter. Nov 6–15 - Building Modern HTML Emails Dev
with Rémi Parmentier. Nov 9–17 - Advanced Modern CSS Masterclass Dev
with Manuel Matuzović. Nov 27 – Dec 11 - Successful Design Systems Workflow
with Brad Frost. Nov 28 – Dec 12 - Design Management Masterclass UX
with Slava Shestopalov. Nov 30 – Dec 8 - Smart Interface Design Patterns UX
9h-video + Live UX Training with Vitaly Friedman - Jump to all workshops →
5. Keeping Design Documentation Alive
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 and valuable. First, you need to involve the people you are writing the documentation for right from the beginning.
Second, measure the success of your documentation on how often it helps the team to communicate and collaborate 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 used to. Precious tips to keep your design documentation alive. (cm)
6. Introducing New Components To Design System
A design system is constantly evolving, and adding new components is a common task. If you don’t have a dedicated design system team but different people contributing to the system, you’ll need to ensure that quality stays consistent as new things are being added. Andrey Sundiev shares a robust five-step process for doing just that.
The process which Andrey describes is called “rationalisation” and follows the classic “double diamond” pattern. It covers everything from gathering context and figuring out how the new component can solve particular user goals to outlining the scope of the solution, exploring design options, and documenting everything users need to know to use the component effectively. A handy set of guidelines that can be adapted to your team’s needs. (cm)
7. Measuring Design Adoption
Code adoption metrics often don’t tell the whole story about how well a design system is adopted, as adoption starts earlier in the process: in the design phase. To gain deeper insights into design adoption, the team at Pinterest built FigStats, a tool to measure how their design system is used across the board in Figma. It runs every night to check all Figma files and calculates an adoption percentage across the organization.
The metrics gathered by FigStats help the design system team see trends about where the system is easy or difficult to use and which teams struggle with incorporating the system. FigStats also runs a cloud linting process to ensure file hygiene standards, and it identifies customized local file components that are distributed across the team and that might be worth adding to the larger design library. (cm)
8. Smashing 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?
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Image Optimization by Addy Osmani
- Jump to 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.