About this course
Design scalable, consistent product interfaces by building a real design system in Figma. Learn design tokens, color and typography scales, component libraries, and auto-layout — then document and ship your system so engineering can consume it. Includes hands-on projects building a button, form, and dashboard component set.
Course Content
Design System Foundations
- What is a Design System and Why It Matters15min
- Figma Auto Layout and Constraints15min
- Design Tokens: Color, Spacing, and Type Scales15min
- Naming Conventions and Organization15min
Building Components
- Component Properties and Variants15min
- Project: A Flexible Button System15min
- Project: Forms and Input States15min
- Project: Cards and Lists15min
Patterns and Accessibility
- Dark Mode and Theming15min
- Icons, Illustrations, and Imagery15min
- Accessible Color and Contrast (WCAG)15min
Documentation and Handoff
- Project: A Complete Dashboard Kit15min
- Documenting Components for Engineers15min
- Versioning and Releasing a Design System15min
Free — no credit card required
This course includes:
- AI-generated interactive lessons
- Interactive quizzes and exercises
- Real-time AI teacher discussions
- Whiteboard diagrams and formulas