Figma Config 2026: Code Layers, AI Agents & Design Handoff

Config 2026 is Figma's most developer-forward release to date. Rather than shipping incremental updates, the company reimagined what the canvas can hold — design, code, motion, shaders, and AI agents all coexisting in a single multiplayer file. Here is everything announced and what it means for how teams build products.

The Central Idea: Code as Canvas Material

Dylan Field opened Config with a single thesis: "No tool should limit where an idea can go." Every announcement flows from that premise. Code, motion, shaders, and AI workflows are now first-class materials on the Figma canvas — the same way images and vector layers have always been.

The result is a tighter loop between ideation and implementation. Designers no longer export a static spec; engineers no longer reinterpret intent. The canvas becomes the shared artifact.

Code Layers: Design and Code Side by Side

The headline feature is code layers — a mechanism to embed live, functional code directly on the Figma canvas as a dedicated layer type.

To get started, teams can:

• Convert any existing design frame to a code layer with a single click
• Clone a GitHub repository directly onto the canvas
• Upload a local project folder
• Ask the Figma agent to generate a code layer from a text description

Once a code layer exists, it behaves like any other Figma layer: resizable, commentable, duplicatable for A/B exploration, and visible to all collaborators in the shared file. NPM packages load inside code layers — including motion libraries and 3D frameworks — so interactive prototypes run real dependencies rather than smart-animate approximations.

Extract Designs bridges the gap in the other direction: convert any code layer back into editable Figma design layers, selecting specific screens, states, or entire flows. A single click syncs canvas edits back to the code.

React is the first supported framework. Code layer rollout begins in July 2026 on an invite basis — sign up at figma.com/config-betas.

Figma Motion: Full Animation Timeline Built In

Figma Motion brings a keyframe-based animation timeline directly into Figma Design. No third-party handoff, no separate motion tool.

Key capabilities:

• Keyframe editor with easing curves, spring animations, and presets
• AI-assisted animation generation: describe a transition, the agent builds it
• Motion as a design system component — reusable across files
• Dev Mode timeline inspection, fully MCP-compatible for programmatic access

Export targets: CSS, JSON, React, MP4, WebM, Animated SVG, and GIF.

Motion is in open beta for all plans with Full seats. Publishing animated components and high-resolution video exports require a paid plan.

Figma Agent: Skills and Connectors

The Figma agent received the most significant upgrade in Config 2026's lineup. Two new capabilities shift it from chat assistant to workflow automation layer.

Skills

Skills let teams encode their conventions, naming rules, spacing logic, or component patterns as reusable, shareable automations. A designer can build a Skill that:

• Renames all layers to a team naming convention
• Applies consistent padding across a selection
• Generates a complete token set from a brand color reference
• Converts a frame to a specific component structure

No Plugin API knowledge required. Describe the behavior — the agent creates the Skill. Share it with a file, and everyone on the team can run it on demand.

Connectors

Connectors wire the agent to external tools so it operates with real product context:

• GitHub — read branch state, inspect PRs, surface recent diffs
• Notion — pull in specs, docs, or product requirements
• Slack — surface conversation threads as design context
• Atlassian — link Jira tickets to specific design layers
• Granola and Hex — meeting notes and data notebooks

Agent threads are visible to all teammates by default, making AI-assisted decisions part of the shared design history. Skills and Connectors are in open beta on Professional, Organization, and Enterprise plans. AI credits are free during beta; standard usage applies at general availability.

Shader Fills and Generative Plugins

Shader Fills

Describe a visual effect in text — or reference an image — and the Figma agent generates a native WebGPU shader for it. Shaders are:

• Parameterized with drag controls directly on the canvas
• Stackable on top of existing fills and effects
• Exportable via MCP or as PNG and MP4

Interactive shaders (where end users interact with the running shader in the browser) are coming in a future update pending performance work. Shader fills are available in open beta on paid plans only.

Generative Plugins

Custom plugins now require only a text description. Define the behavior, sliders, and parameters in the agent chat, and Figma builds a hosted plugin scoped to the current file. No local development environment needed; classic plugin development via the Plugin API remains unchanged.

Team and organization-wide publishing are on the roadmap. Generative plugins are in open beta on paid plans.

Weave Tools

Figma Weave Tools bring a node-based content generation workflow to the design canvas. Teams compose multi-model pipelines — combining image generation, text, data sources, and Figma components — and publish them as reusable templates or community tools. Background replacement, logo application, and aspect ratio adjustments ship in the initial release.

Professional, Organization, and Enterprise plans have access. The Weave product includes a monthly AI credit allocation separate from other Figma AI usage.

Availability at a Glance

What Changes for Design-to-Code Teams

The Config 2026 feature set compresses several handoff steps that have defined product teams for a decade:

• Prototypes run real framework code — stakeholders review actual behavior, not animations that approximate it
• Motion specs are inspectable in Dev Mode and exportable as production-ready CSS or React — no recreation needed
• Conventions live in Skills, not tribal knowledge — agents enforce them automatically
• External context (tickets, docs, conversations) reaches the canvas without context-switching

Teams still need engineers for data integration, API design, and production infrastructure. But the design-to-implementation feedback loop — the part where weeks compress into days when it goes well — gets measurably faster.

Getting Early Access

Code Layers waitlist is open now at figma.com/config-betas. All other Config 2026 features are rolling out through open beta on existing Figma plans — check Settings in your Figma account for available beta toggles.

Config 2026 signals that Figma is no longer positioning itself as a design tool. It is becoming the shared environment where design decisions and implementation decisions happen together, in the same file, by the same cross-functional teams — starting this month.