正在加载视频...

视频加载失败

返回首页

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

jsngr's profile picture

Jordan Singer

180,058 subscribers

480,112 次观看 • 2 年前 •via X (Twitter)

科学技术教育艺术
LIVE

Anya Rossi• Live Now

Private livecam show

10 条评论

Jordan Singer 的头像
Jordan Singer2 年前

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 Singer 的头像
Jordan Singer2 年前

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

Jordan Singer 的头像
Jordan Singer2 年前

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

Sonny 的头像
Sonny2 年前

@figma interactive build it! 🤯

Jordan Singer 的头像
Jordan Singer2 年前

@figma sweet!

Brian Lovin 的头像
Brian Lovin2 年前

@figma There we go!

Mike Gorrell 的头像
Mike Gorrell2 年前

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

Kunal Bhatia 的头像
Kunal Bhatia2 年前

@figma it's time to build.

Thurin 的头像
Thurin2 年前

@figma Imagine how well this would work with @bubble

Steve | STABILITY Protocol 的头像
Steve | STABILITY Protocol2 年前

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

相关视频

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 💜
0:24

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 次观看 • 7 个月前

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
0:58

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,255 次观看 • 2 年前

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

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

‹div›RIOTS

5,920,339 次观看 • 7 个月前

🗣️ "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.
1:01

🗣️ "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,809 次观看 • 9 个月前

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:
1:15

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

1,437,799 次观看 • 5 个月前

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:
1:05

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 次观看 • 1 年前

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.
0:25

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

96,537 次观看 • 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.
0:33

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,600,139 次观看 • 1 年前

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.
1:52

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,460 次观看 • 2 年前

Fucked around making a little prototype with the kids over 4 days, basically smashing together our favourite games. Nothing serious, just a bit of fun. Mostly wanted to show them how with the tools available, to just have an idea and actually make something. Doesn't need to be perfect or turn into anything, just build a fun prototype, fuck around with it and learn as you go.
2:10

Fucked around making a little prototype with the kids over 4 days, basically smashing together our favourite games. Nothing serious, just a bit of fun. Mostly wanted to show them how with the tools available, to just have an idea and actually make something. Doesn't need to be perfect or turn into anything, just build a fun prototype, fuck around with it and learn as you go.

Alistair McFarlane

36,408 次观看 • 22 天前

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

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

Figma

135,768 次观看 • 6 个月前

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

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

Anything

315,388 次观看 • 4 个月前

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 👇
0:43

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

335,972 次观看 • 4 个月前

Introducing our Free Figma-to-Code converter. Copy your design directly from Figma and paste it into our canvas. Our compiler converts your figma design into code, and you can export it in your preferred format. Free to use, with no limits. No login required, try it here👇
1:28

Introducing our Free Figma-to-Code converter. Copy your design directly from Figma and paste it into our canvas. Our compiler converts your figma design into code, and you can export it in your preferred format. Free to use, with no limits. No login required, try it here👇

Praha

23,097 次观看 • 25 天前

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
1:11

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

28,345 次观看 • 4 个月前

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.
0:30

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,214 次观看 • 1 年前

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
0:38

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 次观看 • 2 年前

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.
1:00

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 次观看 • 6 个月前

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 💜
1:17

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 次观看 • 10 个月前

People often ask if Rive is a design tool, an animation tool, or a competitor to Figma, After Effects, or Lottie. It’s none of those. Rive is a new way to design, build, and ship user interfaces with animation. It combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. This end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build award-winning interactive experiences across apps, games, websites, products, and vehicles.
0:20

People often ask if Rive is a design tool, an animation tool, or a competitor to Figma, After Effects, or Lottie. It’s none of those. Rive is a new way to design, build, and ship user interfaces with animation. It combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. This end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build award-winning interactive experiences across apps, games, websites, products, and vehicles.

Guido Rosso

59,850 次观看 • 1 年前