Figma wants to close the gap between designing and building apps. As part of its Config India 2026 keynote, CEO Dylan Field announced three products to make the transition less painful: code layers, Specs, and Payload backends.

The announcements, delivered during a keynote streamed on YouTube, push Figma beyond its traditional role as a collaborative design tool. According to the company’s October 15 recap on its community forum, the goal is to bring interactive prototypes, written specifications, and application infrastructure closer together.

Essentially, Figma wants fewer handoffs, less duplication of work, and less chance for an AI agent to make mistakes.

Here’s what the three launches do, how they fit together, and what teams need to know about availability.

Why Figma Is Connecting Design, Code, and Content

AI has made generating code easier. That doesn’t automatically make building software a collaborative process.

As Techzine explains, Figma sees a problem with teams using AI to create prototypes: the work often becomes isolated from the rest of the organization.

A mockup is created by a designer. In another location, a developer builds a prototype. Product requirements live in documents. Marketing content sits in a separate system. Then someone has to reconcile all those pieces before the project can move forward.

Figma’s three announcements target different parts of that disconnect:

• Code layers bring interactive, code-backed prototypes onto the design canvas.
• Specs give teams and AI agents a shared place to document requirements and design decisions.
• Payload supplies Figma Make projects with backend infrastructure for content and application data.

By combining these tools, the design canvas is able to do more than simply discuss what software might look like in the future. As a result, it becomes a place to build, document, test, and develop the application.

That’s an ambitious expansion of Figma’s role, particularly as AI coding tools make it easier for more people to turn an idea into a working application.

Code Layers Bring Working Code to the Canvas

Figma initially introduced code layers in a private beta at its June Config event. Config India opened the beta to a broader audience.

Instead of simply looking at a design as a static image, teams can build interactive prototypes that are backed by actual code within Figma.

Users have several ways to get started, according to Figma’s announcement:

• Convert an existing design frame into a code layer.
• Import a GitHub repository.
• Capture a live website using the Figma Chrome extension.
• Start from scratch with an AI prompt.

Techzine also reports support for uploading a local folder and importing a prototype through MCP.

Using a code layer, users can request AI agents to generate code from designs or modify specific parts of prototypes. As a result, iteration becomes more conversational: instead of rebuilding an entire screen, a user can request a specific change and refine it.

A KuCoin news summary also describes this ability to generate and revise code-backed prototypes.

Those who already use Figma to collaborate on interface design understand the appeal. By combining the prototype and design, a team can reduce the time it takes between approval and implementation.

Code Layers: Beta Access and Pricing Questions

But there’s a catch: the sources covering the launch don’t offer consistent details on availability and pricing.

Figma says creating and editing code layers is free on paid plans through November 4, 2026. A Brazilian developer guide reports that the feature uses AI credits, with consumption depending on task complexity. It also says users need editing access, the rollout is gradual, and Education K-12 plans are excluded.

As Techzine describes availability across subscription plans, it’s wise to check the specific terms rather than assume all accounts will have access.

For teams evaluating the feature, the November 4 deadline is particularly important. After that date, the available sources do not indicate how much code-layer editing will cost.

Code Sources and Centralized Design Systems Target Consistency

Code layers aren’t the only changes aimed at connecting design and development. In addition, Figma introduced two supporting features.

Code sources, currently in closed beta, lets teams import code from a GitHub repository or an npm package. The idea is to give AI agents access to existing components rather than letting them invent replacements that look close enough. However, they don’t follow the team’s actual implementation.

That’s a meaningful distinction. A prototype can look polished while using the wrong components, inconsistent styles, or patterns that developers will have to replace later.

Centralized design systems take a broader approach by bringing design libraries, code libraries, and guidelines together in one system.

For teams maintaining shared components, that could make updates easier and give designers, developers, and AI agents a common reference point.

Both features address a familiar problem in AI-assisted development: generating something that works is one thing; generating something that fits the organization’s existing system is another.

Specs Gives AI Agents More Than a Screenshot to Follow

It is possible for an AI agent to see what a page looks like by taking a screenshot. But there’s no way to explain every decision that was made.

That’s where Specs comes in.

With Specs, you can document the intent behind any project in Markdown. Specs can exist as standalone files or alongside canvas files. In addition to referencing canvas elements, it can embed FigJam diagrams, code layers, and designs.

As Blog du Modérateur explains, those connections give Specs an advantage over a conventional Markdown document: the written instructions can live alongside the actual visual and technical work.

The feature is described by Figma as a place to share written intent, visual exploration, and technical details. It’s intended for human collaborators and AI agents alike.

For paid plans, Specs is in open beta on the web, desktop, and mobile devices.

Better Documentation Could Mean Better AI Output

The value of Specs depends on what teams put into it.

