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/artic...
Other useful video:
How to set up design system with design tokens: • Figma Variables Explained! Build a Scalabl...
Make interactive design with MCP: • Figma MCP + Cursor — Full Tutorial
______________________________
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
______________________________
Useful stuff:
👉 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...
______________________________
📝 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/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 #mcp #designtocode #ai #cursor