Figma unveils agents and code layers to reshape design workflows

Overview of Figma's agent framework

Figma has expanded its platform with a set of features that let users define how automated agents operate inside design files. The move reflects a broader industry shift toward embedding intelligent helpers directly into creative tools.

What are agents in Figma?

Agents are programmable components that can perform actions such as updating component properties, synchronising data with external sources, or triggering notifications when design thresholds are met. They run on Figma's cloud infrastructure, which means they are available to any collaborator who has access to the file.

New features announced

The latest release adds three core capabilities that give teams more control over agent behavior.

Granular permission controls

Designers can now assign specific permissions to agents at the file, page, or component level. This prevents unintended changes and aligns agent actions with existing role‑based access policies. Permissions include read‑only, edit, and execute rights, allowing administrators to limit which agents can modify critical assets.

Real time collaboration enhancements

When multiple users interact with a file, agents update their state instantly, ensuring that all participants see the same information without delay. The system also logs agent activity, giving teams an audit trail that can be reviewed in the version history panel.

Custom trigger conditions

Triggers can be based on design events such as component insertion, layer renaming, or property changes. Users define these conditions through a visual rule builder, reducing the need for manual scripting.

Code layers in open beta

Alongside agents, Figma is testing a code layers feature that lets developers embed snippets of HTML, CSS, and JavaScript directly into design files. The code appears as a native layer that can be previewed, edited, and versioned alongside visual elements.

How code layers integrate with agents

Agents can read and modify code layers, enabling scenarios like automatic style updates when a brand palette changes, or dynamic component generation based on API responses. This tight coupling bridges the gap between design intent and production‑ready code.

Implications for designers and developers

The combined agent and code layer tools create a shared space where design and development teams can iterate together without switching contexts.

Workflow benefits

• Reduced handoff friction: agents can export assets in the required format as soon as a design is approved.
• Consistent branding: code layers enforce style rules that agents monitor for compliance.
• Faster prototyping: developers can prototype interactions directly in the design file, then hand off the same file to designers for visual refinement.

Potential challenges

1. Learning curve: teams need to become familiar with the rule builder and code layer editor.
2. Performance considerations: complex agents running on large files may impact load times.
3. Security oversight: granting execute rights to agents requires careful governance to avoid malicious scripts.

How to get started

Figma users can enable the new features from the account settings page. The open beta for code layers is available to all professional plans, and interested users can join the waitlist for early access.

Accessing the beta and resources

Official documentation provides step‑by‑step guides on creating agents, setting permissions, and embedding code layers. Community forums host examples ranging from automated color palette updates to live data dashboards.

For a deeper look at the announcement, see the Figma blog post. Additional technical details are available in the Figma developer documentation. Industry analysis of the impact can be read in TechCrunch's coverage. For background on web component standards that inform code layer behavior, consult the MDN Web Docs.