Sunday Jun 28
PRODUCTOther

Figma Puts Code On The Canvas

24JUN
DESIGNCODE

The line between design and code just got thinner. Figma now adds live code layers to its shared canvas, plus animations, shaders, and AI-built plugins. The design-to-dev handoff is fading.

Designers can now clone a repo and pull real flows into Figma as code layers. The canvas becomes a place to test ideas, not just draw them.

CPO Yuhki Yamashita says the point is rough exploration, not production-grade code. You can add motion, shaders, and 3D transforms without leaving the tool. AI builds custom plugins and connects to Notion, Excel, and GitHub.

This is Figma eating the prototype-to-build gap. Watch whether engineers start living in the canvas too.

full brief & sources

⚡ Why this matters

  • Figma is the default design tool. When it changes the workflow, product teams feel it.
  • Code layers blur the line between a mockup and working software.
  • The design-to-dev handoff is where most product time leaks. Figma is aiming at it.

🔍 What happened

  • Jun 24: Figma added code layers to its collaborative canvas.
  • Teams can clone repos and extract flows from code into design layers.
  • New built-in support for animations, transitions, and 3D transforms.
  • AI now generates shader effects and fills.
  • AI can build custom plugins from a text prompt, like layout generators.
  • Agent skills connect to Notion, Granola, Excel, and GitHub.

💬 Smart takes

  • Yuhki Yamashita, Figma CPO: the canvas is for rapid exploration where you don't care about code quality.
  • Skeptic: rough code in a design tool can turn into tech debt nobody owns once it leaves the canvas.

🧭 Where this goes

  1. Likelymore teams prototype with real code instead of static mockups by Q4.
  2. LikelyFigma deepens its Weavy integration to run multi-model workflows in-app.
  3. Possibleengineers start using the canvas for early exploration, not just designers.
  4. Wild Carda coding tool like Cursor or Replit adds a Figma-style visual canvas to fight back.

🥄 The Spoon Take

Figma is not trying to replace your IDE. It wants to own the messy front of the process, where ideas turn into something clickable. If designers, PMs, and engineers all explore in the same canvas, the handoff meeting starts to vanish. That is a bigger shift than any single feature.

🤔 Pushback

Throwaway code in a design tool is easy to make and hard to maintain. The handoff may just move downstream, not disappear.

·TechCrunch - Figma code layers