From Figma to Interactive Components in Minutes
One prompt, working prototype.
👋 Get weekly insights, tools, and templates to help you build and scale design systems. More: Design Tokens Mastery Course / YouTube / My Linkedin
Still prototyping in Figma? Oh no no no.
Static pixels lie. Interaction tells the truth.
The second you use component → click, hover, select, you uncover what Figma can’t show:
That your hover states feel off
That your dropdown doesn’t make any sense
That "pretty" doesn’t equal usable
But what do we do? We hand over frames and cross our fingers. 🤡
Figma's MCP changes everything.
I've tested every AI tool that promises to bridge design and code. V0, Bolt, Claude, Lovable, ... Cursor. Each has its strengths, but with Cursor, I got the closest to my design.
I can turn my Figma components into a fully functional prototype in minutes (no developers required). Now I don’t just tell them what we need. I show them, and then we level up together. 🙌
Here's the 20-minute workflow:
1. Set up Figma MCP in Cursor (2 minutes, seriously)
2. Structure your components properly (the secret sauce)
3. Use clear, targeted prompts
4. Pick the right model (more on that below 👇)
5. Generate interactive code (watch the magic)
6. Test, break, fix (the real learning happens here)
What I built in one session:
✅ Tag component with all states and sizes
✅ Dropdown with five variations
Let’s break it down.
1. Set up Figma MCP in Cursor
If you’re lost, watch this video 👇
Okay now that we have FigmaMCP and Cursor set up, we can continue.
2. Structure your components properly
If your file’s a mess, AI gets confused. Utilize auto-layout, Figma variables, named layers, etc.
3. Reuse prompts for fast iterations
Write exactly what you want.
I built a prompt that generates design specification pages for every component. Developers get an overview, designers see the interaction layer, and PMs understand the variations. (Check the prompt below.)
4. Picking the Right AI Model in Cursor
Totally underrated move. The model you pick changes the output a lot.
Cursor lets you switch models on the fly.
Here’s the cheat sheet:
Claude 4 Sonnet: My go-to for generating clean HTML/CSS and React components. Handles JavaScript, TypeScript, Vue, Svelte, etc. Consistent output, understands design intent perfectly.
Gemini 2.5 Pro: Excellent at reading Figma structure and filling gaps in your logic. Slower for initial code generation (based on my experiments), but brilliant for analysis and refinement.
GPT-4o: Handles complex structure and edge cases like a pro. Great for multi-step flows and production-ready components.
Claude 3 Opus: For long prompts and structured thinking. Works fine with component specs, UI tables, and complex state management.
💡 Pro tip: Run the same prompt through multiple models. Compare outputs. Refine your approach. Repeat.
You'll quickly learn what each model excels at and your results will get 10x better.
Real examples
Tag component:
I wanted to test different focus states, because it is impossible to judge in static Figma. With Cursor, I got every state interactive, plus automatically generated specs.
Dropdown component:
Five versions with different search behaviors and row sizes. No more "developer wants this, PM wants that, designer wants something else." Now everyone sees how it actually works.
Here is the recorded walkthrough:
My recommendations
🙅♀️ Don’t paste a Figma link and say “make this.”
Write out what you want. Be specific. Give goals and details.
🙅♀️ Don’t assume AI is magic.
Give it context. Give it feedback.
🙅♀️ Don’t stop after one prompt.
Iterate. Fast. You’ll be shocked how quickly it gets good.
🙅♀️ Don’t settle for “okay, it is fine”
Push. Explore. Make it better.
💡PS. Cursor sometimes just… stops reading FigmaMCP. 🫠
Quit and reopen Cursor, or switch the model. That usually fixes it.
As Darrin Henein (VP Design at Shopify) says:
"There are no more excuses. You can use English for vibe coding."
My Prompt
Sadly I can’t attach my .md file here, but I exported it to the .pdf for you to read it.
More reading material
📚 Figma MCP and the most useful Figma resources for designers
🔗 Keep Airtable and GitHub in sync
Enjoy exploring. ✌️
— If you enjoyed this post, please tap the Like button below 💛 Thank you.
💎 Community Gems
AI-native launched Airtable was launched this week
🔗 Link
Cool example for using Figma Make from Ana Boyer
In 1 prompt she got Figma Make to:
1. Generate primitive color variable scales based on a couple of core hex codes
2. Display those color scales in a table
3. Provide a button for me to export the color variables as a JSON in a format that works well with the Variable Importer/Exporter plugin
🔗 Link
Vitaly Friedman – Inclusive Design Patterns: From Gen-Z To to Aging Audiences – btconf Düsseldorf 25
🔗 Link
Let’s finish this email with funny (but real!) screenshot. Look how much impact Cursor has 🙃 This isn’t a meme. It’s an actual screenshot from Y Combinator’s Spring batch companies page:
