📝 Articles
Introducing Design Tokens Language Server
Benny introduces the design-tokens-language-server, a tool designed to enhance the management of design tokens in code editors. This server provides real-time feedback and advanced editing capabilities, allowing users to define and reference styling variables consistently across their projects, thereby streamlining collaboration between designers and developers.
Writing in Sync: Design System Content
Angelica discusses the critical role of documentation in maintaining the integrity of design systems within organisations. They emphasise that effective documentation requires collaboration across various disciplines—designers, developers, product managers, and marketers—to ensure clarity and consistency.
Planning and design systems–how much time you got?
PJ emphasises the critical role of planning in design systems, highlighting that these teams operate on a longer time scale compared to feature teams. By sharing personal experiences and practical strategies they encourage design system teams to focus on project-based planning, build in capacity buffers, and maintain clear communication to ensure successful outcomes while navigating the complexities of their work.
Integrating Localization Into Design Systems
Rebecca and Mark share their experience of building a localization-ready design system for a global audience, detailing how they leveraged Figma Variables and design tokens to address multilingual design challenges. They discuss the importance of integrating localisation from the outset, the complexities they faced, and the solutions they developed to create adaptable designs that cater to diverse languages and cultures, ultimately enhancing usability for international users.
👀 Interesting Reads
Design system annotations, part 1: How accessibility gets left out of components
Jan Maarten highlights the importance of accessibility annotations in design systems, noting that they address gaps that standard components cannot fill. He explains that many organisations mistakenly believe that accessible components ensure accessible designs. The article presents annotations as crucial notes that clarify design intent for developers, helping to prevent access barriers. The Accessibility Design team has created a toolkit to streamline this process, ensuring key accessibility details are documented effectively.
🧰 Tools / Resources
SaaS UI - Illustrations for your Design Systems Documentation
SassUI offers an impressive collection of over 220 free illustrations tailored for design systems and documentation. These high-quality, customisable visuals are designed to seamlessly enhance your projects, making your documentation more engaging and accessible.
Penpot Design Tokens Starter Kit
Featuring a comprehensive template showcasing 531 design tokens in action. Explore various token types through interactive demos, making it an excellent foundation for building your own design system, complete with options for border radius, colours, dimensions, and themes that cater to global density preferences, theming, and modes.