Figma Introduces Code Motion and Shaders to Its Design Canvas
  • News
  • North America

Figma Introduces Code Motion and Shaders to Its Design Canvas

Announced at Config 2026, the updates unify design, code, and animation on a single canvas.

6/25/2026
Ali Abounasr El Alaoui
Back to News

Figma has unveiled a transformative suite of tools at its annual Config 2026 conference, fundamentally reshaping its design platform. The announcements center on the theme of "limitless expression," aiming to break down the barriers between design, code, motion, and generative AI. These new capabilities position the Figma canvas as a unified environment where creative ideas can be developed without tool-based limitations.


Integrating Code as a Core Design Material

A central announcement is the introduction of code layers, which treats code as a primary material within the design canvas. This feature challenges the traditional separation between design and development by allowing interactive code to exist alongside visual elements. Teams can now iterate on functional components directly in Figma, fostering a more integrated and collaborative workflow between disciplines.

Bringing Designs to Life with Native Motion

Figma is also launching a native motion design toolset, eliminating the need for many third-party animation applications. Integrated directly into the design environment, Figma Motion includes a timeline, keyframes, and presets for creating sophisticated animations. This allows motion to become a reusable and consistent part of a team's core design system for the first time.

The new motion capabilities are designed with developers in mind, ensuring a seamless handoff from design to production. In Dev Mode, the entire animation timeline is inspectable, with every value and easing curve clearly defined. Developers can copy animation code directly in formats like CSS, JSON, or React, significantly improving implementation accuracy and speed.

Expanding Creative Expression with Generative AI

The platform is expanding its visual capabilities with the introduction of shader fills and effects powered by the Figma agent. Users can now generate complex visual styles, such as riso prints or particle effects, using simple text prompts or image references. These shaders are fully parameterized, providing on-canvas controls that allow for deep customization and creative exploration.

Furthering its investment in AI, Figma introduced generative plugins and Weave tools to automate and customize workflows. Generative plugins enable users to create their own tools by describing the desired functionality, without needing any coding experience. Figma Weave tools allow for the creation and sharing of complex, node-based generative workflows directly on the canvas.

A More Context-Aware Design Agent

The Figma agent, the platform's AI assistant, has received significant upgrades to better understand user workflows. New features like Skills, Connectors, and Attachments allow the agent to learn team conventions and integrate with external tools like Slack and GitHub. This enhanced context awareness aims to make the agent a more powerful and intuitive partner in the design process.


The announcements from Config 2026 signal a major evolution for Figma, moving it beyond a traditional design tool into an all-encompassing creative platform. By integrating code, motion, and advanced generative AI directly into the canvas, the company is empowering teams to explore new creative frontiers. These updates promise to streamline workflows, enhance collaboration, and redefine the boundaries of digital product creation.