Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 2 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitimSanat
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Jordan Singer profil fotoğrafı
Jordan Singer2 yıl önce

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 profil fotoğrafı
Jordan Singer2 yıl önce

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

Jordan Singer profil fotoğrafı
Jordan Singer2 yıl önce

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

Sonny profil fotoğrafı
Sonny2 yıl önce

@figma interactive build it! 🤯

Jordan Singer profil fotoğrafı
Jordan Singer2 yıl önce

@figma sweet!

Brian Lovin profil fotoğrafı
Brian Lovin2 yıl önce

@figma There we go!

Mike Gorrell profil fotoğrafı
Mike Gorrell2 yıl önce

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

Kunal Bhatia profil fotoğrafı
Kunal Bhatia2 yıl önce

@figma it's time to build.

Thurin profil fotoğrafı
Thurin2 yıl önce

@figma Imagine how well this would work with @bubble

Steve | STABILITY Protocol profil fotoğrafı
Steve | STABILITY Protocol2 yıl önce

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

Benzer Videolar

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 görüntüleme • 6 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 5 ay önce

🗣️ "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 görüntüleme • 7 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 ay önce

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 görüntüleme • 10 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 10 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 1 ay önce