Designers Can Now Ship Production Code Directly From Figma
Figma just did something that changes how design teams work with engineering forever. Figma Make, the AI-powered design-to-code tool, now connects directly to your production codebase. You can open your actual Git repository inside the Figma desktop app, visually edit the live application, and push changes back as a pull request your engineering team reviews like any other commit.
This is not a prototype export. This is not a screenshot handoff. This is a designer selecting a button in the real app, changing its color or layout with a visual edit or a natural language prompt, and having the agent rewrite the relevant production code to match. The changes land as local commits. When you are ready, you create a branch and open a PR. Same CI pipeline. Same code review. Same governance as any engineer pushing code.
What Changed and Why It Matters
When Figma Make launched last year, it was a one-way street. You could generate a prototype and export it to a brand new repo. But you could not connect to an existing codebase. You could not sync with what engineering had already built. The design lived in one world, the code in another, and the gap between them was still the same old handoff problem with AI sprinkled on top.
The new update closes that loop. Here is what you can actually do now:
- Connect to any Git repository. Production or sandbox. Figma Make reads your real codebase and renders it as a live visual surface inside the desktop app.
- Make direct visual edits. Select any element. Change colors, fonts, spacing, layout. The agent finds the corresponding code and modifies it so the UI reflects your design intent.
- Use annotations for interaction logic. Need to add a hover state, animation, or conditional? Annotate the element with a natural language description and the agent implements it in code.
- Branch, commit, and open PRs. All changes accumulate as local Git commits. Create a branch, push it, and open a pull request straight from Make. Engineering reviews it through their normal workflow.
- Round-trip between Figma Design and Make. Copy screens from Make and paste them onto the Figma canvas for team feedback. Edit them there. Figma detects changes and prompts you to bring them back into Make, updating the code.
How This Actually Works in Practice
Here is a concrete example of the workflow. Say your product team wants to update the checkout flow in your web app. Right now, a designer mocks it up in Figma, hands it to engineering, and waits days for the implementation to come back looking slightly different.
With the new Figma Make workflow, the designer opens the real production repo in Make. The app renders as a live visual surface. They click on the checkout button, change the font weight and border radius in the properties panel, add an annotation describing a new success animation state, and the agent writes the CSS and component code. They commit locally, create a branch, and open a PR. An engineer reviews it, sees exactly what changed in the code, and merges it.
The designer never left Figma. The engineer never had to interpret a mockup. The code that ships is the code the designer edited.
What to Look Out For
There are some things worth knowing before jumping in:
- It is in limited beta. Currently available only in the Figma Beta desktop app for Mac users. You need to sign up for the waitlist and get selected.
- Best for teams with existing codebases. Figma explicitly says designers who already have access to their company codebase will get the most from this. If you are building from zero, the standalone Make workflow still works, but the two-way sync is where the magic is.
- It does not consume credits during beta. Figma says AI credits pricing will come later. For now, use it freely.
- The AI toggles between models. Make uses Claude 3.6 Sonnet, Claude Opus, and Gemini depending on the task. This means the code quality adapts to complexity.
- Governance is built in. Because everything flows through standard Git, your existing CI, security checks, and code reviews apply. This is not designers bypassing engineering. It is designers participating in the same workflow.
What This Unlocks
The biggest shift here is not technical. It is cultural. For years, the design-to-code handoff has been the single biggest bottleneck in product development. Designers design in one tool, engineers build in another, and the translation between them eats time, introduces errors, and creates a perpetual alignment problem.
Figma Make with local codebase access turns the canvas into a shared surface where both roles work against the same source of truth: the production code. Designers get the visual control they need. Engineers get the code governance they require. Neither side has to translate.
For teams already in Figma, this is a natural extension of what you already do. For teams evaluating design tools, this is now the feature that separates Figma from every competitor that treats design and code as separate worlds.
The era of shipping a mockup and waiting for someone to rebuild it is ending. The canvas and the codebase are becoming the same place.
Want more like this? Join MOKU Club for free. Weekly resources, early access to new guides, and occasional templates you can actually use. Join below.
