Skip to main content
Specialized Digital Design

Design Systems in Figma

Build a Figma design system that teams actually use

12 lessons4 modules9h 50m durationbeginner level

Instructor: StretchLearn Faculty

About this course

This course teaches the concrete craft of building and running a design system inside Figma, from the smallest decision (what to name a color) to the organizational one (who is allowed to change it). You will set up a token foundation with Figma variables, primitive and semantic collections, and light and dark modes, then build components that scale using component properties, variant sets, and slots so one button covers dozens of states instead of being copy-pasted. You will make every component resize correctly with auto layout, constraints, and min and max width, then assemble the whole thing into a published library, manage updates and breaking changes, and keep the file performant. Finally you will write the documentation, naming conventions, and contribution and review workflow that decide whether the system is adopted or abandoned. By the end you can take a product team from inconsistent one-off screens to a single library that ships consistent, maintainable UI.

Curriculum

Module 1: What a Design System Is and How to Set the File Up3 lessons
Module 2: Tokens: Variables, Styles, and Theming3 lessons
  • Variables, collections, and modes🔒50m
  • Primitive and semantic token structure🔒50m
  • Light, dark, and multi-brand theming🔒50m
Module 3: Components: Properties, Variants, and Auto Layout3 lessons
  • Component properties and variant sets🔒55m
  • Auto layout, constraints, and responsive behavior🔒55m
  • Nesting, slots, and component architecture🔒50m
Module 4: Publishing, Documentation, and Governance3 lessons
  • Publishing libraries and managing updates🔒50m
  • Documenting components for adoption🔒50m
  • Governance, contribution, and measuring adoption🔒50m
Powered by StretchLearn