When given a vague prompt, AI agents are capable of generating a plausible interface. However, if the team expects a specific typography system, spacing scale, color palette, or set of reusable components, those requirements must be specified.

An analysis published by Ecosistema Startup recommends starting with practical constraints: document typefaces, exact color codes, spacing rules, required components, and prohibited design choices.

That’s sensible advice, but it also exposes a limitation.

Specs can make design documentation easier to organize and connect to the work. It cannot make an undocumented design system consistent, nor can it guarantee that an agent will follow every instruction. Still, teams must establish standards, keep documentation current, and review outcomes.

Overall, it’s a better tool for documenting decisions. Those decisions still need to be made by people.

Payload Gives Figma Make a Native Backend

The third announcement goes beyond design and prototyping.

Figma acquired the team behind Payload, an open-source content framework, last year. In its launch materials, Figma says Payload downloads increased sixfold over 12 months, describing that growth as the fastest among open-source CMS projects on npm.

With Figma Make, you can now scaffold a Payload backend natively.

That backend can provide a content management system, database, media storage, APIs, authentication, and an administrative interface. Figma hosts the infrastructure, while developers can customize the underlying open-source framework.

The potential benefit is significant for teams building applications with Figma Make. A prototype doesn’t have to stop at a convincing interface populated with placeholder data. It can be connected to backend services and managed content.

While marketers can manage content without directly editing source code, developers remain able to customize the application. The larger goal is to eliminate the need to move a promising prototype into a separate stack just to add the infrastructure that a functioning application requires.

However, teams should distinguish between available backends and production-ready applications. Hosting, security, data management, deployment requirements, and ongoing maintenance require careful consideration. While launch coverage provides some insight into how those responsibilities work in practice, it does not resolve all questions.

MCP Connects Figma to Outside AI Tools

Figma is also expanding access through its Model Context Protocol (MCP) server. According to Techzine, the expanded server lets AI tools generate code layers, work with Specs, and run published Weave workflows.

This creates another connection between Figma’s environment and external AI tools. Instead of operating outside the existing workflow of the team, an integrated coding agent can access relevant project files.

For organizations using several AI development tools, this matters. While Figma’s new features may appeal to them, they don’t necessarily want to abandon their preferred coding agent.

What’s more important is whether those integrations preserve context, adhere to design-system rules, and work with tools currently in use by developers.

How Teams Should Test the New Features

Those interested in these announcements need not adopt the entire workflow at once. Rather than starting with a large, production-critical application, a smaller, non-critical project is a better place to start.

A practical way to evaluate the tools is as follows:

• Start with code layers. Using an existing design frame, convert it into a prototype and compare it to the original. Make sure the visuals are accurate, the interactions are smooth, and how much manual correction is needed.
• Document the design rules in Specs. Keep track of typography, spacing, colors, required components, and other non-negotiables. Check whether AI agents follow instructions consistently.
• Evaluate code sources. In the closed beta, test whether imported components produce more consistent results than generating everything from scratch.
• Explore Payload separately. Make sure its backend capabilities match your project’s content, data, authentication, and hosting requirements.
• Check the economics. Be sure to review AI credit consumption, account eligibility, beta limitations, and any pricing changes before implementing the workflow on a regular basis.

As part of Figma’s announcement, code-layer editing will be free until November 4. As a result, testing the feature under the current conditions is limited.

What We Still Don’t Know

Although the announcements are promising, the new workflow leaves many questions unanswered.

First, reporting on code-layer eligibility differs. Teams should verify access and plan requirements directly with Figma rather than relying on broad descriptions of the rollout.

Second, the available sources don’t establish what code-layer editing will cost after November 4, 2026.

Third, code sources remain in closed beta, while code layers and Specs are beta products. Availability, capabilities, and terms can change as Figma develops them.

Finally, the launch coverage provides less detail about Payload’s practical limitations than code layers and Specs. Those considering its production use should verify details concerning hosting, deployment, security, and ongoing operations.

Those aren’t reasons to dismiss the announcements. They’re reasons to test the tools against real workflows before committing to them.

Figma Wants to Shorten the Distance Between an Idea and an App

There’s more to Figma’s Config India announcements than three unrelated product updates. In their view, there is a greater need to connect design, implementation, documentation, and application infrastructure.

Code layers address the gap between a design and an interactive prototype. Specs gives people and agents a shared record of the decisions behind that design. Payload helps Figma Make move beyond the interface and connect to backend capabilities.

The more these pieces work together, the more time teams will have to spend evaluating whether exactly what they’re building solves the problem.

Every AI developer knows the caveat: generating something quickly is only one part of the job. In terms of consistency, maintainability, collaboration, and production readiness, there is still a lot to consider.

Figma’s latest releases could make the path from concept to working application shorter. Whether they make it better will depend on how well the tools perform beyond the keynote.

Sources and Further Reading

• Config India launch recap
• Specs
• Code layers
• Payload