Figma brings visual editing directly to production code

For years, the handoff between design and engineering has felt like a broken telephone game. Designers tweak a margin on a canvas, write a spec doc, and pray the frontend engineer gets it right in production.

Figma is finally going after that friction. On May 28, the company introduced local codebase integration for Figma Make, allowing teams to edit production code directly from a visual interface without ever opening an IDE.

Visual edits meet Git workflows

Figma Make now bridges the gap between your local repo and the canvas using an in-canvas AI agent built specifically for design systems.

Instead of fiddling with terminal commands, you can click on an element, adjust properties, tweak padding, switch colors, or swap fonts. Under the hood, the agent tracks down the right file in your codebase and updates the code so the live UI matches your canvas changes.

When a change requires more than property tweaks, like an interaction or multi-state animation, you can drop contextual annotations directly onto on-screen elements. The agent reads the context and executes the changes across multiple files, acting as a bridge between direct drag-and-drop and open-ended text prompting.

Crucially, Figma is not trying to bypass real engineering rigor. Every edit is treated as a local Git commit until you are ready to open a pull request.

You can create branches, revert commits, and send branch links to teammates to collaborate. Components and screens from Make can also be pasted back into the standard Figma canvas as native layers, keeping design exploration and production reality in sync.

Early beta for Mac users

The new local codebase features kicked off a limited beta on May 28, available exclusively in Figma's desktop Beta app for macOS. Figma noted that support for other platforms is coming soon.

Joining the waitlist does not guarantee immediate access. During the beta period, these agent-driven features will not consume AI credits, though Figma plans to announce AI credit pricing in the near future.

Figma also acknowledged that while the setup has been simplified, the workflow is currently best suited for designers who already have access to their company's repository and understand basic dev practices.

Why it matters

We think this is one of the smartest product moves Figma has made in the AI era. While developer-focused tools like Cursor and Copilot race to optimize the IDE, Figma is reimagining the canvas as the actual control center for front-end code.

For design-heavy teams and indie builders, this removes immense friction. Designers no longer need to nag developers to bump a spacing token or fix responsive breakpoints—they can make the visual change themselves, generate clean code, and submit a PR for review.

The catch, of course, is code maintainability. Real-world codebases are packed with complex state management, custom hooks, and strict architecture patterns. If the AI agent produces messy, redundant code, engineering teams might reject these pull requests just as fast as designers open them. But if Figma pulls this off, the wall separating design files from shipping software is about to vanish.