Design System & Figma Variable Set Up - Full Tutorial

UI Collective July 28, 2025
Video Thumbnail
UI Collective Logo

UI Collective

@uicollectivedesign

About

Welcome to the premier destination for design system training and more. We have years of experience building enterprise design systems and aim to bring the same knowledge, to you. Join our Slack channel to chat with us!

Video Description

If you’re building an enterprise‑grade design system or trying to keep a fast-growing product consistent, this video walks through a complete Figma Variables setup—collections, modes, naming, tokens, and the workflows that keep teams sane at scale. What you’ll learn: ➡️ How to structure color, type, spacing, and mapped tokens with Figma Variables ➡️ Mapping variables to components, themes, and states without chaos ➡️ Governance tips for large teams ➡️ Accessibility + compliance considerations (WCAG, dark mode, contrast) ➡️ Real-world pitfalls I see inside banks, fintech, and SaaS orgs and how to avoid them 🔗 Links!! 📣 Purchase our academy: https://uicollective.co/academy ↪️ Need a design system? (also included in the academy): https://collectivekit.co/ 📣 Work with me: https://kirkmcneill.co/ Dive deeper into Jumper & Spacing Variables: https://youtu.be/ZI1UsJhmZzw Multi-brand design system deep dive: https://youtu.be/A8cmvTt4bWM 📕 Chapters 0:00 An Introduction 2:08 Approaches to Figma Variable & Design Token Architecture 4:10 Brand Collection 8:31 Building Color Scales 22:10 Edge Cases 24:08 Font Variables 29:34 Scale Introduction 31:45 Building a Scale 41:03 Alias Collection 41:38 Why use an Alias Collection? 42:29 What else goes into an Alias Collection 43:33 Building an Alias Collection 49:27 Border Width Variables 51:37 Border Radius Variables 53:16 Font Variables inside Alias Collections 54:30 Adding Another Brand 56:44 Mapped Collection Introduction 57:14 Text Variables 1:02:33 Status Text Variables 1:08:33 Icon Variables 1:11:30 Surface Variables 1:15:48 Subtle Variables Introduction 1:17:28 Surface Status Variables 1:19:09 General Surface Variables 1:20:57 Border Variables 1:26:36 General Border Variables 1:27:38 Creating Dark Mode Variables 1:32:52 Multi-Brand Approaches to Design Tokens 1:36:56 Responsive Collection Introduction 1:38:59 Setting Up Responsive Collection 1:43:45 Building a Type Scale for Desktop 1:46:03 Adding Type Scale to Responsive Collection 1:49:05 Line Height & Paragraph Spacing Variables 1:54:34 Mobile Type Scale Build 1:58:02 Identifying Spacing Variables 2:00:10 Jumper & Spacing Variable Build 2:03:21 Outro #DesignSystem #FigmaVariables #UXDesign #ProductDesign #DesignOps

Essential Figma Tools

AI-recommended products based on this video

Loading...
VILVA 4K Portable Monitor, 15.6'' IPS 3840x2160 UHD Computer Monitor, 100% Adobe RGB Gaming Monitor USB C HDMI Portable Travel Display w/Speakers Smart Cover for Laptop Xbox PS4 Switch Phone Mac

VILVA 4K Portable Monitor, 15.6'' IPS 3840x2160 UHD Computer Monitor, 100% Adobe RGB Gaming Monitor USB C HDMI Portable Travel Display w/Speakers Smart Cover for Laptop Xbox PS4 Switch Phone Mac

(4)
$329.40
FREE delivery Aug 12 - 14Only 10 left in stock.
Loading...
MSI Clutch GM08 4200 DPI, Accurate Optical Sensor, Durable Build Quality, Adjustable Weight System, Dragon Scale Design Side Grips, On The Fly DPI Changing, Optical Wired Gaming Mouse with Red LED

MSI Clutch GM08 4200 DPI, Accurate Optical Sensor, Durable Build Quality, Adjustable Weight System, Dragon Scale Design Side Grips, On The Fly DPI Changing, Optical Wired Gaming Mouse with Red LED

