Figma Announces New Features including Specs, code layers, MCP integrations, and design guidelines

Figma Announces New Features to Help AI Agents Follow Design Rules

TachCrunch covers the modern-day developments in generative AI, synthetic intelligence, startups, and digital innovation. In a modern replacement, Figma brought new capabilities to assist corporations’ manual AI developers via the layout and development process. The updates introduce Figma Specs, amplify access to code layers, improve integrations with out-of-the-box AI tools, and bring Payload’s backend capabilities into Figma’s website-building environments.

Announced during Figma’s first Config event in India, these adjustments reflect a broader shift in how layout and software development businesses paint with AI. Instead of relying solely on text prompts, companies can give AI agents extra context, including their design systems, code, product requirements, and logo guidelines.

The purpose is to make AI-assisted introduction more predictable and help groups flow from early thoughts to interactive prototypes and jogging packages.

What Are Figma Announces New Features?

Figma’s cutting-edge day updates join design choices, written specs, code, and AI tools in a single collaborative workspace.

The essential bulletins encompass:

  • Figma Specs: A Markdown-based workspace for documenting product necessities, format choices, and technical context.
  • Code layers: A way to create and edit interactive prototypes powered by real code right away on the Figma canvas.
  • Improved MCP integrations: Tools that allow well-matched AI sellers and external packages to integrate with Figma files and capabilities.
  • Payload integration: Backend capabilities for constructing websites and packages with records, authentication, APIs, and content management.
  • Design hints: Additional methods to offer AI marketers with regulations and shared context.

Together, these abilities help lessen the gap between what a team designs and what developers or AI sellers finally construct.

What Is Figma Specs?

Figma Specs is a Markdown-based feature that gives organizations a shared region to record and arrange the context behind a product or layout task.

Markdown is an easy-to-write layout normally used for technical documentation, task notes, and software improvement commands. Figma is bringing this format into its collaborative canvas so written necessities can stay alongside the visible artwork they describe.

Instead of keeping product necessities in a separate record, designers and builders can convey specifications in the same surroundings as designs, diagrams, and code.

How Figma Specs Works

Teams can create a standalone Spec file or add a specification at once alongside designs on the Figma canvas. A spec can reference present-day design factors and encompass FigJam diagrams, code layers, and one-of-a-kind relevant content.

This makes it easier to attach written commands to the real product being designed.

For instance, a team constructing an internet shopping application must document its checkout flow, brand colours, button styles, accessibility requirements, and technical constraints in a spec. An AI agent might also need to then use that context whilst assisting in creating or modifying the interface.

Figma moreover says its agent can take a look at and reply to remarks in a spec, letting groups refine instructions collaboratively.

According to Figma’s official assertion, Specs is meant to carry written motive, visible exploration, and technical info collectively in a shared workspace.

Why Figma Specs Matters for AI Agents

AI designers can generate designs and code from scratch, but the output won’t continuously align with an enterprise’s existing layout, gadgets, or product necessities.

A sketch can also describe what a group wants to build without explaining its hooked-up components, technical decisions, or emblem regulations.

Figma Specs offers a place to capture that missing context. Teams can document their choices as quickly as and maintain those instructions near the designs and code they relate to.

This might also help lessen repeated causes and make collaboration between designers, developers, and AI devices more steady.

Figma Code Layers Bring Real Code to the Canvas

Another fundamental update is the rollout of Figma’s code layers feature into open beta.

Code layers allow organizations to paint with real, running code without delay on the Figma canvas. Rather than treating code as something that exists entirely outside the layout surroundings, companies can use it to create interactive prototypes along their visible designs.

Users can start with current layout frames and ask the Figma agent to expose them in code layers. They can also paint with code from a related GitHub repository, seize code from an internet site, or start with an empty code layer.

What Can Teams Do With Code Layers?

  • Code layers are designed to make interactive experimentation much less difficult. Teams can use them to:
  • Turn visible designs into interactive prototypes.
  • Ask an AI agent to generate or modify code.
  • Explore alternative versions of a product interface.
  • Test interactions earlier than committing to a final implementation.
  • Keep code and format elements collectively in the course of collaboration.

