Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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

Figma

559,245 subscribers

169,151 views • 1 year ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

11 Comments

Lamar1 year ago

do you all plan on creating an ai coding agent that turns a figma design into a functional app

ASTROMEDA - Wishlist on Steam!2 years ago

A small teaser of Astromeda! It's a game inspired by Pokemon, Undertale, and OneShot. Wishlist on Steam! #TrailerTuesday #indiegame #IndieGameDev #GamingNews #Steam

That Josh Guy1 year ago

Cursor for Figma design. Dope

RΞNN1 year ago

Damn, that's actually so good

Devo – Devon Frohne1 year ago

Ohhh hell yeah!

Cobain1 year ago

If this is the company demo, I can only imagine how limited its capabilities are. Love that clipping caused by the hidden overflow.

Pollen Chakma1 year ago

Amazing 🤩

Eli1 year ago

Amazing! Been waiting for this!

Nathan | Frame-Ux1 year ago

@LucasSimula

Ben Astorga1 year ago

Can u pls open sites for students?

Ramasarat1 year ago

When will you release CMS and forms?

Related Videos

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,066,107 views • 4 months ago

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

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

Figma

14,425,399 views • 1 year ago

Breaking down code layers

Breaking down code layers

Figma

47,223 views • 11 months ago

> 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

355,635 views • 3 months ago

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

393,314 views • 21 days ago

Introducing 9 new code animations in HyperFrames Download them all with $ npx hyperframes add code

Introducing 9 new code animations in HyperFrames Download them all with $ npx hyperframes add code

Miguel Ángel

20,567 views • 3 days ago

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 views • 3 months ago

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

86,510 views • 2 days ago

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 views • 2 months ago

Starting today, you will be able to select Gemini 3 Pro as an experimental model in Figma Make It’s early, but we’re already seeing impressive results: → Generate 0→1 results with a broad variety of styles, layouts, and interactions → Accurately translate Figma designs into code-backed prototypes → Iterate and refine with nuance

Starting today, you will be able to select Gemini 3 Pro as an experimental model in Figma Make It’s early, but we’re already seeing impressive results: → Generate 0→1 results with a broad variety of styles, layouts, and interactions → Accurately translate Figma designs into code-backed prototypes → Iterate and refine with nuance

Figma

170,120 views • 7 months ago

Do more with video in your prototypes. We’ve made it easier to create realistic video players in Figma. Add interactions that let you play, pause, mute, or skip to timestamps in a single frame. And you can now trigger events with video playback. See more in the 🧵

Do more with video in your prototypes. We’ve made it easier to create realistic video players in Figma. Add interactions that let you play, pause, mute, or skip to timestamps in a single frame. And you can now trigger events with video playback. See more in the 🧵

Figma

356,448 views • 3 years ago

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,230 views • 2 years ago

Learn how to go from Claude Code to Figma and back again Livestream with Anthropic: March 31, 9:00AM PST | 12:00PM EST

Learn how to go from Claude Code to Figma and back again Livestream with Anthropic: March 31, 9:00AM PST | 12:00PM EST

Figma

259,921 views • 2 months ago

#Config2023 Launch 1: Dev Mode A new space in Figma for developers with features that help translate design into code, faster. Read more: Here are all the ways you can use Dev Mode 👇

#Config2023 Launch 1: Dev Mode A new space in Figma for developers with features that help translate design into code, faster. Read more: Here are all the ways you can use Dev Mode 👇

Figma

617,318 views • 3 years ago

Your favorite tools, now in Figma Buzz with Plugins → Insert brand-approved images → Localize assets → Add animations, brand logos, QR codes, & more

Figma

19,928 views • 7 months ago

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,860 views • 1 month ago

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 views • 2 years ago

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,515 views • 2 years ago

ChatGPT Vision can take in screenshots from Figma and generate code. Building with AI is getting wild.

ChatGPT Vision can take in screenshots from Figma and generate code. Building with AI is getting wild.

Mckay Wrigley

2,228,885 views • 2 years ago

Introducing connectors, our new MCP client in Figma Make → Connect external tools to create prototypes with full context → Update your connected docs or create tasks directly from Make

Introducing connectors, our new MCP client in Figma Make → Connect external tools to create prototypes with full context → Update your connected docs or create tasks directly from Make

Figma

181,388 views • 7 months ago