Figma’s NEW Design System Guidelines | Crash Course

Figma’s NEW Design System Guidelines | Crash Course

26.1K views · 2026-10-19 UI Design
AI WORKFLOWS & MORE: https://uicollective.co/
Follow me on X: https://x.com/KirkMDesign
Learn Design Systems: https://youtu.be/lsgVRCJ4fko

Learn how to set up and use Figma’s new Design System Guidelines in this practical crash course. We’ll cover documenting your components, defining usage rules, and giving AI clearer instructions to follow your design system.

🔗 OTHER VIDEOS TO WATCH
Learn AI Design: https://youtu.be/r-MPiu0E4W4
Build a Design System: https://youtu.be/opTANvl9G1g
Complex Design System & Figma Variable Setup: https://youtu.be/L-tpK7Eeuow
Build a Design System (Full Course): https://youtu.be/opTANvl9G1g
Train Claude on Your Design System: https://youtu.be/VezxOhvoXqU
Design to Developer Handoff: https://youtu.be/ALkqhXv0GPk
Multi-Brand Design System Setup: https://youtu.be/EyeO-yWSkYE
Responsive Design: https://youtu.be/NzFXc6PULh8

🔗 MORE LINKS
➡️ WORK WITH US: We help enterprises make their Design Systems AI ready: https://designsystemlabs.co/
Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective
Need a design system? (also included in the academy): https://collectivekit.co/
kirkland@uicollective.co

0:27 Setting Up Multi-Step Components
6:29 Working With Figma Variables
7:58 Defining Design System Rules
11:30 Defining Typography Guidelines
13:19 Border Widths, Corner Radii & More
14:32 Defining Spacing Guidelines