Figma 推出 Specs，將 Markdown 規格帶入協作畫布

Turn existing Markdown into a spec by dragging and dropping any .md file onto the canvas.

Today, more and more product builders are working in Markdown, as collaborating with agents becomes more standard. It’s the de facto format for sharing context. But for all the context Markdown helps us express, it’s missing a lot of context, too. Markdown files tend to be single player on local computers, with brittle relationships to each other, and little tying them to the projects that spawned them. While most context is ephemeral, some context evolves into key inputs that need refinement over time and collaboration. That’s why we built Specs: a multiplayer container that allows context to fully express itself and move into, out of, and across Figma.

Specs contains your shared decisions and references your work on the canvas—diagrams, code layers, designs, and more. It has collaborative, unique-to-Figma features, like the ability to embed a FigJam file, a frame, or any node from the canvas right in the spec, so text and designs sit side by side instead of living in screenshots or stale links. And since the Figma agent

3 ways product designers use the Figma agent for craft, speed, and creative expression

Here’s how teams at Uber, Granola, and Atlassian support high-quality, fast-moving work with the Figma agent, now generally available.

can read and reply to comments, you can collaborate with the agent the same way you would with a human collaborator.

With Specs in Figma, teams and agents can bring written intent, visual explorations, and technical details together into a shared plan to guide agents from prototype to production.

What’s new with Figma MCP

→ MCP now reduces errors and token usage so teams can move faster and more efficiently.

→ Agents can generate images, create code layers, and run Weave workflows.

→ 20 new integrations bring Figma context and capabilities into more of your tools.

To create a spec, just press ‘D’ on your keyboard or click the Specs icon in the toolbar in Figma or FigJam.

Specs is where your design intent takes shape. 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

The TL;DR on MCP: Why context matters and how to put it to work

Figma’s MCP server brings your design decisions into the tools where code gets written—so what gets built actually matches what was designed. Here’s what that unlocks for everyone who builds products.

, or build a code layer on top and refine the spec as you learn.

For example, Figma Software Engineer Noah Finer created a spec to give context to his coding agent when he was building the Specs feature. He first wrote a spec mapping out guiding principles for edge cases, embedded diagrams from FigJam to show the flow, then shared it with teammates for comments. “After the spec was finalized, I provided it along with my coworkers’ comments as context to my agent via the Figma MCP server,” he says. “As I made progress on my code, I used MCP to update the original spec on the canvas. I also continuously had agents use MCP to create new diagrams in FigJam, embed those in Specs, and send them to coworkers handling code review.”

Connectors help bring outside context into Specs too. If you’re drafting a technical spec, for example, you can pull in context directly from your codebase with the GitHub connector. Or, say your team uses Hex for product usage data, and your PRD has an open question that data could answer. Select the question, add the Hex connector, and ask the agent to run the analysis and leave its findings as a comment on the spec. The answer lands in the document, right where the question was asked.

You can also drag in content from the Figma canvas, like a design exploration you riffed on with your team, or a diagram of a proposed user flow. Then, when you drag it back out, you can still preserve Figma properties.

Move between materials on the canvas

Your specs live on Figma’s collaborative canvas, next to the work they describe. Drag in an existing Markdown file onto the canvas, or use Figma's agent to draft a spec alongside your designs and code. You can duplicate a spec on the canvas, so each person on your team can work on their own version at the same time before aligning on a direction.

Mark Harvey, Staff Product Designer at Intuit, works with the Intuit Design System and is designing a new set of icons. To document them, Mark adds a spec right next to the icons on the Figma canvas. Each entry captures an icon’s file name, category, search tags, and description, so the team can review the icons and their details in one place. “It’s very helpful to capture it in a nicely formatted way,” Mark says. “With Specs, bringing in a structured, formatted document that’s consistent across every file makes design files much more accessible and easier to follow for non-designers.”

As you riff with your team, you can fluidly move across primitives. Use the Figma agent to turn a PRD into designs, prototypes, and code, or turn designs and code back into a spec. If your team is exploring with code layers

Design together with code layers on the canvas

Today, code layers moves into open beta. Now teams can explore and build prototypes backed by real code on the canvas.

, which bring working code onto the canvas, select Extract designs to convert its current state back into editable design layers. You choose what comes over: a single screen, a specific state, or a full flow. Add annotations on intent, and once engineers have weighed in and marked the frames as ready for dev, keep them next to the spec so designers and engineers are aligned on exactly what will ship.

Codify a direction

When you have a ton of context, it can be hard to synthesize it into clear next steps. Whether you’re trying to distill an engineer’s annotations on a screen, a code layer detailing a new design systems pattern, or even feedback during a design crit, you can synthesize those inputs into an editable doc that sits alongside whatever you’re planning. That way, anyone can zoom out and see structured, written artifacts alongside all the relevant context.

When Figma researcher Mike Blight is exploring product directions, his collaborators push and pull on the options with stickies, comments, and annotations. Once everyone’s feedback is in, he consolidates decisions in a spec, including the questions the team is still working through. Then, when they’re ready to start another exploration, they have the context from the previous brainstorm as a jumping off point. “That's the flywheel for me: Explore together, consolidate what comes out of it, and keep the work moving,” Mike says. “Having Specs on the canvas gives our thinking a durable place to land, and a starting point for what comes next.”

Figma's agent can collaborate, too. Because it can read and write comments in Specs, you can ask it to reply to every open comment on a spec with a suggested fix, while teammates weigh in on the same document. Each conversation lives in its own thread, so you can run several in parallel, the same way you would with people.

Once Figma Software Engineer Kat Busch is ready to share her work broadly, she organizes her work in a spec, which her agent can then read as Markdown. If, for example, the name of a feature changes, she can prompt the agent to make those updates directly to the spec. “It's the easiest way to be able to collaborate with an agent on something I want to share broadly,” Kat says.

Ship it to production

Through the Figma MCP server, agents like Codex can read a spec and see all of the context it links to.

Once your team agrees on a direction, you can hand off a technical spec to your coding agent to implement. Just copy the link to the spec, and add it to your prompt in your coding agent—all of that context, including Markdown, references to frames, diagrams, code layers, and Code Connect snippets come with it.

From the first idea to the final build, Specs gives your team and your agents one place to shape the plan, and the context to act on it.

Whether you’re a PM capturing a PRD, a designer documenting decisions, or an engineer scoping an architecture change, Specs equips everyone on your team to explore, plan, and implement with full context.

Specs is available on web, desktop, and mobile, rolling out in open beta to paid plans starting today. Get started here, and learn more in the help center.