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.

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

171,218 subscribers

220,706 views • 1 year ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

10 Comments

Meng To1 year ago

The plugin has been published. Just waiting for the @figma team 👀 Will link as soon as it's public.

Meng To1 year ago

The plugin is live!

Victor1 year ago

bro just casually dropped the holy grail of design-to-code and said "oh and it's free" like it's nothing 🔥

Meng To1 year ago

To be fair, this is highly reliant on Claude and OpenAI to work well. I just built the plugin. But thank you!

Nick Dobos1 year ago

Would love to try it! Got a link?

Meng To1 year ago

👀

Satyajit Mane1 year ago

I have been following your journey since 2019 on youtube. A lot to learn from you. Biggest fan of your work 😃✌️

Meng To1 year ago

I'm just happy that my work is still relevant after all these years! So much to learn and so many new tools. 🙏

Hello I'm Robie 🚀1 year ago

Where do we get it? I am a paid member for Designcode - is it online?

Meng To1 year ago

First, I thank you. It'll be ready soon!

Related Videos

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

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

76,017 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

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

how to make your ai app not look like it was made with ai (weavy ai, claude, figma etc) use weavy ai to generate custom assets, color systems, and logos across models like flux + ideogram, then compose it properly in figma then paste into claude code/google ai studio etc watch

how to make your ai app not look like it was made with ai (weavy ai, claude, figma etc) use weavy ai to generate custom assets, color systems, and logos across models like flux + ideogram, then compose it properly in figma then paste into claude code/google ai studio etc watch

GREG ISENBERG

153,315 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

Introducing Aura, a chat app for Mac that can do voice-to-text and generate designs. You can speak to any app, use AI models and chat offline. Code mode lets you generate beautiful components, animations, simple sites and share online. It's free with api keys, or with limits.

Introducing Aura, a chat app for Mac that can do voice-to-text and generate designs. You can speak to any app, use AI models and chat offline. Code mode lets you generate beautiful components, animations, simple sites and share online. It's free with api keys, or with limits.

Meng To

24,279 views • 1 year ago

I built a new plugin! You can now trigger Codex from Claude Code! Use the Codex plugin for Claude Code to delegate tasks to Codex or have Codex review your changes using your ChatGPT subscription. Start by installing the plugin:

I built a new plugin! You can now trigger Codex from Claude Code! Use the Codex plugin for Claude Code to delegate tasks to Codex or have Codex review your changes using your ChatGPT subscription. Start by installing the plugin:

dominik kundel

1,282,429 views • 2 months 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

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,417 views • 2 years ago

🌟 Discover the ultimate Tailwind hack! I'm using an amazing Eslint plugin that streamlines your Tailwind CSS code for cleaner, more consistent results. Learn as you code, with intelligent shorthands and organized structure. ▶️ Link: #buildinpublic

🌟 Discover the ultimate Tailwind hack! I'm using an amazing Eslint plugin that streamlines your Tailwind CSS code for cleaner, more consistent results. Learn as you code, with intelligent shorthands and organized structure. ▶️ Link: #buildinpublic

Kristoffer Eriksson

37,437 views • 2 years 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

Building AI agents and tools is getting ridiculously easy! Here is a pretty impressive FREE and Open-Source AI agent builder that runs on your computer. It's a desktop app you can install on Mac or Windows. Link: • Free • 100% no-code: You can type what you want, and the tool will build everything for you. • You can use local models like DeepSeek or Qwen, or connect to cloud models like GPT-4o, Claude, or Gemini with your API key. • You can turn the tools you build into MCP Servers. I recorded a quick video to show you how easy it is to build something from scratch.

Building AI agents and tools is getting ridiculously easy! Here is a pretty impressive FREE and Open-Source AI agent builder that runs on your computer. It's a desktop app you can install on Mac or Windows. Link: • Free • 100% no-code: You can type what you want, and the tool will build everything for you. • You can use local models like DeepSeek or Qwen, or connect to cloud models like GPT-4o, Claude, or Gemini with your API key. • You can turn the tools you build into MCP Servers. I recorded a quick video to show you how easy it is to build something from scratch.

