There's a Better Way Than Figma MCP
⚙️ try html.to.design Figma plugin for FREE: https://www.figma.com/community/plugi...
📖 MCP setup docs: https://html.to.design/docs/mcp-tab
👉 Check out all Figma plugins by (div)Riots: https://divriots.com/lsa?aff=GO290
💌 Join my newsletter and learn more: https://sergeichyrkov.com/learn
Stop rebuilding AI-generated UI from scratch in Figma. In this video, I show you the exact workflow I use to take a Claude Design UI and transfer it into Figma as a fully production-ready file — complete with auto layouts, variables, color styles, and font styles — in seconds. Great alternative to Figma MCP.
The secret is the html.to.design MCP connector, which bridges Claude and Figma so your designs land perfectly structured, not as a chaotic mess. I also show you two bonus use cases: cloning any live website into Figma using the Chrome extension, and importing a URL directly through the plugin.
______________________________
Other useful stuff:
👉 Best Vibe Coding Tool — Cursor: https://cursor.com/referral?code=MTHG...
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Record your screen like a Pro — https://screenstudio.lemonsqueezy.com...
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referra...
______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — / sergeichyrkov
▸ Instagram — / chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — / sergeichyrkov
______________________________
📝 Chapters:
0:00 — introduction
1:03 – Setting up Claude Design (claude.ai/design)
1:45 – Loading a custom design system via design.md
2:15 – Prompting Claude to design a Neo Bank dashboard
3:00 – Reviewing the generated dashboard UI
3:30 – Why Figma MCP falls short (slow + no variables)
4:01 – Introducing html.to.design MCP connector
4:30 – Setting up the custom MCP connector in Claude
6:56 – Connecting html.to.design to your Figma file
8:28 – Transferring the Claude Design UI into Figma
10:24 – Checking variables, auto layouts & styles in Figma
12:35 – Bonus: Cloning a live website with the Chrome extension (Tesla demo)
15:30 – Bonus: Importing a URL directly inside Figma (Apple demo)
16:52 – Wrap-up & next steps
______________________________
😍 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/sergeich...
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 #claude #figmatutorial #claudedesign #ai #vibecoding