Figma Unveils Motion, Code Layers, and Shader Effects at Config.

Figma used its Config conference to roll out a suite of features aimed at tightening the loop between designers, developers, and AI. The design platform announced on LinkedIn that Figma Motion, Code Layers, Weave tools, generative plugins, and shader effects are now available or entering beta, marking one of the company's most expansive updates in recent months.

The headline addition is Figma Motion, a native animation tool that lets designers create timelines, keyframes, and easing curves without leaving the canvas. Teams can now prototype interactions with spring physics and complex motion paths, eliminating the need for external animation software or code-based workarounds. Figma Motion integrates directly with existing prototyping flows, so designers can preview animations in the browser and export specs for developers.

Code Layers address a persistent friction point: translating design files into production-ready markup. Designers can now attach code snippets, component mappings, and CSS overrides directly to layers in Figma. When developers inspect a design, they see not just dimensions and colors but the actual code Figma recommends, or custom code the design team has written. This bridges the gap between static mockups and live implementations, especially for teams using component libraries or design systems.

The feature builds on Figma's existing Dev Mode, which previously added web-to-Figma copying and tab groups for better file organization. Code Layers take that workflow further by embedding logic and structure inside the design file itself.

Weave tools are Figma's answer to workflow automation. Users can connect design tasks, API calls, and data sources in a visual editor, letting non-technical teams build custom pipelines without Zapier or Make. Examples include auto-generating design variants from a spreadsheet, syncing asset libraries with a CMS, or triggering notifications when a prototype is updated.

Generative plugins leverage AI models to create design assets, suggest layouts, or generate placeholder content. Figma did not specify which models power these plugins, but the timing aligns with the platform's broader AI push. The company recently added web search to its Design Agent and expanded its MCP server to support slides generation, signaling a commitment to embedding AI across the product.

Shader effects bring GPU-accelerated rendering to Figma, enabling designers to apply complex visual treatments like gradients, blurs, and distortions without performance degradation. The feature uses WebGL under the hood and supports custom shader code for advanced users. Shader fills extend this capability to text and vector layers, letting teams create dynamic backgrounds or animated textures directly in the design file.

These updates position Figma as more than a static design tool. By folding animation, code generation, workflow automation, and advanced rendering into a single platform, Figma is chasing the ideal of a unified workspace where designers, developers, and AI collaborate without switching contexts. Whether that vision holds up under real-world complexity remains to be seen, but the Config announcements suggest Figma is betting heavily on convergence over specialization.