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.

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

Jordan Singer

142,116 subscribers

479,774 views • 2 years ago •via X (Twitter)

Science & Technology Education Arts

Anya Rossi• Live Now

Private livecam show

10 Comments

Jordan Singer2 years ago

it's a widget that lives on the canvas that turns your selection into functional UI here's a demo taking a drawing and making it real

Jordan Singer2 years ago

credit goes to @sawyerhood for sparking the original idea with his explorations

Jordan Singer2 years ago

you can grab the code, swap in your OpenAI API key, and get building!

Sonny2 years ago

@figma interactive build it! 🤯

Jordan Singer2 years ago

@figma sweet!

Brian Lovin2 years ago

@figma There we go!

Mike Gorrell2 years ago

@figma This is crazy. Excited to try it out!

Kunal Bhatia2 years ago

@figma it's time to build.

Thurin2 years ago

@figma Imagine how well this would work with @bubble

Steve | STABILITY Protocol2 years ago

@figma Now add File --> Save to Blockchain with @StabilityInc (No fees, no crypto needed) Authenticate data provenance and protect IP (example use cases)

Related Videos

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

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

812,555 views • 2 years ago

Import web app and websites into Figma Make ✨ Import, remix, vibe-design and prototype new features on the fly

Import web app and websites into Figma Make ✨ Import, remix, vibe-design and prototype new features on the fly

‹div›RIOTS

5,920,339 views • 4 months ago

🗣️ "Help me build an app..." That’s all it takes. Watch Gemini 3 Flash turn a single voice prompt into a functional prototype in the Google Gemini.

🗣️ "Help me build an app..." That’s all it takes. Watch Gemini 3 Flash turn a single voice prompt into a functional prototype in the Google Gemini.

Google

86,695 views • 6 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

Show don’t tell Now you can embed Figma Make prototypes in Figma Design, Figma Slides, and FigJam. Rolling out this week.

Show don’t tell Now you can embed Figma Make prototypes in Figma Design, Figma Slides, and FigJam. Rolling out this week.

Figma

99,144 views • 5 months ago

Updates to the Figma MCP server: → Generate and edit decks in Figma Slides → Build boards with data in FigJam → Roundtrip from code to canvas in Figma Make Now with custom font support and image exports.

Updates to the Figma MCP server: → Generate and edit decks in Figma Slides → Build boards with data in FigJam → Roundtrip from code to canvas in Figma Make Now with custom font support and image exports.

Figma

91,674 views • 10 days 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,563 views • 9 months ago

We've been ramping up usage of AI tools on our design team at Coinbase 🛡️ Two examples: 1. Write a text prompt and get a figma mockup as a starting point for your design 2. Click a button and turn any figma design into front-end code The front-end code it generates adheres to our design system, and is trained on our library of UIs Shout out to 🛡️ tali krakowsky apel🛡️ Blair McKee and the team pushing this forward.

We've been ramping up usage of AI tools on our design team at Coinbase 🛡️ Two examples: 1. Write a text prompt and get a figma mockup as a starting point for your design 2. Click a button and turn any figma design into front-end code The front-end code it generates adheres to our design system, and is trained on our library of UIs Shout out to 🛡️ tali krakowsky apel🛡️ Blair McKee and the team pushing this forward.

Brian Armstrong

520,346 views • 2 years ago

Make Kits, rolling out today → Build and teach Make your design system → Ground your prototype in your project work with Make attachments

Make Kits, rolling out today → Build and teach Make your design system → Ground your prototype in your project work with Make attachments

Figma

134,677 views • 2 months ago

BREAKING: design taste is no longer a moat grab any Mobbin screen and watch Anything turn it into a real app

BREAKING: design taste is no longer a moat grab any Mobbin screen and watch Anything turn it into a real app

Anything

310,469 views • 1 month ago

You can now run MagicPath as a native canvas inside Codex to design and build functional apps. It's pretty incredible. Here's how to do it 👇

You can now run MagicPath as a native canvas inside Codex to design and build functional apps. It's pretty incredible. Here's how to do it 👇

Pietro Schirano

333,863 views • 1 month ago

Grok Build is insanely capable You can just literally drop in a screenshot and have Grok Build help you clone, inspire, guide, or recreate the design and structure of almost anything I tested it with a screenshot of the new xAI website and it generated a website shockingly close from just the image alone

Grok Build is insanely capable You can just literally drop in a screenshot and have Grok Build help you clone, inspire, guide, or recreate the design and structure of almost anything I tested it with a screenshot of the new xAI website and it generated a website shockingly close from just the image alone

X Freeze

27,449 views • 1 month ago

And the newest FigJam emoji stamp is...

And the newest FigJam emoji stamp is...

Figma

85,705 views • 4 months ago

It got even easier to go from design to app! 🚀 Replit users can now drop Figma links into the Agent chat and build or update their apps from their designs. 🎨 Currently in Beta for Figma developer or full seat users only.

It got even easier to go from design to app! 🚀 Replit users can now drop Figma links into the Agent chat and build or update their apps from their designs. 🎨 Currently in Beta for Figma developer or full seat users only.

Replit ⠕

30,182 views • 9 months ago

Designing your UI in #Figma and importing into Shapes is easy. And when you update your design in Figma, your changes are reflected in Shapes with just a click of a button. #VirtualReality #VR #XR #XRDesign #UIDesign #MetaQuest #MetaQuestPro #MetaQuest3

Designing your UI in #Figma and importing into Shapes is easy. And when you update your design in Figma, your changes are reflected in Shapes with just a click of a button. #VirtualReality #VR #XR #XRDesign #UIDesign #MetaQuest #MetaQuestPro #MetaQuest3

ShapesXR

27,211 views • 2 years ago

Date of birth scrolling prototype in Figma (From design to prototype)

Date of birth scrolling prototype in Figma (From design to prototype)

Your Designer

52,179 views • 2 years 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

27,908 views • 3 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 • 7 months ago

skip the design system software. build directly from a design spec using Figma MCP and Intent.

skip the design system software. build directly from a design spec using Figma MCP and Intent.

Luke Wroblewski

31,355 views • 3 months ago