Build a Design System - Full Course
UI Collective
Builds a complete design system in Figma, starting from variables. The first hour sets up design tokens in layers (brand, alias and mapped collections), with color scales, a type scale, dark mode and responsive values. The rest builds about twenty components on top of those tokens, from buttons and inputs to menus, tabs and breadcrumbs. You should know the Figma basics first.
What you'll learn
- Organizing design tokens into brand, alias and mapped collections
- Building color scales and a type scale with Figma variables
- Adding dark mode and multi-brand support
- Scoping variables so they only appear where they apply
- Building form controls and navigation components with variants
