Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Now teams can explore and build code-backed prototypes on the canvas with Code Layers, now in open beta 0:00 Intro 0:43 Starting from code 2:26 Explore code concepts on the canvas 3:57 Edit in both code and design 6:36 Merge ideas together

figma's profile picture

Figma

579,099 subscribers

3,585,912 görüntüleme • 8 gün önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

12 Yorum

Electra profil fotoğrafı
Electra8 gün önce

@adispezio devs & designers finally fighting in one file

ShIVY 🪄 profil fotoğrafı
ShIVY 🪄8 gün önce

@adispezio @grok tldr

Gabriel Hidalgo profil fotoğrafı
Gabriel Hidalgo8 gün önce

@adispezio My Figma on Pro plan does not have this yet, very annoying.

Oft profil fotoğrafı
Oft8 gün önce

@adispezio My figma doesnt have it yet :(

Reony profil fotoğrafı
Reony8 gün önce

@adispezio Hey @adispezio so if I understand correctly, will I be able to use Claude to generate a code layer in Figma as well? Our repo is bigger than your limitations so that was the one blocker. We also don't want our repo being duplicated in your cloud. Thanks!

Hershal Rao profil fotoğrafı
Hershal Rao8 gün önce

@adispezio frontend devs running out of excuses to say "that's not technically feasible

RΞNN profil fotoğrafı
RΞNN8 gün önce

@adispezio Yet the good old smart animate still doesn’t have on-scroll animations 🫠

satebabi 🐈‍⬛ profil fotoğrafı
satebabi 🐈‍⬛8 gün önce

@adispezio Nice to have all three prototypes running side by side. The first one can get suspiciously good in everyone's memory.

Pau Kuntong profil fotoğrafı
Pau Kuntong8 gün önce

@adispezio code and design just agreed to share a canvas

Humayun profil fotoğrafı
Humayun8 gün önce

@adispezio the design-to-eng pingpong just lost half its rounds

Christian Giordano profil fotoğrafı
Christian Giordano8 gün önce

@adispezio Can’t wait to try this out!

Zachary R Newton profil fotoğrafı
Zachary R Newton8 gün önce

@adispezio Will this somehow make working with the MCP in Figma a better experience with higher quality output? @figma

Benzer Videolar

Together at last: design and code on the canvas Code Layers are here, now in open beta Live from Config India
0:34

Together at last: design and code on the canvas Code Layers are here, now in open beta Live from Config India

Figma

6,689,347 görüntüleme • 9 gün önce

Figma Make, now on your local code In limited beta starting today, you can visually edit and ship changes by connecting Make to your codebase At Figma, we use our products to design in every way: design layers, prototypes, and now, production code
0:30

Figma Make, now on your local code In limited beta starting today, you can visually edit and ship changes by connecting Make to your codebase At Figma, we use our products to design in every way: design layers, prototypes, and now, production code

Figma

401,605 görüntüleme • 4 ay önce

Today at Config India, we announced new ways of building in Figma → Collab with code on the canvas with Code Layers (open beta) → Shape and share context with Specs (open beta) → Give your agent more design system context with Guidelines (open beta) and Code Sources (closed beta) → Ship websites with Payload (rolling out in the coming weeks)
0:50

Today at Config India, we announced new ways of building in Figma → Collab with code on the canvas with Code Layers (open beta) → Shape and share context with Specs (open beta) → Give your agent more design system context with Guidelines (open beta) and Code Sources (closed beta) → Ship websites with Payload (rolling out in the coming weeks)

Figma

7,069,044 görüntüleme • 9 gün önce

> Send code from Claude > Explore on the canvas > Prototype with AI > Work through feedback > Roundtrip back to code All in Figma
0:29

> Send code from Claude > Explore on the canvas > Prototype with AI > Work through feedback > Roundtrip back to code All in Figma

Figma

359,660 görüntüleme • 8 ay önce

Tired: code or canvas Wired: code AND canvas Introducing Claude Code to Figma
3:19

Tired: code or canvas Wired: code AND canvas Introducing Claude Code to Figma

Figma

3,077,954 görüntüleme • 8 ay önce

Live from Config: Meet Code Layers, bringing the full power of code directly onto the Figma canvas
8:35

Live from Config: Meet Code Layers, bringing the full power of code directly onto the Figma canvas

Figma

95,251 görüntüleme • 4 ay önce

Copy code-backed screens → paste as design layers, now with variables → Copy your Make onto the canvas as design layers → Generate a design through the Figma MCP server → Capture your webpage as editable layers with the Chrome extension
4:05

Copy code-backed screens → paste as design layers, now with variables → Copy your Make onto the canvas as design layers → Generate a design through the Figma MCP server → Capture your webpage as editable layers with the Chrome extension

Figma

42,642 görüntüleme • 3 ay önce

Attachment issues (resolved) You can attach 30+ file types (docs, data, media, and code) directly in Make, so you can move beyond placeholders and design with real inputs from code to canvas.
0:31

Attachment issues (resolved) You can attach 30+ file types (docs, data, media, and code) directly in Make, so you can move beyond placeholders and design with real inputs from code to canvas.

Figma

35,403 görüntüleme • 6 ay ö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,988 görüntüleme • 4 ay önce

Design → code → canvas → feedback → repeat. The Figma MCP server is now bidirectional. GitHub Copilot users can pull design context into code and push working UI back to the Figma canvas, all from Visual Studio Code . No handoffs or context switching. Just flow.
1:40

Design → code → canvas → feedback → repeat. The Figma MCP server is now bidirectional. GitHub Copilot users can pull design context into code and push working UI back to the Figma canvas, all from Visual Studio Code . No handoffs or context switching. Just flow.

Mario Rodriguez

106,201 görüntüleme • 7 ay önce

Meet the new Subframe: built for designers who code. Most of your work is now in code. But when you need to explore or nudge the details, prompting isn’t enough. You need a canvas. Now moving between code and design is as simple as copy / paste.
1:30

Meet the new Subframe: built for designers who code. Most of your work is now in code. But when you need to explore or nudge the details, prompting isn’t enough. You need a canvas. Now moving between code and design is as simple as copy / paste.

Irvin Zhan

23,270 görüntüleme • 24 gün önce

With Canvas in Gemini, you can: ⌨️ Write, iterate & preview React/HTML code 📝 Draft & edit comprehensive documents 🎨 Build interactive prototypes, games & visualization …and more. Simply select ‘Canvas’ in your prompt bar and you can write and edit documents or code, with changes appearing in real-time: Try it today and share your Canvas creations by tagging us here!
0:30

With Canvas in Gemini, you can: ⌨️ Write, iterate & preview React/HTML code 📝 Draft & edit comprehensive documents 🎨 Build interactive prototypes, games & visualization …and more. Simply select ‘Canvas’ in your prompt bar and you can write and edit documents or code, with changes appearing in real-time: Try it today and share your Canvas creations by tagging us here!

Google Gemini

415,266 görüntüleme • 1 yıl önce

You can now push what you’re building in Claude Code directly into Figma. With the latest updates to the Figma MCP server, build a working prototype in code, then send it to a Figma canvas to explore multiple versions.
0:30

You can now push what you’re building in Claude Code directly into Figma. With the latest updates to the Figma MCP server, build a working prototype in code, then send it to a Figma canvas to explore multiple versions.

Claude

4,327,954 görüntüleme • 8 ay önce

For years, the design industry has talked about "design vs code" And tools (including Figma!) have forced a choice. But this is a false debate. Code isn't the opposite of design. Code is a material for design. So we're bringing code to the Figma canvas with Code Layers.
0:20

For years, the design industry has talked about "design vs code" And tools (including Figma!) have forced a choice. But this is a false debate. Code isn't the opposite of design. Code is a material for design. So we're bringing code to the Figma canvas with Code Layers.

Dylan Field

97,870 görüntüleme • 4 ay önce

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too
4:39

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too

Pablo Stanley

21,605 görüntüleme • 7 ay önce

Introducing canvas—your coding surface in ChatGPT. ✏️ Edit code inline 🐛 Review code and fix bugs 💬 Add logs and comments 🚢 Port to different languages We’ll be adding more to canvas over time. ChatGPT Plus and Team users can try the beta starting today.
1:30

Introducing canvas—your coding surface in ChatGPT. ✏️ Edit code inline 🐛 Review code and fix bugs 💬 Add logs and comments 🚢 Port to different languages We’ll be adding more to canvas over time. ChatGPT Plus and Team users can try the beta starting today.

OpenAI Developers

935,241 görüntüleme • 2 yıl önce

Turn code into designs your whole team can edit by connecting Codex to the Figma canvas
0:35

Turn code into designs your whole team can edit by connecting Codex to the Figma canvas

Figma

108,744 görüntüleme • 4 ay önce

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.
0:54

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.

Irvin Zhan

301,410 görüntüleme • 8 ay önce

That gap between design and production? Closed. 🔁 GitHub Copilot, Visual Studio Code, and Figma now create a continuous loop. With the bidirectional Figma MCP server, Copilot users can: 🔹 Pull design context into code 🔹 Push working UI back to the canvas Connect your canvas and stay in the flow. 👇
1:40

That gap between design and production? Closed. 🔁 GitHub Copilot, Visual Studio Code, and Figma now create a continuous loop. With the bidirectional Figma MCP server, Copilot users can: 🔹 Pull design context into code 🔹 Push working UI back to the canvas Connect your canvas and stay in the flow. 👇

GitHub

113,405 görüntüleme • 7 ay önce

Figma just gave AI agents the canvas. Claude Code can now design directly in Figma via MCP + Skills👇
0:32

Figma just gave AI agents the canvas. Claude Code can now design directly in Figma via MCP + Skills👇

Min Choi

49,268 görüntüleme • 7 ay önce