Figma introduces code layers, motion support, and AI-powered custom plugins in latest update
Figma's addition of a dedicated code layer and native shader support fundamentally bridges the gap between static design mockups and actual frontend implementation. By allowing developers to embed real code and generate custom AI plugins on the fly, it shifts Figma from a pure design tool to a functional prototyping environment. This drastically reduces the friction and translation errors typical in the design-to-code handoff.
Figma has rolled out a substantial update targeted at closing the persistent gap between design and frontend development. The release introduces a dedicated code layer, native support for motion and shaders, and extensible AI features that allow users to generate custom plugins on the fly.
Technical Details The introduction of a "code layer" enables actual code—whether CSS, React components, or JSON data—to reside directly within the Figma canvas. This moves beyond standard text nodes, allowing designs to carry structural and functional context. Alongside this, Figma has added native support for motion and shaders (GLSL). This means complex UI animations, transitions, and WebGL-style visual effects can be prototyped and parameterized natively. Additionally, the new AI capabilities allow users to generate custom plugins using natural language. This acts as an embedded copilot for tool-building, interacting directly with the Figma API to automate repetitive tasks or manipulate node data without requiring deep TypeScript expertise.
Why It Matters For frontend engineers, the design-to-code handoff is traditionally fraught with friction. Visual approximations of animations or complex components often require painstaking reverse-engineering into CSS or JavaScript. By embedding code layers and shaders directly into the design file, Figma ensures the "source of truth" includes programmable logic, not just vector paths. The AI plugin generation is equally impactful; engineering teams can now rapidly build scaffolding tools that extract design tokens, format them for specific codebases, or map Figma components directly to internal React or Vue libraries. This drastically reduces manual translation and accelerates the development cycle.
What to Watch Next The true test of this update will be its integration into broader developer ecosystems. Watch for how easily these code layers can be extracted into CI/CD pipelines, GitHub repositories, or tools like Storybook. Furthermore, as teams begin utilizing AI to generate custom plugins, monitor how Figma handles the security and permission models of these scripts, particularly when they interact with proprietary data or external APIs.