📝 Articles
Hovercraft
Donnie questions the necessity of elaborate hover effects in web design, suggesting that they add complexity without significantly enhancing user experience. They suggest that a simple cursor change could suffice to indicate interactivity, thereby simplifying design and reducing the number of design tokens needed for maintenance.
Uplifting Shopify Polaris
José discusses the transformation of Shopify's design system, Polaris, from a flat and uninspiring interface to a more tactile, functional, and joyful design language. The process involved divergent and convergent design explorations, careful consideration of elements like buttons, icons, color palette, and interactions, leading to a significant design change that aims to enhance the merchant's experience within Shopify's admin interface.
How Thumbtack structures their design system
Daniel outlines how the design system at Thumbprint is organised into three layers: Thumbprint Tokens, Thumbprint Atomic, and Thumbprint Components. This layered approach enhances the system's flexibility, quality, and productivity, enabling efficient development of UI elements while maintaining a separation of concerns. This structured system helps both developers and designers fall into the "pit of success," making it easy to create consistent and effective user experiences.
A Guide to Variables in Figma
Joey provides a comprehensive guide to using variables in Figma, discussing the various types of variables (color, number, boolean, and string), how to create and apply them, and the benefits of variable aliasing. The article emphasizes the improved collaboration between design and engineering and the efficiency gained through the use of variables and modes.
Writing Component Specs
Rob discusses the importance of having a standard component specification template to guide the development of reusable, high-quality UI components. They outline various sections that should be included in the spec, such as an overview, design considerations, and technical details, to ensure that the component is well-documented, accessible, and consistent.
👀 Interesting Reads
Writing for our design system
Louise discusses the role of UX writing in the development of a new design system, emphasising the importance of creating content that is clear, direct, and accessible to all users. They outline a two-pronged approach that incorporates UX writing principles and a content system, including standardised templates and tone of voice guidelines, to ensure consistency and user focus.
🧰 Tools / Resources
Luro
The "no-code solution to track component usage, adoption, and success across your entire product" is out of beta and ready to integrate with your Design System. Trent wrote about it, Dave wrote about it and Chris wrote about it too. There's a neat little ~4 minute Getting Started video and you should keep an eye on Dave's Twitch channel for some walkthroughs and Q&As. Definitely worth checking outt.
🔗 Links
Learn Variables - 50+ Resources
Here is a huge compilation of Figma Variables + advanced prototyping resources from Sam