Figma Config 2026: Code Layers Put the Codebase on the Design Canvas — And That Changes Everything for Dev Teams

What Code Layers Actually Are

At Config 2026 (June 25–26), Figma announced Code Layers: the ability to clone a repository, convert any design layer into an interactive, code-backed component with a single click or a text prompt, extract editable design frames from existing code, and sync changes back to the codebase — all within the same multiplayer Figma file where designers leave comments and product managers leave annotations. This is not a code export tool. Code Layers does not generate a static CSS snapshot that an engineer then manually reconciles with a production component. It maintains a live, bidirectional link between the design layer and the actual Git-tracked code. Changes in either direction propagate across the link. The design file and the codebase become, for the first time, the same artifact.

AI Skills and Custom Plugin Creation via Text Prompts

Alongside Code Layers, Figma introduced AI Skills: repeatable, prompt-defined behaviors that users can create for the Figma AI assistant with nothing more than a text description — no plugin SDK required. A designer can write a prompt like 'when I select a component, analyze its color contrast and flag accessibility violations' and save it as a reusable skill available to the whole team. Skills also support connections to external tools — Notion, GitHub, Granola, and Excel are listed in the announcement — so the AI assistant can pull in context from outside the Figma file. This turns Figma's AI from a single-purpose feature into a configurable agent layer built on top of the design canvas.

Native Motion and GPU Shaders Arrive

The third major Config 2026 announcement is native motion support. Figma can now animate any layer natively, including keyframe-based transitions, spring physics, and looping behavior. Separately, GPU shader effects — procedural visual effects written in a shader language and rendered in real time — are available on paid plans starting Config week. Creative directions that previously required a handoff to After Effects, Rive, or a custom GLSL implementation can now be prototyped and reviewed entirely inside Figma, at the same fidelity the final product will ship at.

What This Means for Engineering Teams

Code Layers inverts the traditional design-to-development workflow. In the traditional model, a designer produces a Figma spec, a developer implements it, and the two artifacts immediately begin to diverge. Every sprint cycle accumulates drift between the design and the implementation. Code Layers eliminates the handoff moment: the design canvas and the production codebase become the same document. For engineering teams, the near-term implication is that the Figma file becomes a legitimate environment for code review, not just design review. Product managers can annotate a specific component in the Figma file and point directly to the corresponding production code. QA engineers can mark visual regressions on the canvas without needing a separate issue tracker entry. The longer-term implication is structural: if code is a design material — as CEO Dylan Field argues — then the boundary between design tools and development environments is a gradient, not a wall. Tools like Cursor and VS Code operate from the code outward. Code Layers operates from the design inward. Teams that understand both surfaces will have a significant advantage over those that treat them as entirely separate disciplines.

Availability and What to Do Now

Code Layers rolls out starting July 2026, with a waitlist for early access open at figma.com. AI Skills and native motion support begin rolling out to paid plans immediately. GPU shader effects are available on paid plans now. For engineering teams evaluating their design-development workflows, the most useful step right now is not to join the waitlist and wait. It is to map where in your current process the design-to-code handoff creates the most friction — which components drift most from their specs, which design decisions get lost in translation, which QA cycles catch regressions that should have been caught earlier. Code Layers is most valuable for teams that already know precisely where their handoff fails.

Bottom Line

Figma's Config 2026 announcements represent the most significant repositioning of a design tool in at least a decade. Code Layers is not an incremental feature. It is an architectural statement: that design and code are the same medium, and that the tool which bridges them earns the right to sit at the center of the product development workflow. Whether Figma executes on that promise is a question for Q4 2026. But the direction is clear, and every engineering team with a design-to-development handoff problem should be paying close attention right now.