For instance, a dressmaker may want to create a product internet page and ask the agent to assemble an interactive version. The group may additionally need to then take a look at the prototype, request changes, and discover awesome techniques right away, transferring the artwork right into a separate improvement environment.

Code layers can help groups explore thoughts; but a running prototype needs to be handled no longer automatically as a manufacturing-prepared software application. Testing, safety opinions, accessibility exams, and developer assessment are critical.

Why Figma Wants AI Agents to Follow Design Rules

One of the important points within the lower back of Figma’s announcements is that generating more code does not usually mean shipping more completed merchandise.

Figma Chief Design Officer Loredana Crisan advised TachCrunch that corporations are generating drastically more code with AI, while the growth in software program releases is much smaller. The difference is that a lot of generated code is exploratory: it facilitates teams test ideas but is in no way supposed to emerge as a part of a final release.

This creates a venture for design and improvement teams. AI should make experimentation faster, but teams, however, want a dependable way to speak requirements and determine which minds are prepared to deliver.

Figma’s new functions cope with this challenge by way of manner of connecting specs, design systems, code, and agent workflows.

Instead of asking an AI device to assemble a few aspects from a brief description on its own, a crew can provide more structured commands and references.

The cause isn’t always to generate code faster. It is to assist teams in creating paintings that better display their supposed layout and product alternatives.

Figma MCP Integrations Expand AI Tool Connections

Figma has additionally brought improvements to its Model Context Protocol (MCP) server.

MCP is a framework that lets proper AI packages hook up with external equipment and get access to information or skills through a defined interface.

In Figma’s case, these integrations can help external AI designers with format context and choices on Figma competencies without requiring every task to be finished manually within the layout software program.

What the MCP Updates Include

Figma says the updated MCP server can assist well-matched tool paintings more effectively, use fewer tokens for supported obligations, and access more capabilities.

The updates consist of tools for creating and modifying Specs, generating code layers, growing visible assets, and working with different supported workflows. Figma also brought 20 new integrations with outside equipment and platforms.

The realistic advantage is that layout context can journey into the environments wherein builders and AI sellers are operating.

For instance, a developer may additionally want to bypass a Figma spec to a compatible coding agent so the agent has the right of access to the group’s documented requirements and references even while enforcing a characteristic.

Availability and talents rely upon the related device, account plan, and supported integration.

Payload Integration Brings Backend Capabilities Into Figma

Figma is likewise integrating Payload, an open-source, TypeScript-primarily-based backend and content control framework, into its Figma Make environment and code-layer workflows.

This addition expands the capabilities that teams can find beyond visible interfaces.

A website or software often desires more than a front-end. It also can require a database, content material cloth control, authentication, file garage, APIs, and get right of entry to controls.

Payload can provide those backend building blocks, permitting teams to build more complete packages alongside AI-assisted format and code workflows.

What Payload Can Provide

According to Figma’s Help Center, Payload integration can provide useful resource capabilities in conjunction with:

  • Database and content management control.
  • Media and document storage.
  • Authentication and access control.
  • An administrative interface.
  • REST, GraphQL, and neighborhood APIs.

These features can assist agencies in moving from static, visible ideas in the direction of applications that use real facts and backend functionality.

However, integrating a backend does not eliminate the need for careful implementation. Production programs althoughu, although, require appropriate protection controls, testing, deployment planning, and ongoing renovation.

For more details, see Figma’s official Config India 2026 feature guide.

Figma’s New Features: Availability and Access

Not every feature introduced with the aid of Figma has the same launch popularity. Some are in open beta, a few are rolling out step by step, and others are available now.

Based on Figma’s posted Config India 2026 steering, the current availability is as follows:

Feature Availability announced by Figma
Figma Specs Open beta, rolling out to eligible paid plans and supported education or government plans
Code layers Open beta, rolling out across plans
Payload in Figma Available now, rolling out across plans in Figma Make
MCP improvements Available now, with access varying by plan and connected tool
Guidelines Open beta for eligible paid plans
Code sources in libraries Closed beta
Centralized design systems Preview

