Figma is pulling code, motion and shaders onto one canvas

At Config 2026, Figma pushed the canvas beyond static screens into a workspace for code layers, Motion, shader effects, generative plugins, Weave tools and an agent. For teams, that promises less switching between tools. It does not guarantee better products.

Figma is putting code and motion inside the layer model

The Verge framed the Config 2026 announcements as Figma adding AI motion graphics, shader tools and direct code work on the design canvas. Figma's own June 24, 2026 recap lists six main updates: code layers, Figma Motion, shader fills and effects, generative plugins, Weave tools and an upgraded agent.

Code layers are meant to treat code as another design material alongside images, vectors and design layers. Users will be able to turn a design layer into an interactive code layer with one click or a prompt, explore several coded directions side by side, extract editable design layers from code and push design changes back into the code layer. Early access is scheduled for July 2026 through a waitlist.

Figma Motion is available from June 24, 2026. It adds a timeline, keyframes, presets, AI assisted motion creation and exports to MP4, WebM, animated SVG and GIF. In Dev Mode, the timeline is meant to be inspectable by developers, with code copyable as CSS, JSON or React.

Designers get stronger prototypes and developers get fewer excuses

The strategic point is not one shiny effect. Figma is trying to move more work from handoff documentation into a shared environment. If motion, shaders and code layers live on the same canvas as components, design and engineering can argue over an object, not a screenshot in a ticket.

For product teams, the appeal is clearest in prototypes, marketing microsites and interactions that usually get lost during handoff. Motion connected to a design system and inspectable in Dev Mode has a better chance of surviving implementation than a video attached to an issue.

Figma is also defending its own center of gravity. After the rise of AI builders and vibe coding tools, it does not want to be the place where interface pictures are made. It wants to be the place where interfaces are tested, changed and partly assembled.

A stronger canvas can also create stronger mess

The weak point is governance. Once teams can prompt plugins, shaders and code layers, Figma can fill up with impressive objects that have no clear owner, performance budget or test path. An animation that looks good in a design file still has to survive accessibility, performance and real runtime constraints.

Availability is the second caveat. Code layers are headed to early access in July, interactive shaders are still described as coming soon and part of the value depends on how well Dev Mode, MCP and agent workflows connect. The announcement is ambitious, but the practical value will appear only in mixed teams where designers and developers truly edit the same object.

Pull requests will decide whether the canvas matters

The important signal is not the number of keynote demos. It is the number of cases where motion, a code layer or a shader moves from Figma into production without a manual rewrite and without turning into a performance budget incident.

Watch code layer adoption after the July early access, team rules for sharing generative plugins and whether developers actually treat Figma outputs as implementation material. If they do not, the canvas becomes a prettier parking lot for unmerged ideas.

Lilith's verdict

Figma wants design and code to stop sending postcards from opposite shores. The real test starts when someone carries the beautiful prototype into a pull request and CI lights up red.