Figma Launches Code Layers at Config 2026, Letting Designers Write and Run Code Directly on the Canvas

Figma has spent the past decade convincing designers and engineers to work in the same file. At Config 2026, held June 24, the company made its most aggressive move yet toward eliminating the line between them entirely.

The centerpiece announcement is Code Layers: a system that brings executable code directly onto Figma's collaborative canvas. Users can convert any design layer into an interactive code layer with a single click or prompt, clone repositories to extract production flows into the canvas, and run npm packages including motion libraries and 3D frameworks without leaving Figma. AI chat can build and modify code layers on demand, or users can edit directly in Figma's built-in code composer. The result ships inside Figma Sites, backed by custom React code, with one-click code updates.

Code should be treated like any other design material, said Figma CEO Dylan Field. The framing is deliberate: Code Layers does not ask engineers to become designers or designers to become engineers. It treats both as collaborators on a shared surface where design and production logic coexist.

The practical implication is that the traditional handoff step where designers export specs and engineers rebuild them in code becomes optional. Teams can duplicate code layers to explore multiple directions simultaneously, extract design frames back into editable design layers, and keep interactive elements like dropdown menus and shader effects inside the same file where design decisions were made.

Alongside Code Layers, Figma launched a natural-language AI plugin builder that lets users describe the functionality they want and receive a working plugin without writing JavaScript or setting up a local development environment. The system supports reusable Skills, packaged workflows that Figma's AI assistant can execute on demand. The assistant now connects to external tools including Notion, Slack, GitHub, Atlassian, Granola, and Excel for richer context, with agent chats visible to teammates by default. The agent feature is available to all users today; FigJam and Slides access is on a waitlist.

The third major launch is Figma Motion, a native timeline and keyframe animation system available immediately. Animatable components synchronize across all files, and Dev Mode exports support CSS, JSON, React, MP4, WebM, animated SVG, and GIF, plus MCP compatibility for agent integration. AI-generated shader fills and 3D transforms are also included. Previously, motion work required external tools like After Effects or Rive; that step is now eliminated for most use cases.

The competitive context matters. AI-native tools have threatened to route around the design canvas entirely. Figma's response at Config 2026 is to make the canvas the place where production code lands, not just where mockups get handed off. By treating code as a canvas element, Figma repositions itself from a design tool to a collaboration surface that spans the full design-to-deployment pipeline.

Code Layers are in waitlist now, with rollout beginning in July 2026. Figma Motion is available to all users today. The company announced no changes to pricing at the conference.