Figma Code Layers brings real code onto the design canvas

What this is about

Figma announced several concrete tools for product teams at Config 2026 on June 24, 2026: Code Layers, Figma Motion, Shaders, generative plugins and Weave workflows. The most important part for teams working between design and engineering is Code Layers: code should no longer appear only at the end as a specification, but as editable material directly on the Figma canvas.

This is an AI tools story because Figma is not using its agent only to generate ideas. The agent can create code layers from descriptions, work with existing code and bring the result back into the team workflow. For designers, frontend engineers and product managers, Figma becomes less of a handoff document and more of a shared workspace.

What Figma Code Layers actually does

Code Layers are layers in Figma Design that consist of real code. According to Figma, a team can add a code layer from the toolbar, create one from an existing frame or ask the Figma agent to build a variant. It can start from templates, upload a local folder or import a GitHub repository.

The practical workflow is clear: a team can explore several UI directions side by side, using code rather than only vector shapes. Code generated or edited in Figma Make can be brought onto the canvas. Changes are meant to flow back into code later. Figma Motion adds timeline-based animation, Shaders adds WebGPU-based visual effects, and generative plugins turn recurring team tasks into reusable tools.

Why it matters

The classic design-to-code process often breaks in the same place: a design looks coherent, but the technical reality appears later in the repository. Figma is trying to reduce that gap. When code, design system, agent and team comments live in the same workspace, product teams can see earlier whether an idea is actually buildable.

Independent reporting from The Verge describes Code Layers as one of the central Config 2026 updates, alongside AI-generated motion and shader effects. Figma itself frames the launches as new materials on the canvas: code, motion, shaders and Weave tools. That matters for UI-heavy product teams because that is where many small iterations between design and frontend engineering happen.

In plain language

Imagine an architect who no longer draws only a floor plan, but puts real building parts on the table. A wall is not just a line, but a part that can later be installed. Code Layers make some Figma elements work like those building parts: not automatically production-ready, but much closer to what should end up in the product.

A practical example

A SaaS team is building a new onboarding flow for 12,000 monthly trial users. Today, design creates three variants, engineering rebuilds one, and spacing, responsiveness and edge cases appear only in the pull request. With Code Layers, the team could generate three interactive variants directly on the canvas, import an existing component from the GitHub repository and test the login step with more realistic states.

If conversion in the first step rises by only 0.4 percentage points, that would mean 48 additional people per month reaching the critical step out of 12,000 trial users. The bigger gain is speed: less translation between Figma file, ticket, Slack and repository.

Scope and limits

First, code on the canvas does not replace a clean review process. What looks good still needs testing, versioning and validation in the real product context.

Second, availability matters. Figma lists beta or coming-soon status for some Config 2026 features. Admins should check which functions are actually enabled in their plan and region before rollout.

Third, privacy and IP questions remain central. Teams that bring GitHub repositories, local folders or internal design systems into an AI-assisted tool need clear rules for access, approvals and sensitive customer data.

SEO & GEO keywords

Figma Code Layers, Figma Config 2026, Figma Motion, Figma Shaders, Figma Weave, design-to-code, AI design tools, product design workflow, GitHub integration, generative plugins, frontend collaboration, design systems