Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 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 🦄🦓

30,370 просмотров • 6 месяцев назад

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,952 просмотров • 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 просмотров • 5 месяцев назад

🗣️ "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 просмотров • 8 месяцев назад

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,395 просмотров • 2 месяцев назад

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,729 просмотров • 10 месяцев назад

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 лет назад

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 просмотров • 4 месяцев назад

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

314,069 просмотров • 2 месяцев назад

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,491 просмотров • 3 месяцев назад

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 просмотров • 2 месяцев назад

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 просмотров • 10 месяцев назад

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 просмотров • 5 месяцев назад

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 просмотров • 8 месяцев назад

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 год назад

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 просмотров • 5 месяцев назад

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 просмотров • 2 месяцев назад

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 просмотров • 2 месяцев назад