Figma Unveils AI Motion Graphics, Shader Tools, and Code Layers at Config 2026

Figma rolled out a sweeping update at its annual Config conference that bolts code directly onto its design canvas. The centerpiece, code layers, lets users build custom interactions inside Figma Sites by writing or generating code alongside visual elements. The Verge reports that motion graphics and shader tools also joined the lineup, giving designers access to effects that previously demanded separate motion or 3D software. AI features now thread through the entire workflow, from generating prototypes to creating custom plugins for specific tasks.

The update lands roughly a year after Figma introduced Make, its AI prompt-based prototyping tool. Since then, the company has sanded down the wall between design and engineering, and this release strips it back almost entirely. Code layers sit on the same canvas as frames and shapes, behaving like any other layer but carrying executable logic. Users can add them through AI collaboration, manual coding, or pre-built templates.

Code layers function as individual objects within the Figma Sites editor, according to Figma's developer documentation. They respond to breakpoints, copy and paste like standard layers, and apply across all page sizes or single breakpoints. Three creation paths exist: collaborating with AI through natural language prompts, writing code manually, or adapting existing templates. This flexibility means a designer with minimal coding experience can still add complex interactivity, while engineers retain full control when needed.

Figma's help documentation notes that AI features must be enabled to chat with AI for code layer assistance, though the core functionality requires only edit access to the site file. The company has made the feature available on all plans, not just premium tiers, which signals an aggressive push for adoption across its 10 million-plus user base. Code components, a separate but related feature, offer another method for injecting custom code into pages alongside code layers.

Figma's AI ambitions extend well beyond code generation. TechCrunch reports that the platform now supports creating custom plugins for various tasks using AI, expanding what third-party developers and internal teams can build atop Figma. This follows the pattern established by Figma Make, which turned text prompts into working prototypes. The new motion graphics and shader capabilities bring real-time visual effects into the same environment where they're designed, eliminating round-trips to After Effects or dedicated 3D tools.

The AI layer serves a strategic purpose: it lowers the skill barrier for advanced features while keeping power users inside the ecosystem. Designers who previously exported to external tools for animation or shader work can now iterate without leaving Figma. CMSWire notes that designers can modify production code directly, enabling visual editing of live code rather than static mockups. This blurring of design and engineering workflows has been Figma's trajectory for years, but the latest tools collapse the remaining separation.

Figma's move into code and motion graphics puts fresh pressure on Adobe's Creative Cloud suite, particularly After Effects and Animate. The company has steadily absorbed functionality from adjacent tools, first prototyping, now development and motion. Adobe's attempted $20 billion acquisition of Figma, blocked by regulators in 2023, looks increasingly like a near-miss in hindsight. Figma's independence allowed it to build directly against Adobe's product map rather than integrating into it.

The shader and motion tools also encroach on territory held by specialized tools like Spline, Rive, and Lottie. For teams already embedded in Figma, the convenience of staying in one tool may override the superior depth of dedicated alternatives. The risk for competitors isn't that Figma matches their capabilities, but that good enough within an existing workflow beats best-in-class with friction. Figma's bet is that the switching cost of adding another tool exceeds the performance gap for most use cases.

The practical impact depends on team structure. For small teams without dedicated frontend developers, code layers offer a path to production-quality interactivity that previously required hiring or outsourcing. For larger organizations, the feature threatens to disrupt established handoff rituals between design and engineering. CMSWire's observation about blurring lines between design tools and engineering workflows carries weight: when designers can modify production code, the traditional review and QA gates become harder to enforce.

Figma's pricing makes the feature broadly accessible, which accelerates adoption but also creates governance challenges. Companies with strict code review processes may need to establish new controls for what gets pushed from Figma. The AI-assisted code generation, while convenient, introduces the same reliability concerns that plague all generative coding tools. Output quality varies, and debugging AI-generated code still demands technical literacy that not all designers possess.

The trajectory points toward Figma becoming a full-stack creation platform rather than a design tool with adjacent features. Code layers, AI plugins, motion graphics, and shaders represent four distinct technical domains now housed under one roof. The company hasn't hidden this ambition; Figma's own blog frames code layers as answering "what if you could design and build on the same canvas?"

The open question is whether Figma can maintain quality across this expanding surface ambitious without becoming bloated or unreliable. Each new domain, motion, shaders, code execution, carries distinct technical challenges and failure统一到期的风险. Figma's history suggests disciplined execution, but the breadth of this release tests even that track record. For now, the market response will hinge on whether teams actually shift workflows or merely experiment with the new tools while keeping existing processes intact.