Design Systems from Figma to Code
Build a design system your team will actually use: tokens, components and documentation, from Figma all the way to production code.
Taught by Amara Okoye · Updated Sep 2026
- Length
- 9 hours
- Lessons
- 22 lessons
- Modules
- 5 modules
- Certificate
- Included
What you’ll learn
- Define colour, type and spacing tokens that scale
- Design flexible components with variants and states
- Hand off to code with tokens in CSS and React
- Document, version and govern a living system
Curriculum
5 modules · 22 lessons · 9 hours total
1Foundations and audit4 lessons · 1 h 54 min
- Why design systems failPreview20 min
- Running a UI auditPreview36 min
- Choosing your scope30 min
- Setting up the Figma file28 min
2Design tokens5 lessons · 1 h 53 min
- Colour tokens35 min
- Type scales18 min
- Spacing and sizing15 min
- Naming that lasts25 min
- Theming and dark mode20 min
3Components that flex5 lessons · 1 h 49 min
- Anatomy of a button19 min
- Variants and properties26 min
- Forms and inputs22 min
- Layout components14 min
- States and edge cases28 min
4From Figma to code4 lessons · 1 h 33 min
- Exporting tokens31 min
- Tokens in CSS22 min
- Building components in React17 min
- Visual regression tests23 min
5Documentation and adoption4 lessons · 1 h 52 min
- Writing usage guidelines26 min
- Versioning and releases28 min
- Measuring adoption32 min
- Your capstone system26 min
Your instructor
Amara Okoye
Design lead, ex-Lumen Studio
Amara has spent twelve years designing products used by millions, and the last five building design systems for teams of every size. She teaches the way she works: small steps, real files and plenty of critique.
Reviews
4.9
Course rating
The best structured course I've taken. Each lesson builds on the last, and the projects are genuinely useful at work.
Finally clicked for me. Loved the exercises and how quickly questions got answered.
Great content and pacing. I'd love a few more advanced examples in the last module.
Questions
Do I need any experience?
Each course lists its level. Beginner courses assume nothing; intermediate ones expect you to know the basics, and the first module recaps them.
How long do I have access?
For life. Paid courses are yours to keep, including future updates. Plus members keep access while subscribed.
Do I get a certificate?
Yes. Finish every lesson and you get a certificate with your name, the course and its length, ready to share.
What if it isn’t for me?
Paid courses come with a 30-day money-back guarantee, no questions asked.