Syntax - Tasty Web Development Treats Design Systems with Brad Frost
19 snips
Oct 20, 2023 
Join Brad Frost, the mastermind behind Atomic Design and a design system consultant, as he dives into the world of design systems. He discusses the benefits of having cohesive designs across projects and shares insights on handling design syncs, especially when using popular frameworks like Shopify and React. Frost also covers the role of design tokens, governance in naming conventions, and the importance of documentation. Plus, he offers tips on overcoming pushback and the relevance of design systems for startups.
AI Snips
Chapters
Books
Transcript
Episode notes
Design System Definition
- A design system is the official story of how an organization designs and builds UIs.
- It includes a design library, code library, and documentation website.
Web Components for Design Systems
- Use web components for design systems to support diverse tech stacks.
- Focus on presentational elements (HTML, CSS, JS) without backend logic.
Design-Code Sync
- Design tools and code are fundamentally different, making synchronization hard.
- Design systems in Figma should reflect the code, not serve as a strict spec.
