Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

My Figma to AI Code plugin is live Turn your designs into production-level code generated by Claude AI. Create React components, SwiftUI prototypes, HTML+CSS pages, Tailwind styles with custom prompts. Preview for responsiveness and export fully working code to Cursor and Xcode. It's free with your own API keys

Meng To

158,287 subscribers

75,947 views • 1 year ago •via X (Twitter)

Science & Technology Education Arts

Anya Rossi• Live Now

Private livecam show

10 Comments

Nathalie 😻1 year ago

can i generate code for this effect on figma ? thank you

Meng To1 year ago

Doesn't support threeJS yet. Could be a cool idea.

Aksonvady1 year ago

Congratulations!

Tyler Nishida1 year ago

Can't figure out what's wrong, when using Anthropic API, i get error 500. With OpenAI API, i get property 0 undefined. Any thoughts on what might be causing these issues?

Meng To1 year ago

Can you check if you have a credit balance?

Manoj Kumar 🇮🇳 🇮🇪1 year ago

Congrats. This is EASILY one of the best AI based plug-ins of this year. Well done 👏👏

Meng To1 year ago

Oh have you tried it? Thanks so much!

Alex Siclari1 year ago

Is Vue going to be on the list?

Meng To1 year ago

Can add it!

Felix1 year ago

This is an awesome plugin. Turning designs directly into clean, production-ready code is the way to go and a game changer. You might find Qodo AI handy for reviewing and refining the generated code. Pairing tools for smoother workflows is always great. Amazing work here!

Related Videos

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.

Meng To

220,472 views • 1 year ago

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.

Meng To

171,513 views • 1 year ago

Figma just became obsolete. one-shots entire UI designs using your Claude Code subscription. - MCP connects to Cursor, Claude Code, or Codex - Fully editable designs - Export to Figma or PNG The kicker? It's completely free right now.

Figma just became obsolete. one-shots entire UI designs using your Claude Code subscription. - MCP connects to Cursor, Claude Code, or Codex - Fully editable designs - Export to Figma or PNG The kicker? It's completely free right now.

Sanket 🛠️ClawKraft

37,940 views • 4 months ago

I'm building my own AI chat app in Cursor It can voice-to-text in your fav apps, with custom prompts. Can chat with gpt-4o, Claude, Gemini and even local/offline models like DeepSeek. Fully native written in SwiftUI. It's free with your API keys. Going to launch this week.

I'm building my own AI chat app in Cursor It can voice-to-text in your fav apps, with custom prompts. Can chat with gpt-4o, Claude, Gemini and even local/offline models like DeepSeek. Fully native written in SwiftUI. It's free with your API keys. Going to launch this week.

Meng To

37,404 views • 1 year ago

Today we’re launching an experimental @Figma plugin that will convert your design into runnable code. Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.

Today we’re launching an experimental @Figma plugin that will convert your design into runnable code. Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.

Replit ⠕

524,398 views • 2 years ago

Figma meets Claude Code! Pencil is an infinite design canvas that runs parallel design agents locally. → Turn designs into code → Runs locally with Claude Code → Works with VSCode, Cursor 100% free, no subscription

Figma meets Claude Code! Pencil is an infinite design canvas that runs parallel design agents locally. → Turn designs into code → Runs locally with Claude Code → Works with VSCode, Cursor 100% free, no subscription

Alvaro Cintas

387,367 views • 3 months ago

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.

Claude

2,593,201 views • 8 months ago

Prompt builder to generate designs with live preview Remix from 780+ templates, iterate quickly and bring your UI code to cursor or figma. I took 7 days to completely recode everything from Swift to React. 50k lines of code. With AI, the platform code is almost irrelevant since you transfer everything. What a time to be alive.

Prompt builder to generate designs with live preview Remix from 780+ templates, iterate quickly and bring your UI code to cursor or figma. I took 7 days to completely recode everything from Swift to React. 50k lines of code. With AI, the platform code is almost irrelevant since you transfer everything. What a time to be alive.

Meng To

57,233 views • 1 year ago

Introducing Reweb 2.0 - The Cursor & Figma baby Generate, edit & explore designs with AI. Export React and shadcn code. Available today in open beta.

Introducing Reweb 2.0 - The Cursor & Figma baby Generate, edit & explore designs with AI. Export React and shadcn code. Available today in open beta.

Mattia

93,790 views • 11 months ago

This is my Figma to SwiftUI code workflow I couldn't find a good way to turn my Figma designs to Xcode so I built a plugin. It took roughly a day to create with Claude AI. A few more days to add additional features like Save file, Fast forward, Preview options, advanced settings, a ton of testing and of course shipping/feedback. We're at a point where we can built our own tools to complete a workflow.

This is my Figma to SwiftUI code workflow I couldn't find a good way to turn my Figma designs to Xcode so I built a plugin. It took roughly a day to create with Claude AI. A few more days to add additional features like Save file, Fast forward, Preview options, advanced settings, a ton of testing and of course shipping/feedback. We're at a point where we can built our own tools to complete a workflow.

Meng To

