Загрузка видео...

Не удалось загрузить видео

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

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 просмотров • 2 лет назад •via X (Twitter)

Наука и технологии

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля Replit ⠕

Replit ⠕2 лет назад

Try it now:

Фото профиля Replit ⠕

Replit ⠕2 лет назад

Read more about how to use the plugin:

Фото профиля Replit ⠕

Replit ⠕2 лет назад

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 S

Florian S2 лет назад

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

Фото профиля Jordan Singer

Jordan Singer2 лет назад

@figma figma x replit 🤝

Фото профиля ˗ˏˋ rogie ˎˊ˗

˗ˏˋ rogie ˎˊ˗2 лет назад

@figma hot damn, replit.

Фото профиля ST

ST2 лет назад

I believe you meant "existing project"

Фото профиля BowTied SaaS Guy

BowTied SaaS Guy2 лет назад

@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.

Фото профиля homanp

homanp2 лет назад

@figma 🔥🔥🔥

Фото профиля Jana Iris

Jana Iris2 лет назад

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

Похожие видео

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 просмотров • 1 год назад

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 просмотров • 2 месяцев назад

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 просмотров • 2 лет назад

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 просмотров • 21 дней назад

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 просмотров • 2 лет назад

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 просмотров • 3 лет назад

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 просмотров • 3 месяцев назад

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 просмотров • 8 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 6 месяцев назад

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 просмотров • 7 месяцев назад

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 просмотров • 4 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 4 месяцев назад

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 просмотров • 1 месяц назад

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 просмотров • 3 месяцев назад

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 просмотров • 2 месяцев назад