Figma just released a massive update: you can now generate UI directly inside your canvas using AI agent (Claude, Cursor) — and the craziest part is that it can use your own design system. This means no more generic AI layouts.

⚙️ How to set up Claude Code and Figma MCP: https://youtu.be/FqQMIQRcdj8
👉 Figma skills: https://www.figma.com/community/skills
👉 Design tokens file (full version): https://chyrkov.lemonsqueezy.com/checkout/buy/1dbeefbe-6925-4a43-a7e5-18d2d3affc57 (Use FANS10 for 10% off)
💌 Need help or want to learn more? Sign up for a mentor session: https://sergeichyrkov.com/learn

You can generate real product UI that already matches your components, styles, and workflow.
In this video, you’ll learn how to set up and use this new feature step by step using Figma, Claude Code, and the terminal.

We’ll cover:
- What the new Figma AI Canvas update is
- How to connect it with Claude Code
- How to generate UI inside Figma using prompts
- How to make the AI follow your design system
- Real workflow examples you can start using today
- How to turn your designs into code
If you're a UI/UX designer, product designer, or frontend developer, this feature can seriously speed up your workflow.

______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
Useful stuff:
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Record your screen like a Pro — https://screenstudio.lemonsqueezy.com?aff=GO290
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referral/am81qn
______________________________
📝 Chapters:
0:00 — introduction
0:37 — how to create a design system library 
3:02 — how to launch Claude Code for you project
5:19 — connect design system with Claude project
8:25 — how to generate design using design system
9:18 — results 
11:26 — how to add Figma skills to Claude Code
14:10 — generate code from Figma design
15:30 — results
______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeichyrkov
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.

______________________________
#figma #ai #claude #vibecoding

YouTube

A walkthrough of using Claude Code with Figma's MCP plugin to generate UI designs that use actual design system components. The workflow involves publishing a Figma library, linking it to a new file, then prompting Claude Code to generate layouts using real component instances from the design system. The generated designs can then be converted to HTML/CSS code, with design tokens automatically applied. Additional community-built Claude skills for design system auditing and token syncing are also covered.

Figma & Claude Just Changed UI Design Forever