Figma lets users test prototypes with code on the canvas.

Figma lets users test prototypes with code on the canvas. The 'code layers' tool, in beta, integrates style rules and repositories. The feature is available to teams such as Uber and Atlassian.

The tool integrates style rules and repositories, making it easier to create and refine prototypes. Designers can explore interface variations, such as delivery buttons in a fictional app, and compare options side by side. Figma Agent recognizes approved components and applies rules defined in guides. The library is accessed via chat by selecting "Libraries" and choosing the desired library. Examples and guides are important for steering the agent, and designs can be added as context for specific tasks. The tool can extract elements into editable Figma layers, making it easier to adjust layout and style.

The feature is based on AI agents and code layers, with support for GitHub repositories and existing design systems. AWS published a post about four layers of context engineering for AI agents in production. The feature can help teams adjust layouts and styles based on code rules and design systems. Availability in Brazil has not been confirmed, but the tool is already available to some teams, such as Uber and Atlassian.

The feature is available to teams such as Uber, Granola and Atlassian, which shows a focus on companies that need integration between design and code. The dependence on GitHub repositories and existing design systems may limit use for teams that do not have these structures. Availability in Brazil has not yet been confirmed, but the feature is already in production.

Figma brings design and code together in new tool

The feature, called "code layers", lets teams test prototypes with code directly on the canvas, integrating style rules and repositories. The novelty fits a trend toward integration between design and code, with tools such as Figma Agent allowing teams to work with greater precision.

With information from figma.com.