đź“ť Articles
Why you shouldn’t use AI to write documentation
Luke discusses the limitations of using AI for writing documentation, emphasising the value derived from the human process of creating it. He suggests that high-quality documentation requires a deep understanding of context and opinionated decision-making, which AI struggles to provide, resulting in generic outputs that lack specificity to an organisation's needs. Instead, Murphy advocates for using AI as a supportive tool for tasks like templating and clarity enhancement while maintaining the essential human touch in crafting documentation that effectively communicates design principles and guidelines.
Designing design systems: How to lay the groundwork that drives decision making
The Adobe Design team outlines a framework for evolving the Spectrum design system through collaboration. They emphasise building a community of advisors to gather diverse perspectives and inform decisions. By focusing on specific themes and documenting choices in a playbook, they enhance transparency and accountability. The article highlights the importance of iterative guiding principles that reflect the system's values, ensuring flexibility while adapting to user needs and balancing openness with a clear design vision.
5 ways to increase the quality of your design system documentation
Lewis presents five effective strategies to enhance the quality of design system documentation, emphasising its critical role in user engagement. By focusing on clear user needs, comprehensive component content, visual appeal, dedicated accessibility guidelines, and contextual examples, teams can create documentation that is not only informative but also accessible and engaging, ultimately leading to better adoption and utilisation of design systems.
Calculate Design System value via cost savings
Tiago outlines a straightforward method for quantifying the ROI of a Design System by focusing on cost savings rather than direct revenue generation. By estimating the time and financial resources saved through streamlined component creation, Almeida illustrates how a well-implemented Design System can lead to substantial savings—potentially exceeding €4.6 million—while freeing up valuable time for teams to concentrate on delivering meaningful business value.
đź‘€ Interesting Reads
Structuring Design Tokens for Interactive States
Francesco explores two approaches to structuring interactive state tokens in design systems: property-specific tokens, which provide fine-grained control but may cause token bloat, and semantic group tokens, which simplify management and enhance consistency at the expense of customization. A hybrid approach combines both methods, balancing generalisation with targeted overrides, helping design systems maintain flexibility, consistency, and scalability for interactive elements.
Definition layers within semantic tokens
Dave discusses the flexibility of design tokens, particularly semantic tokens, advocating for a dual-layer approach that combines both generic and specific tokens. He introduces concepts like action tokens and global layers to balance detailed control with user accessibility, enhancing usability while preventing frustration among designers. This strategy allows for efficient design practices without sacrificing semantic integrity, creating a more adaptable and comprehensible design system.
đź› Tutorials
Documenting Web Components With Storybook
James explores effective strategies for documenting Web Components using Storybook, emphasising the importance of maintaining accurate and user-friendly documentation. By leveraging the Custom Elements Manifest and integrating it with Storybook, developers can automate the generation of comprehensive documentation that reflects the current state of their components. The piece highlights the benefits of using Storybook Controls for real-time interaction, as well as custom blocks to enhance the documentation experience, ultimately advocating for a streamlined approach that meets users where they are—whether in Storybook, the IDE, or Figma.
🧰 Tools / Resources
Variables to JSONÂ - Figma plugin
The Variables to JSON Plugin allows users to effortlessly convert Figma variables into structured JSON code compatible with Style Dictionary Configurator, supporting all variable types and modes.