DMR News

Advancing Digital Conversations

Figma Adds Code Layers, Motion, Shaders, and AI-Built Plug-Ins

ByJolyen

Jun 25, 2026

Figma Adds Code Layers, Motion, Shaders, and AI-Built Plug-Ins

Figma has expanded its design platform with code layers, animation tools, shader effects, and AI features that let users create custom plug-ins through text prompts.

The updates bring more coding and visual-production capabilities directly into Figma’s collaborative canvas. The company wants designers, developers, and product managers to test ideas together without repeatedly moving between separate design, animation, and coding applications.

Code Layers Bring Working Interfaces Into the Canvas

Figma’s new code layers allow teams to place interactive, code-based elements alongside conventional design layers. Users can connect repositories, bring existing interfaces into Figma, and extract individual flows for testing and collaborative review.

The feature is intended for rapid experimentation rather than producing final production code. Teams can compare multiple directions on the same canvas, change interface behaviour, and discuss options before engineers approve and implement the finished product.

Figma has already connected its platform with coding agents through integrations such as Claude Code and OpenAI Codex. These tools can transfer working interfaces into editable Figma designs and send design context back into development workflows.

Motion and Shaders Expand Visual Design Options

The company also introduced Figma Motion, which adds a timeline for creating animations, transitions, and 3D transforms directly inside the design platform.

Previously, designers often created complex animation assets in external software before converting them into a compatible format. The new tools let teams adjust timing, movement, easing, and interactions without leaving Figma.

Shader fills and effects add programmable visual treatments such as waves, particles, gradients, and dynamic textures. Users can create some of these effects with AI prompts rather than writing shader code manually.

AI Can Build Custom Tools and Repeatable Skills

Figma’s generative plug-ins allow users to describe a tool in natural language and have AI create it. Possible examples include layout generators, vector tracing utilities, and tools for automating repetitive design work.

The company is also expanding its AI agent with repeatable skills. Teams can write instructions that define how the agent should complete common tasks, then provide additional context by connecting services such as GitHub, Notion, Granola, and Excel.

Figma is integrating Weavy, the node-based AI workflow company it acquired in 2025, under the new Figma Weave name. Users can access prepared Weave tools inside Figma, while a later update will allow them to generate and edit full workflows without leaving the canvas.

Several of the features announced at Config 2026 are currently in beta or have limited availability. Figma said it will expand access as testing continues.


Featured image credits: Magnific.com
For more stories like it, click the +Follow button at the top of this page to follow us.

Jolyen

As a news editor, I bring stories to life through clear, impactful, and authentic writing. I believe every brand has something worth sharing. My job is to make sure it’s heard. With an eye for detail and a heart for storytelling, I shape messages that truly connect.

Leave a Reply

Your email address will not be published. Required fields are marked *