Figma Brings Code, Product Specs and AI Agents Onto the Same Design Canvas

· · Views: 2,219 · ⏱ 3 min time to read

Figma is expanding beyond conventional interface design with new tools that bring product specifications, executable code and backend content closer to the same collaborative workspace.

At its first Config event in India, the company launched Figma Specs, moved Code Layers into open beta and expanded its integration with open-source content-management platform Payload.

Figma says Code Layers now lets teams create interactive prototypes backed by real running code directly on the canvas, while Specs provides a structured place for written requirements and technical context that can be used by both people and AI agents.

TechCrunch independently reported that the company is using the new tools to help its own and third-party agents follow a company’s design rules and context.

Specs gives AI agents something closer to a product brief

Figma Specs is essentially a Markdown-based context layer that can exist independently or alongside designs on the canvas.

Teams can combine written intent, visual exploration and technical details while referencing diagrams, designs, tables and other project information. The structured Markdown can then guide agents as they move from planning toward prototypes and production work.

That attempts to solve a growing problem with AI-assisted product development: an agent can generate code quickly but may not understand why a company uses a particular component, interaction pattern or product constraint.

Giving agents structured context could make generated work less disconnected from the design systems organizations already maintain.

Code Layers reduces the distance between design and implementation

Figma is also pushing code further into the design environment.

The company says Code Layers allows designers and developers to turn an existing design frame into an interactive code-backed prototype, import a GitHub repository, capture an existing website or begin from a prompt.

Unlike static prototypes, Code Layers can display running states and interactions while remaining on the collaborative Figma canvas.

Teams can also duplicate implementations to compare alternatives side by side, reducing the need to move between separate design branches and development environments.

Payload pushes Figma closer to production applications

The third part of the announcement concerns backend infrastructure.

Figma acquired the team behind open-source headless CMS Payload last year. It now says Payload downloads have grown sixfold over the past 12 months.

Figma Make can now scaffold a Payload backend that includes a CMS, database, media management, APIs, authentication and an administrative interface, allowing teams to move beyond front-end prototypes toward data-backed applications.

The strategy has a financial cost. Figma CFO Praveer Melwani told Reuters that AI investment has helped push gross margins from previously above 90% into the mid-80% range, but said the company is prepared to prioritize longer-term adoption and growth.

For builders, the larger story is that the boundaries between product design and development are getting harder to maintain.

Figma started as the place teams drew interfaces. It increasingly wants to become the place where the specification, design, executable prototype, agent context and production data model can meet before a product ships.

Share
f 𝕏 in
Copied