Hey!
This issue brings you your regular tasty treats in Design Systems, along with a few recent articles I’ve written to help you improve your Design Systems.
Recently I've covered topics like getting started with Style Dictionary for design tokens, scaffolding components with Plop.js, using utility classes to create system-friendly custom components, and exploring what else can be done with design tokens.
As a front-end developer and Design Systems consultant, I'm currently available and looking for new client projects, so if you or your team needs support, get in touch.
🙏🖤
📝 Articles
Web Components in Action — How to Build a Design System
Varya explores how Web Components can enhance design systems by creating scalable, reusable components compatible across frameworks. Using the Lit framework, Bridge the Gap developed a Web Component library with practical examples and insights, demonstrating the advantages of customisation, framework-agnostic design, and efficient documentation through Storybook.
Loose thoughts: Variables considerations for multi-faceted systems
Luis shares insights on managing Variables in multi-faceted design systems within Figma, emphasising considerations like automation needs, library structure, and naming conventions. He discusses the balance between maintaining consistency and enabling platform-specific flexibility, offering practical strategies for enhancing design workflows across different platforms.
How we used the Design System Attributes Framework to set our mission, vision, and principles
Henrik details how their team applied the "Design System Attributes Framework" to establish their mission, vision, values, and guiding principles for a multi-brand design system. Through structured classification and collaborative workshops, they created a balanced approach that emphasises flexibility, consistency, and accessibility.
👀 Interesting Reads
Ghost Variables in Figma
Sam dives into the problem of “Ghost” and “Zombie” Variables in Figma. By explaining common signs of these haunting variables, along with practical tips from the design community, Sam provides designers with tools and techniques to tackle these persistent issues and maintain cleaner Figma files.
How we built a design system in 2 weeks
In this article, 3 Sided Coin discusses how they built a foundational design system for Able’s Apex admin portal in just two weeks, focusing on essential components and adaptable theming. They explore how this system balances speed and scalability, setting the stage for future growth as Able’s needs evolve.
Stop building components, start building patterns
Luke suggests that design system teams should focus on building patterns rather than individual components. Patterns provide essential context, unifying components to express a product’s unique identity and align more effectively with user needs, ultimately helping communicate organisational values and creating a cohesive design system.
🎧 🎥 📊 Audio / Video / Slides
Zeroheight - Converge Brighton 2024 Videos
With just a few details handed over - you can now access the videos from the recent Converge 2024 Design Systems conference from Zeroheight