Figma Make or Figma MCP? — Design to Code Tutorial

💌 Join my newsletter and learn more: https://sergeichyrkov.com/learn In this tutorial I'll walk through how to use Figma Make and how to set up Figma MCP with Cursor. We'll look at two use cases — hotel card and a dashboard. In this video, you'll learn: ✅ How to use Figma Make ✅ How to set up the MCP server in Figma ✅ How to connect it to Cursor AI ✅ How to convert your designs into code ✅ What is the difference between Figma Make and Figma MCP Whether you're a designer, developer, or product builder, this tutorial will help you streamline your workflow and boost productivity. 👉 Figma MCP documentation: https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server Other useful video: How to set up design system with design tokens: https://youtu.be/tvObuIcAooE Make interactive design with MCP: https://youtu.be/PPqt_xLg_5c ______________________________ 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:41 — Design overview 2:44 — How to send design to Figma Make 3:52 — How to set up MCP Server 7:30 — First results in Figma Make 8:10 — First results in Cursor 9:56 — Apply changes in Cursor 10:35 — Dashboard design example in Figma Make 11:23 — Dashboard design example in Cursor 11:47 — Second result in Figma Make 12:51 — Add overlay screen in Figma Make 13:58 — Overlay result 14:05 — Figma Make Code and Features overview 15:00 — Second result in Cursor 15:31 — My final thoughts ______________________________ 😍 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 #mcp #designtocode #ai #cursor