Build Design Tokens & Figma Variables with AI
Design tokens and Figma variables aren’t new.The way we build them is.
In this video, I walk through the AI-first workflow I’m actually using to generate design tokens and wire them into Figma without manually naming or over-engineering everything upfront.
🔗 KEY LINKS
📣 JOIN THE COMMUNITY: https://uicollective.co/
❓ 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 VIDEOS
Build a Design System: • Build a Design System - Full Course
Complex Design System Setup: • Design System & Figma Variable Set Up - Fu...
Design Tokens Intro: • Design Tokens for Dummies | A Complete Guide
🔗 MORE LINKS
@Figma MCP Catalog: https://www.figma.com/mcp-catalog/
Let us build or fix your design system: https://designsystemlabs.co/
[email protected]
0:00 An Introduction
2:53 Connecting Figma MCP
4:26 Intro to the Figma Variable Collections
8:57 Building Cursor Rules
10:35 Brand Collection Rules
14:48 Alias Collection Rules
20:21 Mapped Collection Rules
24:41 Responsive Collection Rules
27:47 Using Chat GPT to Refine Rules
28:29 Refining Rules in Cursor
33:18 Building a Reusable Cursor AI Command
38:39 Figma Color Scale Prep
40:24 Building Our Design Tokens
42:18 Figma’s Native Token Import
44:41 Uploading to Tokens Studio
45:34 Refining our Design Tokens
47:05 Connecting to Figma Variables
49:46 Combining Collections
52:09 Outro