正在加载视频...

视频加载失败

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

Breaking down code layers

Figma

555,726 subscribers

47,223 次观看 • 11 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

7 条评论

RIIC ≛ 的头像

RIIC ≛11 个月前

I've been waiting for this for so long!

Coastal Themes 的头像

Coastal Themes11 个月前

There are so many interesting UX solutions here well done @figma team! Fantastic tutorial, maybe it's time we expand our Figma Sites tutorials too :)

Gamecooker 的头像

Gamecooker11 个月前

Nice work

Lorenzo Cabra 的头像

Lorenzo Cabra11 个月前

Fire ⚡️

Beavers Brothers 的头像

Beavers Brothers11 个月前

Very useful!

Himanshu Kumar 的头像

Himanshu Kumar11 个月前

Isn't abstraction the elegant opposite of breaking down?

Jordy 的头像

Jordy11 个月前

Loving this update! Keep up the good work. Love to use Sites already

相关视频

Code layers (coming soon) demo with Niko → #Config2025

Code layers (coming soon) demo with Niko → #Config2025

Figma

14,425,376 次观看 • 1 年前

Introducing code layers in Figma Sites Add interactions and animations with code crafted by you or with help from Figma’s AI

Introducing code layers in Figma Sites Add interactions and animations with code crafted by you or with help from Figma’s AI

Figma

169,116 次观看 • 1 年前

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

388,636 次观看 • 10 天前

Guess the number of layers

Guess the number of layers

Figma

108,358 次观看 • 1 年前

Share layers, not screenshots from Figma Make

Share layers, not screenshots from Figma Make

Figma

252,320 次观看 • 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,064,685 次观看 • 3 个月前

There’s no way you caught everything. Here’s what we launched at #Config2024 → UI3, a redesigned Figma → Figma AI (Make Design, Make Prototype, Visual Search, Replace Content, Rename Layers) → Figma Slides → Dev Mode updates (Ready for Dev View, Focus View, More Statuses) → Code Connect is out of beta (!!) → Auto Layout improvements → Responsive Prototyping Viewer → FigJam Pages

There’s no way you caught everything. Here’s what we launched at #Config2024 → UI3, a redesigned Figma → Figma AI (Make Design, Make Prototype, Visual Search, Replace Content, Rename Layers) → Figma Slides → Dev Mode updates (Ready for Dev View, Focus View, More Statuses) → Code Connect is out of beta (!!) → Auto Layout improvements → Responsive Prototyping Viewer → FigJam Pages

Figma

997,185 次观看 • 1 年前

Customize Dev Mode to how you work. Five plugins to try: Design 🤝 Dev → Atlassian Jira Code Generation → Bernardo Ferrari Figma to Code → Anima Design Systems → Tokens Studio → Figma Code Snippet Editor More in the thread.

Customize Dev Mode to how you work. Five plugins to try: Design 🤝 Dev → Atlassian Jira Code Generation → Bernardo Ferrari Figma to Code → Anima Design Systems → Tokens Studio → Figma Code Snippet Editor More in the thread.

Figma

47,489 次观看 • 2 年前

No more slots gone wild → Set minimum and maximum layers → Only allow preferred instances → Display an empty slot by default → Set fill as default

No more slots gone wild → Set minimum and maximum layers → Only allow preferred instances → Display an empty slot by default → Set fill as default

Figma

103,568 次观看 • 6 天前

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →

Figma

141,217 次观看 • 2 年前

> 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

354,356 次观看 • 3 个月前

Releasing a few quality of life Figma Draw updates today → New brush & texture updates (gradients, eyedropper, and noise controls) → Dedicated text on a path tool (or drag on an empty canvas to create text on a circle) → Separate text and vector into independent layers Plus, we pulled a few features over from Design to make it easier to access → New layers panel icons → Auto layout directly in Draw

Releasing a few quality of life Figma Draw updates today → New brush & texture updates (gradients, eyedropper, and noise controls) → Dedicated text on a path tool (or drag on an empty canvas to create text on a circle) → Separate text and vector into independent layers Plus, we pulled a few features over from Design to make it easier to access → New layers panel icons → Auto layout directly in Draw

Figma

61,868 次观看 • 1 个月前

The Dev Mode MCP Server is now available in beta. Access Dev Mode data directly in your agentic coding workflow → VS Code with Copilot → Cursor → Windsurf → Claude Code

The Dev Mode MCP Server is now available in beta. Access Dev Mode data directly in your agentic coding workflow → VS Code with Copilot → Cursor → Windsurf → Claude Code

Figma

252,707 次观看 • 1 年前

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

34,917 次观看 • 2 个月前

Mermaid code to FigJam diagram pipeline

Mermaid code to FigJam diagram pipeline

Figma

25,213 次观看 • 8 个月前

Try running plugin API code in the JavaScript console and see what happens

Try running plugin API code in the JavaScript console and see what happens

Figma

28,235 次观看 • 1 年前

Introducing Codex to Figma: Roundtrip between code and canvas through the Figma MCP server

Introducing Codex to Figma: Roundtrip between code and canvas through the Figma MCP server

Figma

179,484 次观看 • 3 个月前

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

66,938 次观看 • 2 天前

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

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

MCP updates in FigJam so you can visualize your systems (and not just read code) → generate_diagram to create architecture diagrams & ERDs → figma-use-figjam skill to add notes, code blocks, and annotations directly to your board → get_figjam tool to read your board & map out next steps

MCP updates in FigJam so you can visualize your systems (and not just read code) → generate_diagram to create architecture diagrams & ERDs → figma-use-figjam skill to add notes, code blocks, and annotations directly to your board → get_figjam tool to read your board & map out next steps

Figma

211,401 次观看 • 1 个月前