Design Systems - Build a Design System - Full Course

Learn how to build a complete Figma design system from scratch in this full course. Whether you’re a beginner or an experienced designer, this step-by-step guide covers everything you need; from variables, tokens, and auto layout to advanced component structures, documentation, and scaling your system for enterprise teams. This is not just theory....it’s hands-on, practical, and rooted in real design system workflows. Perfect for UI/UX designers, product designers, and anyone building with Figma who wants to level up their skills. 👉 Subscribe for more Figma tutorials, design system tips, and full courses 📣 Join the Community: https://uicollective.co/ 🚨 Support UI Collective & join the academy: https://uicollective.co/academy ❓ Why Join UI Collective Academy? Get access to premium courses, premium downloads, and so much more on the way (I am largely building this solo...trying to make design education available for all, support goes a long way!) ↪️ Need a design system? (also included in the academy): https://collectivekit.co/ 🔗 OTHER LINKS 📣 Let us build or fix your design system: https://designsystemlabs.co/ ✉️ kirkland@uicollective.co My LinkedIn (not accurate): https://www.linkedin.com/in/kirk-mcneill-km/ Our Original Series: https://youtu.be/HNJmWKndUA4 Agenda 0:00 An Introduction 0:49 Design Token Setup - Intro 4:17 Brand Collection 7:41 Color Scales for our Design System 9:52 Building a Color Scale 11:37 Building the Brand Collection 19:39 Font Variables 22:45 Building a Scale 26:45 Alias Collection Intro 29:42 Building the Alias Collection 33:12 Border With & Radius Variables 34:32 Multi-Brand Design System Setup 38:45 Adding White & Black 39:50 Mapped Collection Intro 41:48 Text Variables 45:15 Icon Variables 46:20 Surface Variables 49:02 Border Variables 51:32 Building Dark Mode 54:28 Building a Type Scale 57:27 Responsive Collection 1:05:51 Building Text Styles 1:14:35 Material 3 Icon Library 1:14:48 Scoping Your Figma Variables 1:16:53 Building a Button Component 1:23:45 Adding Button Variants 1:27:28 Building a Label Component 1:31:09 Building a Field Component 1:34:53 Adding Field Variants 1:38:27 Building an Input Component 1:42:57 Build a Menu Component 1:54:00 Build a Checkbox 2:00:30 Build a Radio Button 2:05:53 Build a Switch 2:14:43 Build a Text Area 2:20:02 Build a Tab Bar 2:26:47 Build a Button Group 2:32:09 Build a Link 2:35:44 Build a Breadcrumb 2:37:36 Build an Avatar 2:44:07 Build a Tag 2:48:47 Build a Loader 2:52:56 Build a Badge 2:56:23 Build a Progress Bar 2:59:50 Build a Progress Circle 3:02:19 Build a Snackbar 3:08:57 Build a Carousel 3:13:47 Build a Button Icon 3:15:26 Build a Table 3:30:19 Publishing & Subscribing to a Design System Thanks for your support everyone! Be sure to subscribe for more. #Figma #DesignSystem #UIDesign