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.

How to import a Claude prototype into Figma 👇 Claude gets you to a working prototype fast. Don’t rebuild it - quickly bring it into Figma and keep going. Quick demo:

Anima

10,080 subscribers

1,437,799 views • 4 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

2 Comments

Frontman4 months ago

then use Frontman to implement, no developer expertise required. available now for WordPress/Astro/NexstJS/Vite

Anima4 months ago

Link to the plugin >

Related Videos

You can now push what you’re building in Claude Code directly into Figma. With the latest updates to the Figma MCP server, build a working prototype in code, then send it to a Figma canvas to explore multiple versions.

You can now push what you’re building in Claude Code directly into Figma. With the latest updates to the Figma MCP server, build a working prototype in code, then send it to a Figma canvas to explore multiple versions.

Claude

4,322,877 views • 7 months ago

Factory can now push what you’re building directly from code into Figma. Take a working prototype from the codebase, send it to a Figma canvas, and let designers and PMs edit components directly.

Factory can now push what you’re building directly from code into Figma. Take a working prototype from the codebase, send it to a Figma canvas, and let designers and PMs edit components directly.

Factory

29,038 views • 6 months ago

Going from Claude Code to Figma and BACK! Is it any good? 👇

Going from Claude Code to Figma and BACK! Is it any good? 👇

Gary Simon

32,106 views • 7 months ago

AI → Figma in one click ✨ now supports most AI tools natively— bring ChatGPT, Claude, v0, Lovable, you name it, straight into Figma!

AI → Figma in one click ✨ now supports most AI tools natively— bring ChatGPT, Claude, v0, Lovable, you name it, straight into Figma!

‹div›RIOTS

1,539,273 views • 1 year ago

I made Figma, but everything is text. Create a quick wireframe, export as markdown, and chuck it into Claude. Try it out at

I made Figma, but everything is text. Create a quick wireframe, export as markdown, and chuck it into Claude. Try it out at

Daniel Howells

85,512 views • 7 months 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 🦄🦓

31,000 views • 7 months ago

Don’t name your layers. Let Figma AI do that AND → Make your first draft with Make Design → Find the exact visual you’re looking for (or something similar) with Visual/Asset Search → Turn your designs into a working prototype with Make Prototype #Config2024

Don’t name your layers. Let Figma AI do that AND → Make your first draft with Make Design → Find the exact visual you’re looking for (or something similar) with Visual/Asset Search → Turn your designs into a working prototype with Make Prototype #Config2024

Figma

813,117 views • 2 years ago

sketch or design anything and turn it into a functional prototype with the ✨ Build it button inside of Figma and FigJam

sketch or design anything and turn it into a functional prototype with the ✨ Build it button inside of Figma and FigJam

Jordan Singer

480,034 views • 2 years ago

From Claude Design to Figma in 60 seconds: 1. In Claude Design: Present → New tab 2. Copy the link 3. Paste into Anima Agent 4. The agent renders it as editable Figma layers link 👇

From Claude Design to Figma in 60 seconds: 1. In Claude Design: Present → New tab 2. Copy the link 3. Paste into Anima Agent 4. The agent renders it as editable Figma layers link 👇

Anima

1,228,977 views • 5 months ago

Omg... you can turn Claude Code into a pro designer? Apparently you can turn any Figma Board into a Claude Skill... If you want early access to the web app... Reply below 👇 we will DM.

Omg... you can turn Claude Code into a pro designer? Apparently you can turn any Figma Board into a Claude Skill... If you want early access to the web app... Reply below 👇 we will DM.

Learn to Vibecode

74,821 views • 8 months ago

Designers, do you know that you can now turn your Figma design into an interactive prototype 10x faster without prototyping manually. Figma Make is a new AI-powered prompt-to-app tool that transforms designs and ideas into clickable prototypes in minutes. It’s made for designers, builders, and non-technical founders who want to move fast. Bookmark it for later 💜

Designers, do you know that you can now turn your Figma design into an interactive prototype 10x faster without prototyping manually. Figma Make is a new AI-powered prompt-to-app tool that transforms designs and ideas into clickable prototypes in minutes. It’s made for designers, builders, and non-technical founders who want to move fast. Bookmark it for later 💜

Abraham John 🦄🦓

145,429 views • 9 months ago

Relume now works with Figma Sites! You can generate a site in Relume and import it straight into Figma Sites, or build directly with our Figma Library. Learn more:

Relume now works with Figma Sites! You can generate a site in Relume and import it straight into Figma Sites, or build directly with our Figma Library. Learn more:

Relume

14,162 views • 1 year ago

From Claude Design to Figma in 60 seconds: (*updated flow!) 1. In Claude Design: Share → `Export as standalone HTML` 2. Download the file 3. Drop it into the Anima Agent 4. The agent renders it as editable Figma layers

From Claude Design to Figma in 60 seconds: (*updated flow!) 1. In Claude Design: Share → `Export as standalone HTML` 2. Download the file 3. Drop it into the Anima Agent 4. The agent renders it as editable Figma layers

Anima

741,768 views • 4 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

159,965 views • 7 months ago

We just built Figma for Claude Code > Select any element on your local front-end > Edit it like you would in Figma > Apply the changes with Claude Code This is not a demo or waitlist. Try it today.

We just built Figma for Claude Code > Select any element on your local front-end > Edit it like you would in Figma > Apply the changes with Claude Code This is not a demo or waitlist. Try it today.

Quentin Romero Lauro

252,419 views • 7 months ago

Our new color wheel helps you quickly create custom palettes and bring them into the editor with a single click. Try it out ->

Our new color wheel helps you quickly create custom palettes and bring them into the editor with a single click. Try it out ->

Figma

229,207 views • 2 years ago

Figma just shipped the ability to bring UI work done in Claude Code straight into Figma as editable design frames. Use this to explore new ideas in Figma, view multi-page flows on the canvas, or reimagine user experiences.

Figma just shipped the ability to bring UI work done in Claude Code straight into Figma as editable design frames. Use this to explore new ideas in Figma, view multi-page flows on the canvas, or reimagine user experiences.

Thariq

1,328,089 views • 7 months ago

I'm totally rethinking how I prototype with AI after seeing how Atlassian's design system team does it their approach to "templates" and "recipes" in Figma Make is pretty genius 👇

I'm totally rethinking how I prototype with AI after seeing how Atlassian's design system team does it their approach to "templates" and "recipes" in Figma Make is pretty genius 👇

Ridd 🤿

86,137 views • 8 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,599,203 views • 1 year ago

New in Figma Make: Bring styling context from an existing library into Make and specify additional rules to follow to keep things looking consistent

New in Figma Make: Bring styling context from an existing library into Make and specify additional rules to follow to keep things looking consistent

Figma

90,151 views • 1 year ago