Перейти к содержимому

Design to Code with Figma MCP and Cursor | Step-by-Step Tutorial

Sergei Chyrkov

0:00 / 0:00

Design to Code with Figma MCP and Cursor | Step-by-Step Tutorial

66 058 просмотров · 9 мес. назад
Sergei Chyrkov
24,4 тыс. подписчиков
66 058 просмотров · 9 мес. назад
🛠️ Get a copy of Figma file: https://buymeacoffee.com/sergeichyrko... ▶️ View code on Github: https://github.com/chyrkov/ez-banko 👉 Get Cursor: https://cursor.com/referral?code=MTHG... 👉 Figma MCP configuration: https://www.figma.com/mcp-catalog/ 💌 Join my newsletter and learn more: https://sergeichyrkov.com/learn In this video I'll show you how to transfer your design from Figma to code using Figma MCP and Cursor. I'll explain step-by-step how to set up Figma MCP server and connect it to Cursor. Also I will show that you can build a real iOS app from your design with Figma MCP and Cursor and preview live app in iOS simulator. ______________________________ 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:36 — design file overview 4:08 — set up Figma MCP 6:17 — send designs to Cursor 8:47 — design system JSON explained 9:33 — first results 10:48 — add component variant with Figma MCP 12:15 — prompt to create extra screen 13:54 — prompt to create iOS app 16:02 — app 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/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 #figmamcp #cursor #ai