Claude Code + Figma Design System (Designer Workflow Test)

I used Claude Code to design directly in Figma using real design system components. This is a full workflow test to see how AI actually handles components, structure, and real product UI.

I also touched on Figma Skills and how they fit into the workflow.

🔗 KEY LINKS
📣 JOIN THE COMMUNITY: https://uicollective.co/
❎ Follow me on X: https://x.com/KirkMDesign
Figma article: https://www.figma.com/blog/the-figma-canvas-is-now-open-to-agents/
Figma Skills: https://www.figma.com/community/skills

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/

🔗 VIDEOS TO WATCH
Build a Design System: https://youtu.be/opTANvl9G1g
Complex Design System Setup: https://youtu.be/L-tpK7Eeuow
AI & Design Systems: https://youtu.be/XfezMs8B-O8
Design with Claude Code: https://youtu.be/JMQ0X_si144

🔗 MORE LINKS
Let us build or fix your design system: https://designsystemlabs.co/
kirkland@uicollective.co
📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective

0:00 An Introduction
0:55 Connecting Figma MCP
1:17 Figma Skills
2:22 Adding Figma Skill to Claude
3:01 Adding Second Figma Skill
3:56 Building AI Design With Our Design System
5:48 Reviewing Claude Code Output
7:00 What to Know About This Workflow
8:25 Outro