📝 Articles
How blind customers experience our app
In a recent livestream for Global Accessibility Awareness Day, Geri Reid shared insights from Adi Latif's experiences using the Just Eat app as a blind user, highlighting the critical role of accessibility in app design. Adi emphasised the importance of a clear structure, meaningful labels for buttons, and minimising unnecessary swipes, while also advocating for features like auto-applied discount codes to enhance usability for screen reader users.
Naming and creating Variables in Figma
Luke provides a guide for creating scalable variables in Figma, highlighting the importance of naming conventions and structuring primitive variables. He advises keeping these variables brand-agnostic, using clear folder structures, and hiding them from designers to improve usability, while also stressing early alignment with developers for consistency in the design system.
The biggest threat to your design system is your need to be liked
Lauren explores the risks of people-pleasing in design systems, asserting that trying to satisfy everyone undermines their effectiveness. They advocate for prioritising authenticity and establishing a clear vision, suggesting that true success comes from creating systems with a strong point of view rather than accommodating all needs.
👀 Interesting Reads
Top Storybook Documentation Examples and the Lessons You Can Learn
Nazar has put together an overview of how teams utilise Storybook for effective component documentation, turning UI elements into interactive and shareable resources. Examining diverse examples from organiaations like monday.com and the BBC, the article highlights best practices that enhance design-to-code alignment, accessibility, and team collaboration.
The mythical magical button
Kevin explores efficient button design within a design system, highlighting the balance between simplicity and versatility. By leveraging custom properties and modern CSS techniques, he showcases how to create dynamic buttons that retain distinct styles and states while minimising code complexity.
Design Tokens for Links
Francesco explores the challenges of integrating links into design token architectures, presenting two approaches: a semantic method that categorises links under text tokens for flexibility and reusability, and a specific method that treats links as distinct elements for clarity and consistency in styling.
🔗 Links
Convert To Colour Tokens JavaScript Snippet
Matt shares a code snippet that should help you convert your existing colour design tokens to match he current specification changes.
🖤 Design Systems
DRUIDS by Datadog
There are several little things I love about DRUIDS. how they've organised their components, having a separate 'component gallery', listing their tokens from usage to raw values. Love it!