Skip to content

PRO TIP Block youtube.com at the DNS level — Pi-hole, NextDNS or your hosts file — but allow youtube-nocookie.com and i.ytimg.com. These tutorials keep playing; the rabbit hole does not.

Learning without distractions

Train Figma AI on Your Design System: Senior Designer Workflow

8.4K views on YouTube

AI WORKFLOWS & MORE: https://uicollective.co/
Build a Design System – Full Course: https://youtu.be/opTANvl9G1g
We help enterprises make their Design Systems AI ready: https://designsystemlabs.co/
All Design System Content: https://www.youtube.com/playlist?list=PLkmvmF0zhgT_8FirlLcTQI01ayjYB-46_

Learn an advanced workflow for syncing Figma AI with your design system. I’ll show how to create a more connected setup, improve consistency, and get better results from AI without drifting away from your design system.

🔗 OTHER SYSTEM VIDEOS TO WATCH
Complex Design System & Figma Variable Setup: https://youtu.be/L-tpK7Eeuow
Design with AI – Full Guide: https://youtu.be/j_ZPV10bu54
Claude Design Video: https://youtu.be/eXlSgQmz02E
Web Design with Claude Code: https://youtu.be/jO-wH4zgJV0

🔗 MORE LINKS
📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective
Claude Design: https://claude.ai/design
Follow me on X: https://x.com/KirkMDesign
Need a design system? (also included in the academy): https://collectivekit.co/
kirkland@uicollective.co

0:00 An Introduction
1:00 Generating Initial Screens
2:55 Components
3:42 Groups of Components
5:49 Why Not to Generate Figma Skills for Each Component
6:18 Initial Prompt and Generating Skills for Component Groupings
10:33 Figma Variables
11:15 Understanding Documentation
13:11 Variable Skill Prompt
15:38 Type Styles
16:43 Type Styles Skill Generation
18:18 Looking at the Edge Cases
20:14 Design System Rules and Debt
22:37 How to Approach This Skill
23:54 Spacing and Shape Skill
25:53 Spacing and Shape in Practice
28:22 Spacing and Shape Variable Skill Generation
29:09 Testing the Output
30:18 Outro