📝 Articles
Planning a Design System Generation
ChatGPT Nathan outlines a structured approach for managing significant changes across a design system, emphasizing the importance of strategic planning and incremental implementation to ensure alignment and effective communication with stakeholders. By breaking down the process into strategy and implementation phases, teams can gradually deliver updates while maintaining stability and quality throughout the cycle.
Synchronizing Figma variables with Design Tokens
Nate discusses integrating Figma variables with design tokens, addressing challenges and solutions for synchronisation. They cover the setup process, integration with the Figma REST API, and managing updates within Figma. Challenges include handling Figma's identifiers and ensuring flexibility for different design teams within the organisation.
Adopting Design System Generations
Nathan addresses challenges in adopting design system generations, focusing on accommodating diverse adopter perspectives and streamlining integration processes. They emphasise the importance of understanding adopters' needs and facilitating collaboration to ensure successful implementation amidst complexities like dependencies and coordination across various teams and priorities.
Getting started with native design tokens in Figma
Lukas explores implementing design tokens in Figma using variables, enabling consistent design across projects. It outlines how tokens organise raw design values, like colours and sizes, enhancing collaboration between design and development teams.
👀 Interesting Reads
Figma Variables at Vodafone UK
The folks at Vodafone UK detail their journey in organizing a multi-brand design system with Figma Variables, aiming to inspire others. They refined their taxonomy structure, emphasizing practical advantages like theming ease and memory efficiency, while promoting token adoption for consistent design.
Theming Design Systems
Mike discusses the integration of CSS custom properties with Sass variables in design systems to enable powerful theming capabilities without duplicating CSS classes. They highlight the use of this hybrid approach in Turquoise Health's Pit Viper design system, allowing for flexible, context-specific applications of design tokens while reducing the need for direct CSS coding by developers.
🧰 Tools / Resources
Design System Radar
Design System Radar is a powerful Figma plugin designed to ensure compliance with design system standards, focusing on spacing and style variables. It streamlines the design refinement process by identifying discrepancies and providing quick navigation for corrections
AI Assistant For Enterprise Design Systems | Hermae
Increase development speed, reduce engineering onboarding headaches, and synthesize huge amounts of your documentation data in seconds using our AI embeddable widget.