(1,282)
$20.99
FREE delivery Sat, Jan 3 on your first order
100+ bought in past month
Loading...
iSpring RCC7, NSF Certified, High Capacity Under Sink 5-Stage Reverse Osmosis Water Filter, RO Drinking System, 75 GPD, Brushed Nickel Faucet, Patented Top-Mounted Faucet Design for Easy Installation

iSpring RCC7, NSF Certified, High Capacity Under Sink 5-Stage Reverse Osmosis Water Filter, RO Drinking System, 75 GPD, Brushed Nickel Faucet, Patented Top-Mounted Faucet Design for Easy Installation

(19,760)
$316.00
FREE delivery Tue, Sep 23
100+ bought in past month
Loading...
MSI Clutch GM08 4200 DPI, Accurate Optical Sensor, Durable Build Quality, Adjustable Weight System, Dragon Scale Design Side Grips, On The Fly DPI Changing, Optical Wired Gaming Mouse with Red LED

MSI Clutch GM08 4200 DPI, Accurate Optical Sensor, Durable Build Quality, Adjustable Weight System, Dragon Scale Design Side Grips, On The Fly DPI Changing, Optical Wired Gaming Mouse with Red LED

(1,282)
$20.99
FREE delivery Sat, Jan 3 on your first order
100+ bought in past month
Loading...
iSpring RCC7, NSF Certified, High Capacity Under Sink 5-Stage Reverse Osmosis Water Filter, RO Drinking System, 75 GPD, Brushed Nickel Faucet, Patented Top-Mounted Faucet Design for Easy Installation

iSpring RCC7, NSF Certified, High Capacity Under Sink 5-Stage Reverse Osmosis Water Filter, RO Drinking System, 75 GPD, Brushed Nickel Faucet, Patented Top-Mounted Faucet Design for Easy Installation

(19,760)
$316.00
FREE delivery Tue, Sep 23
100+ bought in past month
Loading...
100PCS Nylon Universal Cable Tie Buckle – Heavy Duty Self-Locking Zip Ties Holder with Pin & Button Design, Plastic Cable Ties Tool Fasteners Car Body, UV Resistant Zipties

100PCS Nylon Universal Cable Tie Buckle – Heavy Duty Self-Locking Zip Ties Holder with Pin & Button Design, Plastic Cable Ties Tool Fasteners Car Body, UV Resistant Zipties

(15)
$7.00$6.90
FREE delivery Aug 20 - 22
500+ bought in past month
Loading...
Nylon Universal Cable Tie Buckle, Heavy Duty Self-Locking Zip Ties Holder with Pin & Button Design, Multipurpose Plastic Cable Ties Tool for Car Repair, UV Resistant Zipties for Auto Fixing(100pcs)

Nylon Universal Cable Tie Buckle, Heavy Duty Self-Locking Zip Ties Holder with Pin & Button Design, Multipurpose Plastic Cable Ties Tool for Car Repair, UV Resistant Zipties for Auto Fixing(100pcs)

(0)
$9.60$8.60
FREE delivery Jun 16 - 19
Loading...
Windshield Repair kit, DIY Glass Cracked Repair Kits, Easy to Use Automotive Glass Nano Repair Fluid, Scratch Chip Cracks Repair Kit (2 Pack) (Black)

Windshield Repair kit, DIY Glass Cracked Repair Kits, Easy to Use Automotive Glass Nano Repair Fluid, Scratch Chip Cracks Repair Kit (2 Pack) (Black)

(34)
$8.70
FREE delivery Fri, Feb 13 on your first order
300+ bought in past month
Loading...
Windshield Repair kit, DIY Glass Cracked Repair Kits, Easy to Use Automotive Glass Nano Repair Fluid, Scratch Chip Cracks Repair Kit (2 Pack) (Black)

Windshield Repair kit, DIY Glass Cracked Repair Kits, Easy to Use Automotive Glass Nano Repair Fluid, Scratch Chip Cracks Repair Kit (2 Pack) (Black)

(41)
$8.18
Prime
800+ bought in past month