Santiago

56,815 views • 1 year ago

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too

Pablo Stanley

21,415 views • 3 months ago

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:

Lichin Lin

25,124 views • 1 year ago

Claude Code UI is now available in VSCode via CodeGPT extension! 🙌 You can now run Claude Code directly in your editor and control the planning process. You can pause it, edit tasks, or add new ones while Claude is working. This helps keep Claude on track and makes it way more effective since you can adjust things as it goes. Setup: - Download the extensión - Click the Claude Code OAuth - Authorize the extension - Paste your account code to link Claude Code directly - Done ✅ Works on VSCode and JetBrains editors (Android Studio, IntelliJ, PyCharm, etc.) VSCode : Jetbrains:

Claude Code UI is now available in VSCode via CodeGPT extension! 🙌 You can now run Claude Code directly in your editor and control the planning process. You can pause it, edit tasks, or add new ones while Claude is working. This helps keep Claude on track and makes it way more effective since you can adjust things as it goes. Setup: - Download the extensión - Click the Claude Code OAuth - Authorize the extension - Paste your account code to link Claude Code directly - Done ✅ Works on VSCode and JetBrains editors (Android Studio, IntelliJ, PyCharm, etc.) VSCode : Jetbrains:

Daniel San

105,989 views • 9 months ago

Been using Paper MCP with Claude Code today and I’m kind of blown away! I tested importing Figma designs, then iterating on them using live Supabase data (via MCP). It genuinely feels like a glimpse of where design is heading. would love Paper to add something like agentation from Benji Taylor, so Claude Code can target frames and layers directly.

Been using Paper MCP with Claude Code today and I’m kind of blown away! I tested importing Figma designs, then iterating on them using live Supabase data (via MCP). It genuinely feels like a glimpse of where design is heading. would love Paper to add something like agentation from Benji Taylor, so Claude Code can target frames and layers directly.

Gon

72,498 views • 3 months ago

Testing the code generated from your figma designs 👀 You can resize the preview and test for mobile, tablet and desktop. I added zoom, bg color, padding, alignment and export to PNG for sharing. Just in case Claude doesn't center it correctly or give the right background. Fingers crossed that Figma approves this plugin soon 🤞

Testing the code generated from your figma designs 👀 You can resize the preview and test for mobile, tablet and desktop. I added zoom, bg color, padding, alignment and export to PNG for sharing. Just in case Claude doesn't center it correctly or give the right background. Fingers crossed that Figma approves this plugin soon 🤞

Meng To

16,988 views • 1 year ago

How to make Claude Code 10x better: Connect it with a tool that reviews your code and generates prompts for Claude to fix any issues with it automatically. Here is what this looks like:

How to make Claude Code 10x better: Connect it with a tool that reviews your code and generates prompts for Claude to fix any issues with it automatically. Here is what this looks like:

Santiago

98,881 views • 8 months ago

Using Claude Code just got 10x easier. Someone literally built 100+ agents, commands, MCPs, and templates that you can install and use with one command. And it's 100% free to use.

Using Claude Code just got 10x easier. Someone literally built 100+ agents, commands, MCPs, and templates that you can install and use with one command. And it's 100% free to use.

Shubham Saboo

127,222 views • 10 months ago

I built a complex history feature for my Figma to Code plugin in 3 prompts. This is a 30-min tutorial using Claude Code. The difference in code generation between gpt-4o, Claude 3.5 and 3.7 is insane. 3.7 produces near-perfect results and is far more consistent. It's really a designer's best friend, not missing details from the design, like adaptive layout, outlines, spacing, etc. It seems like the new model has great taste now.

I built a complex history feature for my Figma to Code plugin in 3 prompts. This is a 30-min tutorial using Claude Code. The difference in code generation between gpt-4o, Claude 3.5 and 3.7 is insane. 3.7 produces near-perfect results and is far more consistent. It's really a designer's best friend, not missing details from the design, like adaptive layout, outlines, spacing, etc. It seems like the new model has great taste now.

Meng To

32,462 views • 1 year ago