Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

167,937 subscribers

480,034 Aufrufe • vor 2 Jahren •via X (Twitter)

Wissenschaft & TechnologieBildungKunst
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Jordan Singer
Jordan Singervor 2 Jahren

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

Profilbild von Jordan Singer
Jordan Singervor 2 Jahren

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

Profilbild von Jordan Singer
Jordan Singervor 2 Jahren

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

Profilbild von Sonny
Sonnyvor 2 Jahren

@figma interactive build it! 🤯

Profilbild von Jordan Singer
Jordan Singervor 2 Jahren

@figma sweet!

Profilbild von Brian Lovin
Brian Lovinvor 2 Jahren

@figma There we go!

Profilbild von Mike Gorrell
Mike Gorrellvor 2 Jahren

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

Profilbild von Kunal Bhatia
Kunal Bhatiavor 2 Jahren

@figma it's time to build.

Profilbild von Thurin
Thurinvor 2 Jahren

@figma Imagine how well this would work with @bubble

Profilbild von Steve | STABILITY Protocol
Steve | STABILITY Protocolvor 2 Jahren

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

Ähnliche 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 💜
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 🦄🦓

30,370 Aufrufe • vor 6 Monaten

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

812,902 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 5 Monaten

🗣️ "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,695 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 1 Jahr

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,259 Aufrufe • vor 1 Monat

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,597,312 Aufrufe • vor 10 Monaten

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 Aufrufe • vor 2 Jahren

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,409 Aufrufe • vor 4 Monaten

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

313,635 Aufrufe • vor 2 Monaten

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,372 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 10 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 8 Monaten

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 Aufrufe • vor 1 Jahr

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

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

Luke Wroblewski

31,440 Aufrufe • vor 5 Monaten

Introducing Figma export in MagicPath. Design and build with our native agent, or your favorite external one (Codex, Claude Code, etc.). Explore tons of different directions, then bring your work into Figma as fully editable designs. As simple as a copy-paste.
0:21

Introducing Figma export in MagicPath. Design and build with our native agent, or your favorite external one (Codex, Claude Code, etc.). Explore tons of different directions, then bring your work into Figma as fully editable designs. As simple as a copy-paste.

Pietro Schirano

42,132 Aufrufe • vor 2 Monaten

New open source project: Easel, a macOS workspace for AI-assisted product design and frontend iteration powered by the Codex SDK. Think of it as "Claude Design for Codex." It brings together a local project library, design-system setup, Codex chat, and a live web preview with a point-and-click inspector. Set up your design system however you like. Import one from Figma , bring your own, or have the agent generate it as a design.md. Then use it to build prototypes and slide decks. Codex-first, with Claude and other AI providers and local models planned for future releases. OpenAI Developers
0:51

New open source project: Easel, a macOS workspace for AI-assisted product design and frontend iteration powered by the Codex SDK. Think of it as "Claude Design for Codex." It brings together a local project library, design-system setup, Codex chat, and a live web preview with a point-and-click inspector. Set up your design system however you like. Import one from Figma , bring your own, or have the agent generate it as a design.md. Then use it to build prototypes and slide decks. Codex-first, with Claude and other AI providers and local models planned for future releases. OpenAI Developers

James Rochabrun

61,199 Aufrufe • vor 1 Monat