Skip to content
News Product launch

Figma Config 2026 ships code layers, Motion timeline, and generative plugins for the design canvas

· by Pondero Newsdesk

The short version

Figma announced code layers, a native animation timeline, shader fills, and prompt-built plugins at Config 2026 on June 24, expanding the design canvas into code and motion territory.

Figma Config 2026 ships code layers, Motion timeline, and generative plugins for the design canvas

Until now, a developer finished in Figma and re-built in code, with only static inspection data bridging the gap. Config 2026, held June 24, changes that: code layers let a developer's actual implementation live on the same canvas as the design, with two-way sync between the design state and the code state. Figma also shipped a native animation timeline, AI-generated shader materials, prompt-built plugins, and Weave image tools at the same event.

What

Code layers are the headline feature. Per Figma's blog, any design layer can be converted into an interactive code layer with a single click or a text prompt. Code layers can be duplicated side by side for parallel exploration, just like design frames, and teammates can comment and iterate in the same file. Designers can extract code back into editable design layers and then push updates in one click when ready. Early access starts in July via the waitlist at figma.com/config-betas.

Figma Motion adds a timeline with keyframes, presets, and full Dev Mode inspection. Animations export as CSS, JSON, React, MP4, WebM, animated SVG, or GIF. Motion is MCP-compatible, so animated frames can be passed directly to a coding agent without a manual export step. Per the announcement, motion components travel across design systems the same way typography and fills do.

The remaining three features round out the release. Shader fills let users describe or reference a look and the Figma agent builds a parameterized shader exportable to code. Generative plugins let anyone create a custom tool in plain text without touching the plugin API. Weave tools bring AI image generation, style transfer, and multi-model workflows onto the canvas today, with team and community publishing scheduled for later in 2026. The Figma agent also gained connectors to Notion, Slack, GitHub, and Atlassian, plus packaged "skills" for repeatable workflows.

Why it matters

Code layers change the design-to-development workflow from "hand off and wait" to "iterate together." For teams using AI coding tools like Cursor, the MCP-compatible Motion export and code layer output are directly consumable by the AI agent in the IDE, cutting one more manual translation step.

Generative plugins lower the floor for custom tooling. Teams with specific workflows previously needed a developer to maintain a plugin; now the same team can describe and publish that tool without any plugin API knowledge. The Weave integration extends that to image generation and style workflows, meaning art direction tasks that previously required a separate AI tool can happen on the canvas.

If your team uses Cursor or another AI coding agent, the July waitlist for code layers is the immediate priority; if you are a solo designer, Weave tools and generative plugins are available now.

What to watch next

Code layers early access opens in July; that is the first real test of whether the two-way sync between code and design layers holds up under production conditions and across large teams. Watch also for the team and community publishing rollout for generative plugins and Weave tools, which Figma described as "soon" without a specific date. Per Figma's help center, availability details for each feature are documented there as they ship.

Sources