👋 Hey!
Here's to another week of tasty design systems treats!
In the last week I wrote two articles about using Style Dictionary as part of my Design Tokens Workflow series. The first looked at generating code for a multi-brand Design System which was quickly followed by one on creating themes for a single site or brand.
I spent part of the tail end of the week looking at PenPots recently released Design Tokens support (there's an article for that in the works).
I have availability and am looking for new client work. If you or your team are seeking support on your Design Systems journey, I’m here to help with your next project.
Help support my weekly curating of Design Systems links so you don't have to by 'buying me a coffee'.
🙏🖤
Stu
📝 Articles
Naming things in design systems–and why it’s the worst
In this insightful post, PJ delves into the complexities of naming within design systems, highlighting the tension between creativity and clarity. They emphasise the importance of straightforward, self-descriptive terms to improve understanding and usability in design.
How do we know what components to work on?
Luke outlines a structured approach to prioritising work on design system components, highlighting the importance of a systematic framework. He introduces the 'Impact vs Effort' matrix as a tool for evaluating potential tasks, encourages user feedback to identify missing or incomplete components, and stresses the need for tracking component usage to ensure they meet user needs. By running prioritisation planning sessions, teams can effectively balance new work with maintenance and improvements, ultimately enhancing the overall quality and utility of their design systems.
👀 Interesting Reads
10 uses for variables beyond light and dark mode
Alice explores ten innovative uses for variables in design systems beyond just light and dark modes. From validation styling to breakpoints and contrast modes, these applications enhance user experience by adapting to various contexts, such as subscription levels and loyalty status, ultimately ensuring a more tailored and responsive interface. For more detailed insights, the author invites readers to engage further with
Composite vs Simple Tokens
Francesco explains the differences between composite tokens and simple tokens in design systems. Composite tokens combine multiple simple tokens to define complex visual properties, such as typography styles, shadows, and borders, ensuring consistency and simplifying maintenance. By adhering to best practices, teams can create meaningful composite tokens that reflect higher-level design concepts while maintaining modularity and clarity.
Measuring Design System Adoption: Building a Visual Coverage Analyzer
Maya addresses the challenge of measuring design system adoption for Cedar, REI's design system, by identifying two key metrics: usage and coverage. To gain visibility into component usage, they developed a Chrome extension that visually distinguishes between Cedar and custom components.
Designing design systems: A framework for names, terms, and definitions
Jess outlines a framework for establishing a standardized lexicon within design systems, drawing from her experiences at Adobe's Spectrum. Emphasising the importance of clear communication, she presents a structured approach that includes observing, discussing, philosophising, summarising, deciding, and communicating to create meaningful names, terms, and definitions. By applying this framework, teams can ensure that every design decision has a clear intention, fostering consistency and understanding among users and stakeholders alike.
🎧 🎥 📊 Audio / Video / Slides
Talking Tokens
In this webinar, Jackie, Donnie, and Miranda explore the importance of design tokens in digital product development, emphasizing effective naming strategies and governance. Key takeaways include insights on managing tokens and addressing challenges in adoption and scale.