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.

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 ⠕

234,484 subscribers

524,418 views • 2 years ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

Replit ⠕2 years ago

Try it now:

Replit ⠕2 years ago

Read more about how to use the plugin:

Replit ⠕2 years ago

If you’d prefer to learn more about the Figma to Replit plugin IRL, we’re hosting a Prototyping on Replit event in San Francisco on March 4th. Register here:

Florian S2 years ago

@figma Amazing stuff! Use @builderio to generate Figma design, then replit to generate app 🔥🔥🔥

Jordan Singer2 years ago

@figma figma x replit 🤝

˗ˏˋ rogie ˎˊ˗2 years ago

@figma hot damn, replit.

ST2 years ago

I believe you meant "existing project"

BowTied SaaS Guy2 years ago

@wagieeacc @figma Can we skip the middleman and get a Figma plugin that will sell my code to users and deposit cash into my bank.

homanp2 years ago

@figma 🔥🔥🔥

Jana Iris2 years ago

@zoink @figma Damn. That’s cool. 😍

Related Videos

Convert Figma to Code with AI. – your AI frontend engineer 1. install VS code extension 2. upload Figma file 2. get full code Superflex analyzes your code first, then suggests context-aware code.

Convert Figma to Code with AI. – your AI frontend engineer 1. install VS code extension 2. upload Figma file 2. get full code Superflex analyzes your code first, then suggests context-aware code.

Pratham

35,700 views • 1 year ago

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams

Peter Yang

77,115 views • 2 months ago

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →

Figma

141,230 views • 2 years ago

Figma Make, now on your local code In limited beta starting today, you can visually edit and ship changes by connecting Make to your codebase At Figma, we use our products to design in every way: design layers, prototypes, and now, production code

Figma Make, now on your local code In limited beta starting today, you can visually edit and ship changes by connecting Make to your codebase At Figma, we use our products to design in every way: design layers, prototypes, and now, production code

Figma

393,018 views • 21 days ago

YC W23's CodeParrot (YC W23) converts Figma designs and screenshots into production-ready code, so developers can build stunning UI lightning fast. Share your Figma files and set your code preferences, and CodeParrot will have your screens ready in minutes.

YC W23's CodeParrot (YC W23) converts Figma designs and screenshots into production-ready code, so developers can build stunning UI lightning fast. Share your Figma files and set your code preferences, and CodeParrot will have your screens ready in minutes.

Y Combinator

53,400 views • 2 years ago

Introducing Bifrost, a tool that uses AI to turn anything from Figma into clean React code automatically. How it works: - Generates usable code for anything in Figma - Drops the code directly into your code editor - Learns how to structure code just like yours 1/4

Introducing Bifrost, a tool that uses AI to turn anything from Figma into clean React code automatically. How it works: - Generates usable code for anything in Figma - Drops the code directly into your code editor - Learns how to structure code just like yours 1/4

kartik

756,079 views • 3 years ago

Code → design → code Generate design files from code, collaborate in @Figma, and implement updates all within Codex without breaking your flow.

Code → design → code Generate design files from code, collaborate in @Figma, and implement updates all within Codex without breaking your flow.

OpenAI Developers

241,291 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,594,197 views • 8 months 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

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

UI/UX Designers, did you know you can convert your PNG images to SVG format and customize the colors directly in Figma? Quick Tracing is a Figma plugin that allows you to easily trace and convert images into vector shapes directly within Figma with just one click.

UI/UX Designers, did you know you can convert your PNG images to SVG format and customize the colors directly in Figma? Quick Tracing is a Figma plugin that allows you to easily trace and convert images into vector shapes directly within Figma with just one click.

Abraham John 🦄🦓

71,682 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 • 6 months ago

Starting today, you will be able to select Gemini 3 Pro as an experimental model in Figma Make It’s early, but we’re already seeing impressive results: → Generate 0→1 results with a broad variety of styles, layouts, and interactions → Accurately translate Figma designs into code-backed prototypes → Iterate and refine with nuance

Starting today, you will be able to select Gemini 3 Pro as an experimental model in Figma Make It’s early, but we’re already seeing impressive results: → Generate 0→1 results with a broad variety of styles, layouts, and interactions → Accurately translate Figma designs into code-backed prototypes → Iterate and refine with nuance

Figma

170,120 views • 7 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,563 views • 4 months ago

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,706 views • 1 year ago

Designers, stop manually prototyping your Figma designs, instead turn your design into realistic prototypes with Figma Make. Here’s my step-by-step process: prepare your Figma design, select the screens and send it to Figma Make, enter a prompt to generate a prototype using the reference design, and in seconds you’ll get a realistic UI prototype that stays true to your original design. Bookmark it for later 💜

Designers, stop manually prototyping your Figma designs, instead turn your design into realistic prototypes with Figma Make. Here’s my step-by-step process: prepare your Figma design, select the screens and send it to Figma Make, enter a prompt to generate a prototype using the reference design, and in seconds you’ll get a realistic UI prototype that stays true to your original design. Bookmark it for later 💜

Abraham John 🦄🦓

29,851 views • 4 months ago

MCP updates in FigJam so you can visualize your systems (and not just read code) → generate_diagram to create architecture diagrams & ERDs → figma-use-figjam skill to add notes, code blocks, and annotations directly to your board → get_figjam tool to read your board & map out next steps

MCP updates in FigJam so you can visualize your systems (and not just read code) → generate_diagram to create architecture diagrams & ERDs → figma-use-figjam skill to add notes, code blocks, and annotations directly to your board → get_figjam tool to read your board & map out next steps

Figma

211,860 views • 1 month ago

That gap between design and production? Closed. 🔁 GitHub Copilot, Visual Studio Code, and Figma now create a continuous loop. With the bidirectional Figma MCP server, Copilot users can: 🔹 Pull design context into code 🔹 Push working UI back to the canvas Connect your canvas and stay in the flow. 👇

That gap between design and production? Closed. 🔁 GitHub Copilot, Visual Studio Code, and Figma now create a continuous loop. With the bidirectional Figma MCP server, Copilot users can: 🔹 Pull design context into code 🔹 Push working UI back to the canvas Connect your canvas and stay in the flow. 👇

GitHub

113,033 views • 3 months ago

Say goodbye to leaving Figma just to use AI. Today, we're bringing powerful AI agents directly into your Figma canvas. No terminal. No MCP configs. No developer setup. Anima Agent is a chat inside Figma. Describe what you want → it builds on the canvas, using your actual design system. Install the plugin. Start designing. That's it.

Say goodbye to leaving Figma just to use AI. Today, we're bringing powerful AI agents directly into your Figma canvas. No terminal. No MCP configs. No developer setup. Anima Agent is a chat inside Figma. Describe what you want → it builds on the canvas, using your actual design system. Install the plugin. Start designing. That's it.

Anima

13,035,263 views • 2 months ago