Exploring the Anatomy of Design Systems

on YouTube ↗49m

" summary

Starts by tracing concrete steps: map workflows, run audits beyond visuals, and capture decisions with lightweight ADR‑style notes; a Figma + Token Studio flow outputs JSON tokens to GitHub so design changes propagate into code. Uses Style Dictionary to generate platform CSS and themes. Calls out surprises like finding 27 variants of one CTA and shows semantic token names let values change without breaking UI. Prioritizes measurable pain points, not perfection in naming.

AI-written summary · about

" chapters (8)

1. 0:00The macro perspective
2. 2:50Identifying the "why"
3. 6:52Auditing and discovery
4. 13:53Strategy and communication
5. 19:21Documentation and process
6. 25:41Micro-level component design
7. 31:50Tokens and implementation
8. 37:45Q&A and final takeaways

" related talks

• 51mDesign system and tokensJānis Cimbulis · DevClub.lv 114th Frontend focused event
• 45mBridge the Gap between Design and DevelopmentSAMANTHA GORDASHKO · SmashingConf Freiburg 2024
• 39mThe Anatomy of a Design SystemBen Callahan · Amuse UX Conference 2022
• 25mDesign systems for agenciesMartina Dellepiane, Sergej Spomer · Config Europe 2020
• 50mManaging Design Systems, from Features to RoadmapsNathan Curtis · SmashingConf Antwerp 2024
• 51mThe Power of Design SystemsNatalja Andrejeva, Aivis Jansauskis · DevClub.lv 114th Frontend focused event
• 35mDesign Tokens for Cross-platform Design SystemsArash Nase · droidcon New York 2025
• 27mDesign Tokens and YouMax Thorson · UtahJS Conf 2023