Kia Ora Smashing Friends,
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!
SmashingConfs 2024: the schedule for next year is set, and we’d be absolutely delighted to welcome you.
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.
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)
From our sponsor
Get A Complete Picture Of Your Site’s Performance
Learn how users experience the speed of your site by using Lighthouse audits to fix issues and measure the impact of slowdowns on business and user engagement metrics. Integrate with your CI/CD process to fight regressions and stay fast. Explore SpeedCurve today!
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 to build 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.
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:
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)
From our sponsor
The World Of Composable Web Architecture Comes Together At Netlify Compose 2023
Developers at businesses of all sizes are turning to composable web architecture for unmatched agility, speed, and efficiency. Compose 2023 gathers a diverse ecosystem of technology decision-makers, developers, engineers and more, to shape the path towards a modern, composable future of the web. Join in person or virtually!
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)
From our sponsor
Create Outstanding Websites Without Coding
Design pixel-perfect landing pages, presentations, editorials, e-shops or portfolios, collaborate to make decisions together and publish immediately with Readymag — the design tool for outstanding websites.
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?
… and we’re currently working on a new book: Success At Scale, shipping in fall. Pre-order your copy or browse the complete library.
9. Recent Smashing Articles
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
