Journal

Figma code layers and Specs: what Config India 2026 means for designers

Figma used Config India to open code layers and Specs in beta. Here is what each feature does and how to fit them into real design work.

Figma code layers and Specs: what Config India 2026 means for designers

On October 15, 2026, Figma used Config India to announce a batch of features that push the canvas closer to working software. The two that matter most for day-to-day design work are code layers, which put running code next to your frames, and Specs, a written document that lives inside your files and that AI agents can read.

Both are in open beta and still rolling out, so you may not see them in every file yet. This post covers what was announced, who gets what, what it costs, and how we think designers and founders should start using it without rebuilding their whole process around a beta.

What Figma announced at Config India

Figma's own recap is the Build by design post on its blog, and the company also published a summary in the Figma forum. The main items were:

  • Code layers (open beta): interactive, code-backed prototypes that sit on the canvas.
  • Specs (open beta, paid plans): a native place for written intent, visual exploration and technical detail, for both people and agents.
  • Payload in Figma: Figma Make can now scaffold a Payload backend with a CMS, database, media storage, APIs, auth and an admin panel, hosted by Figma.
  • Guidelines for published libraries (open beta): rules attached to a design library so the agent follows your patterns and avoids known anti-patterns.
  • Code sources (closed beta): import code from GitHub repos or npm packages so generated components match your real design system.
  • Figma MCP updates: better performance, support for more Figma products and 20 new partners.

Code layers: real code on the canvas

Until now, a Figma prototype was a set of frames joined by links. It could look right, but every interaction was faked. A code layer holds actual running code. You and your teammates can click through it, comment on it, and duplicate it to compare two directions side by side, the same way you would duplicate a frame.

According to Figma, you can start a code layer from four places:

  1. Frames you have already designed.
  2. A live website, captured with the Figma Chrome extension.
  3. A GitHub repository.
  4. A blank prompt.

Once a code layer exists, you can edit it by prompting the agent, annotating frames, or changing the code yourself. Coverage of the launch also describes an extract option that turns code layer screens back into editable frames, and the ability to push changes to a branch as a pull request. GitHub import is aimed at lightweight prototyping repos, not full production apps, so do not expect to drop your whole product into a file.

Where this helps most

The clearest win is interaction-heavy work that frame links handle badly: forms with validation, filters, multi-step onboarding, anything with real state. Instead of writing paragraphs explaining how a date picker should behave, you can show a version that behaves that way and let people react to it.

Specs: a home for the words around your design

Every design team writes context somewhere: a doc in another tool, a long comment thread, a page of annotations next to the frames. Specs bring that text into Figma. A Spec is a collaborative Markdown document that can sit on a Design file or FigJam canvas, or exist as its own Spec file. You can embed frames and boards in it, comment on it, and drag in an existing Markdown file.

The part that changes how you work is who reads it. Coding agents connected through the Figma MCP server can read, create and update Specs. That means the reasons behind a decision, such as why the empty state links to import rather than to a tutorial, can travel with the design into the build instead of getting lost in a chat thread.

Who gets what, and what it costs

This is the part to check before you promise a client anything:

  • Code layers are rolling out to all plans, and you need edit access to create them.
  • Specs are for paid plans only. Starter users get code layers but not Specs.
  • Credits: on paid plans, creating and editing code layers is free through November 4, 2026. After that, code layer work uses AI credits. Writing a Spec by hand does not use credits; asking the agent to work with it does.
  • Both betas roll out over several weeks, so teammates may see them at different times.

If you manage a team, it is worth looking at Figma's newer admin controls for AI credit limits per user, listed in the release notes, before the free window closes.

What it means for designers in practice

We would not move client deliverables onto code layers this week. They are a beta, code sources are still closed, so generated code may not use your production components yet, and the free period is short. What we would do:

  • Prototype one tricky flow as a code layer before November 4 while it costs nothing, and compare the feedback you get with your usual click-through prototype.
  • Write one Spec for a feature you are handing off. Keep it short: goal, constraints, edge cases, decisions you already rejected and why.
  • Add guidelines to your library if you are on a plan that has them. Even five rules, such as button hierarchy or spacing limits, give the agent something to follow.

What it means for founders and small teams

For a small product team, the interesting change is that design files can now carry more of the handoff on their own. A founder working with one designer and one developer can keep the prototype, the reasoning and the agent instructions in one place. Payload in Make also means a quick internal tool or content-driven prototype can get a real backend without a separate setup.

The trade-off is cost and lock-in. Agent work runs on credits, and context that lives in Specs lives in Figma. Before you move your product docs there, decide what you would do if your plan or pricing changed.

Conclusion

Config India showed Figma's direction clearly: the canvas is becoming a place where designs run, carry written intent, and give AI agents the context they need. Code layers and Specs are useful today for prototypes and handoff notes, but they are still betas. Try them on one real flow while code layer edits are free, keep your production process where it is, and judge them on whether they cut the back-and-forth between design and build.

Oybek Ruziev

Designer & Framer developer · AidanCreates

Keep reading

All posts