正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

579,099 subscribers

3,585,912 次观看 • 8 天前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

12 条评论

Electra 的头像

Electra8 天前

@adispezio devs & designers finally fighting in one file

ShIVY 🪄 的头像

ShIVY 🪄8 天前

@adispezio @grok tldr

Gabriel Hidalgo 的头像

Gabriel Hidalgo8 天前

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

Oft 的头像

Oft8 天前

@adispezio My figma doesnt have it yet :(

Reony 的头像

Reony8 天前

@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 的头像

Hershal Rao8 天前

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

RΞNN 的头像

RΞNN8 天前

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

satebabi 🐈‍⬛ 的头像

satebabi 🐈‍⬛8 天前

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

Pau Kuntong 的头像

Pau Kuntong8 天前

@adispezio code and design just agreed to share a canvas

Humayun 的头像

Humayun8 天前

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

Christian Giordano 的头像

Christian Giordano8 天前

@adispezio Can’t wait to try this out!

Zachary R Newton 的头像

Zachary R Newton8 天前

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

相关视频

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

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 次观看 • 9 天前

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

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)

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 次观看 • 9 天前

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

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

Figma

359,660 次观看 • 8 个月前

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

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

Figma

3,077,954 次观看 • 8 个月前

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

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

Figma

95,251 次观看 • 4 个月前

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

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

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.

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

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.

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

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.

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

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.

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 次观看 • 24 天前

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!

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

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.

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

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.

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

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

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

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.

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

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

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

Figma

108,744 次观看 • 4 个月前

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.

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

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. 👇

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

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

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

Min Choi

49,268 次观看 • 7 个月前