Figma Make 上线本地代码库功能，可在 Figma 内直接改代码

From visual editing to contextual prompting and collaboration, Figma Make is expanding how teams can design with code.

Share Figma Make, now on your local code

Make note

These new Make features will be rolling out in beta over the coming weeks.

Today we're launching new capabilities in Figma Make—the ability to work in your production codebase without leaving Figma. In our Beta desktop app, you’ll find our first step toward bringing together freeform design, prototyping with code, and shipping to production.

Here at Figma, we don't believe you should be forced to choose between a design or code tool. You should be free to use the best tool for what's needed, whether it’s the design canvas, a prototyping playground, or production code.

Working in code today feels a lot like design did 10 years ago. When Figma launched, design was offline and single-player. Today, more people are using agents to write code than ever and coding itself is changing rapidly. The quality of code output from frontier models is getting better all the time, and yet, despite so much innovation, the tools we have to work with code are very early. We're still stuck in 2016 when it comes to collaboration. IDEs and terminals just don't feel like "home" for many of us. We feel this every day and we hear it constantly from the Figma community.

“Design vs code” is a false dichotomy. Tools should not limit the ability to move between these worlds. The whole point of Figma as a platform is to give you access to the right tool at the right moment. From direct editing and contextual prompting to closer collaboration and file sharing, here's what's launching today to make that possible.

Edit your codebase visually

Make note

While we’ve made this setup process easier for non-technical users, we're working to make this process far smoother. For now, designers who already have access to their company’s codebase are best suited for this new Make functionality.

You can now make direct, visual edits and ship changes from Make by connecting to your codebase. Select elements, adjust properties, change layouts, colors, fonts, or sizing—the agent finds the relevant code and edits it so the UI reflects what you designed. This is precise editing in code with freedom to explore.

For changes that go beyond properties—an interaction or animation—you can annotate elements on the screen, describing what you want. Annotations give the agent contextual information, and can reference many elements at once. This adds a flexible option between direct editing and standard prompting.

Branch, commit, and ship

Shipping production code should happen intentionally, through your team's development process. Until you open a PR, your changes are stored as local commits.

Make supports Git workflows for codebases—creating branches, reverting commits, and other operations—so your engineering team reviews your changes like any other pull request.

Collaborate and build

When Make edits your local codebase those changes can be shared as files. Send a link, and once your teammate has access to your branch, they can check out your branch, see your changes, and start to build from there. You’ll see their changes and ideas, and the commit history helps you compare the before and after.

Copy screens, pages, and components from Make and paste them into the Figma canvas as layers, where you can riff and edit with your team and Figma's agentThe Figma design agent is hereStarting today, work with an agent that is built for Figma—directly on the canvas.

The goal is to close the loop entirely—bring screens and elements from Make into Figma Design for your team to comment on, edit, and riff on, then bring those decisions back into code. The canvas and the codebase, in the same place. There's no right place to start. There's just the work, and the best tool for where you are in it.

Figma Make's new capabilities—including direct editing, annotations, chat, and PR creation—launch in a limited beta on May 28, 2026 and won’t consume credits during beta. We expect to announce AI credits pricing in the near future. Sign up here to request early access. If you’re eligible and selected for the beta, we’ll send you an email once you’re in. Joining the waitlist doesn’t guarantee access. This beta will only be available in our Beta desktop app for Mac users. We plan to bring these changes to other platforms soon. To learn more about these features visit our help center.

Iris is a product designer at Figma, focusing on tools that empower designers to ship code. Previously, she worked at Dropbox.

Jesse Lumarie is a software engineer building AI tools and integrations at Figma. Prior to Make, Jesse worked on growth initiatives and Figma's first MCP server.

Related articles

7 tips for using Figma Make credits more efficientlyMay 22, 2026By Alexia DantonWhile everyone’s talking about “tokenmaxxing,” we’ve compiled seven best practices to help you build smarter—without prompting more—in Figma Make.Working Well; Figma Make; Tips & inspiration; AI; Design; Productivity; UI/UX; Prototyping; The Figma design agent is hereMay 20, 2026By Rodrigo Davies, Tammy TaabassumStarting today, work with an agent that is built for Figma—directly on the canvas.Inside Figma; Product updates; Figma agent; Figma Design; AI; Design systems; Design; News; Build with more context and more control in Figma MakeApril 2, 2026By Ben Smit, Darragh BurkeStarting today, Make kits and Make attachments bring context into Figma Make, so prototypes start from real components, data, and constraints.Inside Figma; Product updates; Figma Make; AI; News; Prototyping

Create and collaborate with Figma