đź“ť Articles
Making your design tokens future-proof
The folks at Anima have created this nice little Design Tokens validator and in this article Andrico discusses how the tool ensures the consistency and compatibility of design tokens with the evolving specification.
Creating a flexible design token taxonomy for Intuit’s Design System
Nate discusses how Intuit evolved their design tokens to create a comprehensive and flexible taxonomy, addressing usability issues and improving clarity for their consuming design systems. By developing a structured token taxonomy based on use case coverage, they achieved better understanding, communication, and scalability within their design system.
Adopting Design Systems: A Case Study of Implementing Design Systems in Published Products
Ashraf discusses implementing a design system in published products, emphasizing the importance of defining the design direction, understanding front-end technologies, creating a token library, developing core UI components, and facilitating effective communication and handoff between design and development teams.
đź‘€ Interesting Reads
Unlocking inclusive design: how Primer’s color system is making GitHub.com more inclusive
How did GitHub's design system team, Primer, implement a colour contrast strategy to improve accessibility, resolving numerous issues and making GitHub.com more inclusive. Through audits, automation, and a gradual rollout, the changes successfully addressed hundreds of accessibility issues across various use cases.
Introducing Trendyol’s Open-Source Baklava Design System
Murat unveils Baklava, an open-source design system that offers a cohesive and adaptable design language for various digital projects, emphasizing consistency and versatility. The system is designed to provide a unified framework for efficient design and development across different applications.
đź› Tutorials
Unlocking the Power of Design Tokens to Create Dark Mode UI
Implementing dark mode in design systems is crucial due to the growing user demand for this feature. The article explains how to create a multi-themed design system using three-tiered design tokens, ensuring consistent UI implementation and addressing considerations such as color choices, contrast, and elevation in dark mode.
🧰 Tools / Resources
Design tokens - Atlassian Design System
Atlassian have included a neat 'token picker' that helps guide the Design Systems consumer to the correct list of tokens available for their use case.
Export/Import Variables – Figma
A cool Figma plugin from Jan that lets you export variables from one file and import them to another. As they say "It's great for migrating libraries, or when you downloaded library from the community and you’d like to import variables to your existing design system."