51,659 views • 1 year ago

Announcing Visual Copilot 2.0 Turn Figma designs into interactive applications using your code, components, and data with natural language

Announcing Visual Copilot 2.0 Turn Figma designs into interactive applications using your code, components, and data with natural language

Steve (Builder.io)

32,968 views • 1 year ago

UI Components Handbook Collection of popular user interface components with guides on how to use them, Figma design samples & code snippets (HTML/Tailwind CSS)

UI Components Handbook Collection of popular user interface components with guides on how to use them, Figma design samples & code snippets (HTML/Tailwind CSS)

Nick Babich

120,191 views • 2 years ago

Play to Xcode is here! Ship your projects in Play to the App Store. › Export your styles, components, pages, and entire app to Xcode › All your interactions and logic in Play carry over 1:1 to Xcode › Use real data by loading in JSON files or connect to your own APIs › Create AI features in Play by tapping into popular APIs like OpenAI › Export to SwiftUI or UIKit and easily mix with your existing codebase › Keep your app up to date by simply updating your Swift package Learn more and try it today!

Play to Xcode is here! Ship your projects in Play to the App Store. › Export your styles, components, pages, and entire app to Xcode › All your interactions and logic in Play carry over 1:1 to Xcode › Use real data by loading in JSON files or connect to your own APIs › Create AI features in Play by tapping into popular APIs like OpenAI › Export to SwiftUI or UIKit and easily mix with your existing codebase › Keep your app up to date by simply updating your Swift package Learn more and try it today!

Play

175,664 views • 1 year ago

Today is the day! Our most requested feature, design → code generation, is live: Go from idea → design → code in under a minute. You can now export generated UI designs to Tailwind CSS with Galileo. The fastest way to bring your ideas to life. 🚀

Today is the day! Our most requested feature, design → code generation, is live: Go from idea → design → code in under a minute. You can now export generated UI designs to Tailwind CSS with Galileo. The fastest way to bring your ideas to life. 🚀

Stitch by Google

26,103 views • 2 years ago

BREAKING 🚨: Upcoming API Playground preview on Anthropic Workbench and a new analytics page for Claude Code. What % of your code is AI-generated? "coming soon" 👀

BREAKING 🚨: Upcoming API Playground preview on Anthropic Workbench and a new analytics page for Claude Code. What % of your code is AI-generated? "coming soon" 👀

TestingCatalog News 🗞

14,242 views • 10 months ago

What if AI could turn your Figma designs into fully interactive, data-connected applications? Announcing Visual Copilot 2.0: make Figma designs real, using your actual code, data, and APIs. 🧵👇

What if AI could turn your Figma designs into fully interactive, data-connected applications? Announcing Visual Copilot 2.0: make Figma designs real, using your actual code, data, and APIs. 🧵👇

Builder.io

16,999 views • 1 year ago

I built a free Figma to React plugin used by Lovable! In 1 click you can convert your Figma design into React + Tailwind CSS code They said it had better code gen than even paid plugins like Anima, Builderio, Framer, etc. but no one knew about it :( ✅ Try Figroot (it's completely free) Like + comment to help me share it 🫶

I built a free Figma to React plugin used by Lovable! In 1 click you can convert your Figma design into React + Tailwind CSS code They said it had better code gen than even paid plugins like Anima, Builderio, Framer, etc. but no one knew about it :( ✅ Try Figroot (it's completely free) Like + comment to help me share it 🫶

patti

16,274 views • 5 months ago

Introducing MagicPath, an infinite canvas to create, refine, and explore with AI. Create beautiful components and functional apps, while providing production ready code. Available today, free, for everyone. The Cursor moment for design is here.

Introducing MagicPath, an infinite canvas to create, refine, and explore with AI. Create beautiful components and functional apps, while providing production ready code. Available today, free, for everyone. The Cursor moment for design is here.

Pietro Schirano

1,879,641 views • 1 year ago

Introducing CodeRabbit Plugin for Claude Code! The CodeRabbit plugin for Claude Code creates an autonomous AI development workflow, helping you write and fix code without manual intervention. Type /coderabbit:review (or just say “review my code”) to get AI-powered fixes directly in your dev flow! Try it today, it’s free!

Introducing CodeRabbit Plugin for Claude Code! The CodeRabbit plugin for Claude Code creates an autonomous AI development workflow, helping you write and fix code without manual intervention. Type /coderabbit:review (or just say “review my code”) to get AI-powered fixes directly in your dev flow! Try it today, it’s free!

CodeRabbit

27,190 views • 4 months ago

You can build iOS apps with Cursor and Claude AI even as a beginner You got SwiftUI for UI/animations, GitHub Copilot for code completion, ChatGPT for reading files in Xcode and Cursor Composer for writing code for you. I'm teaching all that in my new course

You can build iOS apps with Cursor and Claude AI even as a beginner You got SwiftUI for UI/animations, GitHub Copilot for code completion, ChatGPT for reading files in Xcode and Cursor Composer for writing code for you. I'm teaching all that in my new course

Meng To

143,981 views • 1 year ago