Access can also vary based on account usage and rollout timing. Users might not see each feature straight away.

Figma additionally says that using its agent with Specs consumes AI credit. Code-layer paintings have their own credit suggestions; at the time of the announcement, Figma said creating and improving inside code layers on paid plans could be unfettered through November four, 2026, with AI-credit score utilization applying in a while. Users ought to test the cutting-edge terms in place of counting on that promotional period.

Who Can Benefit From Figma’s AI Updates?

Figma’s new features can be useful to several corporations concerned with designing and building virtual merchandise.

Product Designers

Designers can file layout selections, join specs with visual elements, and experiment with interactive prototypes. This may additionally make it less complicated to identify ideas earlier than finalizing a path.

Developers

Developers can use established specs and layout references when working with well-matched AI coding sellers. Code layers can also assist groups in finding implementation ideas along the actual layout.

Product managers can use Specs to prepare necessities, technical context, and picks in a shared workspace. This can help lessen confusion even when tasks involve more than one group.

Startups and Small Teams

Smaller companies often want to move quickly at the same time as running with limited resources. Connecting design, documentation, prototyping, and backend abilities can also help them to test more efficiently, as they have to.

How Figma’s Approach Compares With Traditional Design Workflows

In a traditional workflow, teams may keep requirements in documents, designs in a design tool, code in a repository, and backend services in separate systems. Information can become disconnected as work moves between those environments.

Figma’s updates aim to bring more of these elements into a connected workspace.

Traditional workflow Figma’s newer approach
Requirements stored separately from designs Specs can sit alongside visual work
Static mockups used to discuss interactions Code layers support interactive prototypes
Design context manually copied into other tools Compatible MCP integrations can share supported context
Backend development handled separately Payload can provide backend capabilities within Figma Make workflows
Design rules repeated in prompts Specs and guidelines can help centralize instructions

What Figma’s Announcement Means for the Future of AI Design

Figma’s current-day capabilities show how AI-assisted product improvement is shifting beyond a clean-to-set-off, basically-primarily based era.

As AI tools become increasingly able to generate interfaces and code, the undertaking increasingly includes providing the proper context and controlling how that output fits right into a cutting-edge product.

Specs, code layers, MCP integrations, and Payload deal with different factors of that task. Together, they intend to connect the commands in the back of a product with its visible format, interactive behavior, and technical implementation.

Whether this method improves productivity for every team remains to be seen. Its success will rely on how reliably the gear controls actual duties and the way corporations effectively compare what they produce.

For designers and developers, however, Figma’s announcement signals a developing trend to bring layout and AI-assisted development closer together.

FAQs

What new capabilities did Figma announce?

Figma delivered Specs, elevated access to code layers, enhancements to its MCP server, new integrations, design tips, and Payload backend capabilities within its improvement workflows.

What are code layers in Figma?

Code layers allow clients to work with strolling code on the Figma canvas to assemble interactive prototypes and discover modifications with AI assistance.

Is Figma Specs available to anybody?

Specs are available in open beta with a gradual rollout to eligible plans. Access may additionally vary by account and supported plan, so customers need to test Figma’s current availability steering.

Conclusion

Figma’s new functions are designed to assist AI developers with clearer instructions, related layout references, and extra beneficial improvement context. Specs deliver agencies a shared environment to report decisions, code layers supply interactive code onto the canvas, MCP upgrades are part of Figma with well-suited AI tools, and Payload gives backend capabilities to supported workflows.

These updates are meant to make it simpler for design and development groups to discover ideas and move from prototypes closer to implementation. They no longer put off the need for checking out, assessment, or sound product picks, but they provide each other a way to attach the specific levels of constructing digital products.

Follow TachCrunch.Com for more coverage of synthetic intelligence, software development, virtual tools, and industry trends.

 

Share Now

1 thought on “Figma Announces New Features to Help AI Agents Follow Design Rules”

  1. Pingback: Longer Working With Anthropic || What It Means || Read Now!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top