Figma 推出多項工作流更新，串連設計、程式碼與 AI 智能體
Build by design: New workflows for new ways of building
Figma 宣佈多項工作流更新，涵蓋 code layers、設計系統管理、Specs、Payload，以及 Figma MCP。code layers 今日開始逐步推出 open beta，適用於所有方案；Specs 亦開始在 web、desktop 和 mobile 逐步推出 open beta，適用於所有付費方案。
For a long time, coding was expensive. Every change would cost money and time, and you planned carefully before you committed anything to code.
Today, as AI has made coding cheap, building something has never been easier. More teams are building as a way to expand their thinking. They’re building first, using it as a jumping off point to untangle a problem and test whether ideas hold up. It’s fast, loose, and a little messy, and it’s less about creating a polished product and more about pushing your own thinking. This is building to think.
And then there’s building to ship. This way of working is deliberate, precise, and defined by the details.
Moving between these types of building is hard. AI has made it easy to get to a proof of concept using code, but that workflow is often single player, leaving you with tunnel vision and no sense of whether you’re moving toward the right thing. Today, we’re sharing new ways of bringing both kinds of building together, in Figma.
Collaborate with code on the canvas
When we’re all off vibe coding prototypes, it can feel like designing in isolation. Sometimes collaboration today even looks like sharing a link to a prototype or a video where you can see the end result, but you can’t see how you got there. We're building to think, but the thinking has become invisible. In the words of one of our customers, “It’s fast, fast, fast... then slow.”
And we’ve heard feedback from Figma users that they don’t feel at home in a terminal or IDE. They want to build, visually and with their teams, in an environment that’s made for them. That’s why we announced code layers earlier this year: to make it feel like designing together again on the canvas. Whether you’re converting existing designs into working code, uploading from a local folder, bringing in a coded prototype via MCP, importing from GitHub, or capturing what’s live on your website with Figma’s Chrome extension, code layers lets you explore code-backed ideas on the canvas and push your thinking forward. And over time, we plan to make it possible to work with more complex codebases, too.
Code layers is rolling out in open beta starting today, and is available on all plans. We’ve also improved our Chrome extension… check it out!
Design together with code layers on the canvas
More control over your design systems
Design systems have always been the foundation for bringing consistency and coherence to your product. And as teams start creating more and more with agents, that foundation becomes even more important.
When you give agents the right patterns and principles, they can build on the craft your team has already invested in. This is why we’re expanding what your design systems in Figma can include, bringing in code sources and guidelines so the agent has all the information it needs to better reflect your design system, wherever it lives. Add guidelines to your published design libraries so the agent can more easily follow established patterns, and import code sources from a GitHub repository or an npm package to help the agent build and edit better components and code layers.
We’re also previewing a dedicated place to bring all the libraries that make up your design system together, manage and govern them in one place, and improve them over time. A system map helps you track changes and dependencies, while system check scans to find gaps, like missing descriptions and interactive states, in your design system.
Guidelines, now in open beta, and code sources, starting in closed beta, will be available on all paid plans.
Shared context with Figma Specs
As teams increasingly collaborate with agents, Markdown is more ubiquitous than ever. But Markdown files have no relationship to each other, or to the projects they’re attached to. They also often have references to images, URLs, or even other Markdown files, which can be opaque to collaborators. That’s why we built Specs: a new native home for context, that allows it to fully express itself and move into, out of, and across Figma.
Specs can do a lot, from seeding generation of new directions, to creating data reports, to creating high fidelity PRDs to handing off context to agents. You can bring in outside context with an agent, work together to turn rough ideas into a detailed spec, then send it to your coding agent using Figma’s MCP server, or use Specs to build a code layer and refine as you learn. Since Specs contain your shared decisions and reference your work on the canvas, you can codify and share context from diagrams, code layers, designs, and more.
Specs is starting to roll out today in open beta on web, desktop, and mobile and will be available on all paid plans.
Introducing Specs: Markdown as a medium
We’re launching Specs, a container for your context that lives on the Figma canvas.
Ship data-backed websites with Payload
Payload is an open-source content framework for building internal tools, apps, and websites. In the past 12 months, Payload downloads have grown 6x, making it the fastest growing open source CMS on NPM.
Last year, the team behind Payload, an open source content framework, joined Figma
Welcoming Payload to the Figma team
We're thrilled to announce that the team behind Payload, a leading open-source headless content management system (CMS) and application framework, has joined Figma.
. Today, we’re excited to bring Payload’s capabilities to Figma Make, so you can create, manage, and ship web apps together. Payload allows marketing teams to manage content without needing access to source code or time from engineers. And the content they add stays bound to your design system to accurately represent your brand. Plus, you have everything from content to workflows to APIs and an admin panel all in one place. And since Figma hosts it, your content and data live in the same place. Whether you’re a designer prompting a v1 in Figma Make, a marketer updating copy, or a developer customizing the app with Payload’s open source framework, the whole team has what they need to take an app to production. And, you can take it with you outside of Figma.
Payload is available on all plans, with access rolling out to all accounts over the coming weeks.
Create, ship, and manage data-backed websites with Payload in Figma
New ways to create with your AI tools using Figma MCP
All of these new features and workflows are agent-native via the Figma agent and MCP. The agent, now generally available
3 ways product designers use the Figma agent for craft, speed, and creative expression
and embedded on the design canvas, can automate repetitive tasks across a wide range of work from prototypes to design system components.
We’re also updating the Figma MCP to power more AI workflows across code and design, giving agents the skills and tools to help teams build faster. Starting today, you can generate code layers and work with specs directly from the AI tools you already use. You can also create visual assets and run published Weave workflows, bringing more of your creative process into these tools. Improved agent guidance and Figma MCP server performance reduces errors and token usage, helping agents complete Figma tasks more efficiently and reliably.
To help you connect your work to Figma, wherever you start, we’re launching 20 new MCP partner integrations, including:
- OpenCode: Give your coding agent Figma design system context to generate more accurate code, then send prototypes back into Figma for review.
- Dia: Explore ideas in an AI-native browser and bring web UI into Figma as editable design layers to refine and review.
- Junie by Jetbrains: Bring your coded prototypes into Figma as code layers to iterate and polish with your team.
- Meta Muse: Let small business owners bring the brand they’ve designed in Figma into Muse to generate more visuals and run Weave workflows.
Today, work starts in different places, changes hands, and changes form. Teams come together and explore ideas side by side. They refine interactions by putting them to the test, then carry those decisions forward into something that’s ready to ship. The process doesn’t move in a straight line: ideas branch, teams double back, and something made to answer one question reveals a better question underneath it.
That’s what it means to build by design. Wherever you start, and however you work, we’re excited to see what you make on Figma’s full-stack creative canvas.
來源：Figma AI / Agent / Make · figma.com