How to Use Figma Specs: A Practical Guide for Designers

What Figma Specs are, why they matter, and how to create one, with use cases for designers.

A Figma Spec document with an embedded design frame and to-do checklist

Every design project produces two things: the designs, and the decisions behind them. The designs live in Figma. The decisions usually end up in Google Docs, Notion pages, Slack threads, Jira tickets and, more and more, Markdown files written for AI coding agents. By handoff, the “why” behind a screen is spread across five tools and is often out of date.

Figma Specs is Figma’s answer to that problem. Figma announced it on 15 October 2026 and is rolling it out as an open beta. It gives your written context a home on the same canvas as your designs.

What is a Figma Spec?

A Figma Spec is a shared document that lives in Figma. You can create it as a standalone file or place it directly on the canvas of a Figma Design file or FigJam board.

It works like a document editor. You type / to add blocks such as headings, lists, to-dos, quotes, code blocks, images and dividers. The difference from an ordinary document is that a Spec can embed live Figma content: a frame, a FigJam diagram or any node from the canvas. Your written decisions sit next to the designs they describe, not next to a screenshot that went stale last sprint.

Specs also work with AI. Agents can read a Spec as Markdown and edit it. Through the Figma MCP server, a coding agent can read a Spec along with everything it links to.

What problem does it solve?

1. Context gets cut off from the design. Briefs, decision logs and design rationale usually live in a separate tool. Links break, screenshots go out of date, and developers build from the version they happened to see.

2. Markdown files only work for one person. Teams increasingly write Markdown files to give AI agents context. Figma’s own launch post points out that these files tend to sit on one person’s computer, link poorly to each other and lose touch with the project they came from. A Spec keeps that same agent-readable context in a shared place your whole team can comment on.

3. Handoff loses the “why”. Developers don’t only need to know what the screen looks like. They need to know why a decision was made, which edge cases were considered and what changed. Keeping a Spec next to the frames keeps that reasoning in front of them.

Why it matters for designers

Your rationale becomes part of the file. Stakeholders, PMs and engineers find the decisions where they find the designs.
Better input for AI tools. The clearer your Spec, the better a coding agent or the Figma agent understands what you meant, not just what you drew.
Fewer review loops. Comments sit on the exact text they’re about, and the Figma agent can suggest fixes for open comments.
One place for design system documentation. Usage guidelines can sit right next to the components themselves.

How to use Figma Specs, step by step

1. Create a Spec

Standalone: in the file browser, click Spec at the top, or go to figma.com/spec/new.
On the canvas: in a Figma Design file or FigJam board, click Spec in the toolbar or press D.
From existing notes: drag a .md file onto the canvas to turn it into a Spec.
From a FigJam session: select stickies and other objects, then click Summarize AI.

2. Add content with blocks

Type / to open the block menu, or use Markdown shortcuts:

Block	Shortcut
Headings	`#`, `##`, `###`
Bullet list	`-` or `*`
Numbered list	`1.`
To-do	`[]`
Quote	`>`
Code block	```

To change a block, click its handle, choose Turn into, then pick the new type.

3. Embed your designs

Use the Figma file embed block, or drag frames and content between the Spec and the canvas. Embed the real frames, not screenshots, so the Spec stays current as the design changes.

4. Collaborate

Share the Spec, collect comments and present it live with spotlight. Teammates can duplicate a Spec to explore separate versions before agreeing on one.

5. Connect it to your workflow

Paste a Spec link into a coding agent’s prompt. Through the Figma MCP server, the agent gets the linked frames, diagrams, code layers and Code Connect snippets.
Use connectors to pull context in, for example drafting a technical spec from a GitHub codebase, or to push updates out to tools like Linear.

Note: writing and editing a Spec yourself is free. Using the Figma agent inside a Spec uses Figma AI credits.

Use cases for designers

Project brief: goals, users, constraints and success metrics, with the early explorations embedded alongside.
Design decision log: what you chose, what you rejected and why, next to the final frames.
Developer handoff document: states, edge cases, interactions and accessibility notes, linked to the exact screens.
Design system documentation: Intuit’s team documents a new icon set in a Spec beside the icons, listing each icon’s file name, category, tags and description.
Research synthesis: turn a FigJam workshop’s stickies and comments into a Spec that becomes the starting point for the next round.
Design critique agenda: collect what you want feedback on, embed the frames and gather comments in one place.
PRD to prototype: start from a product requirements doc and have the Figma agent turn it into designs, prototypes or code.

Tips for writing a good Spec

Lead with the problem and the decision, not the deliverable.
Embed real frames rather than screenshots.
Use to-dos for open questions so they don’t get lost in comments.
Keep one Spec per feature or flow, so people and AI agents get focused context.
Update the Spec when the design changes. That’s where its value comes from.

Availability

Specs is in open beta and rolling out gradually to Education, Starter, Professional, Organization and Enterprise plans, on web, desktop and mobile. You need edit access to the file. When it reaches your team, you’ll see a Spec option in the file browser and a Spec icon in the Figma Design and FigJam toolbars.