Design System 101
Build a token set and a component library that survives its second product. Covers the handover to code, which is where most systems quietly die.
4.8
2,318 students
6h 05m of video
6 quizzes
Arman Tanaka
Design Engineer
What you will be able to do
- Name a token so it still makes sense in a year
- Decide what deserves to be a component
- Keep the Figma library and the code library in step
- Version a system without breaking its consumers
Curriculum
5 modules · 14 videos · 6h 05m
- Systems vs. style guides
- Auditing what you have
- Primitives and semantics
- Naming that survives
- Theming without forking
- The promotion test
- Variants and slots
- Documenting intent
- One source, two consumers
- Storybook as the contract
- Drift and how to spot it
- Versioning
- Requests and rejections
- Assignment: audit a system
Your coach
Arman Tanaka
Design Engineer
Arman sits between the design file and the component library and has strong opinions about who owns the gap. Both of his courses are about closing it.
See Arman Tanaka’s profileWhat students say
I have started three systems and abandoned two. The module on versioning is the part nobody writes down, and it is why the third one is still alive.
Cecillia YoSoftware EngineerThe handover module alone paid for the course. Our Figma library and our Storybook finally agree on what a button is.
Peterik JacobFrontend Developer