Mar 30
Loading video player...
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 💌 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