Figma launches Specs collaborative markdown in open beta

• Specs brings collaborative Markdown and embedded design references onto the Figma canvas, as the launch announcement explains.
• GitHub and MCP move context between Figma and external tools, according to zoink's announcement.
• The open beta has begun, as the rollout post confirms; access will arrive over the next few weeks, according to zoink.
• The Chrome extension now captures websites as code layers, demonstrated in the browser demo.

Intuit is already using Specs to document an icon set. Figma's Chrome extension can capture a website without access to its codebase, while the Guidelines beta still requires humans to upload the instruction files.

Figma introduced Specs at Config India on October 15. The company's Bengaluru office was less than a year old, according to zoink's pre-event post.

Figma's Specs introduction describes three basic canvas mechanics:

• Creation: Drag a .md file onto the canvas, press D, or use the Specs toolbar button in Figma or FigJam.
• Embedded references: Put a FigJam file, a frame, or any canvas node inside the document alongside the text.
• Parallel exploration: Duplicate a spec so teammates can develop separate versions before aligning on a direction.

Embedding actual Figma objects is a smart upgrade over screenshot-heavy specs.

Connectors supply outside context without leaving the spec. Figma demonstrated two workflows in its launch walkthrough:

• GitHub: Draft a technical spec using context pulled from the team's codebase.
• Hex: Select an unanswered product question, attach the Hex connector, and ask the agent to analyze usage data. Its findings arrive as a comment beside the question.

The Figma agent can also read and write comments in Specs. Teams can ask it to propose a fix for every open comment, with separate conversation threads running in parallel while human collaborators weigh in.

Figma software engineer Noah Finer used Specs while building Specs itself. His process, described in the launch post, connected planning, implementation and code review:

1. Write guiding principles for edge cases and embed FigJam diagrams showing the flow.
2. Share the spec with teammates for comments.
3. Send the finalized spec and coworkers' comments to a coding agent through Figma's MCP server.
4. Update the original canvas spec through MCP as implementation progresses, and have agents create and embed new FigJam diagrams for code reviewers.

The handoff starts with a spec URL added to the coding-agent prompt. Through MCP, agents such as Codex can read the Markdown and its linked canvas context, including Code Connect snippets.

Mark Harvey, staff product designer at Intuit, uses a structured spec entry for each icon, according to Figma's customer example. Each entry records:

• File name
• Category
• Search tags
• Description

Harvey said consistent, formatted documentation makes design files easier for non-designers to follow.

The browser workflow has two outputs, detailed on Figma's extension page:

• Capture code: Creates an interactive Code Layer. Captured content may not fully reproduce the original site's interactions or functionality.
• Capture design: Creates editable Figma layers for changes to text, colors and layout.

Both modes support a full page or selected elements. The extension is free, and importing captured code does not consume AI credits; an agent's subsequent repairs or adjustments may use credits.

Code Layers also have an Extract designs action. Figma's Specs walkthrough describes three scopes for converting the current code-backed experience into editable design layers:

• A single screen
• A specific state
• A full flow

Those frames can be annotated and marked ready for development after engineering review.

The accompanying design-system updates give agents more context about existing components. Figma's Config India overview separates shipped betas from previews:

• Guidelines, open beta: Attach instructions to published design libraries. The agent receives those files automatically when asked to create a design using the library.
• Code Sources, closed beta: Import implementation context from a GitHub repository or npm package to help agents build and edit components and code layers.
• System map, preview: Track library changes and dependencies in the shared design-system space shown in zoink's preview.
• System check, preview: Scan for gaps such as missing descriptions and interactive states.

The Guidelines documentation adds some concrete limits: files can be Markdown, plain text or JSON, with a combined ceiling of 200 KB per library. Extra guideline context can increase AI-credit use, and library guidelines are not currently carried into Make kits.

Specs is rolling out on paid plans across web, desktop and mobile, according to the official availability details. Code Layers is available on all plans; Guidelines and Code Sources are for paid plans, with their different beta stages listed above.

Payload, the open-source content framework, is also coming to Figma Make, according to Figma's Config India announcement. It adds content management and an admin panel for data-backed websites and apps.

Marketing teams can update content without editing source code, while developers can customize the app using Payload's open-source framework. Figma hosts the content and data, and the resulting work can also be taken outside Figma.

Access is rolling out to all plans over the coming weeks.