Figma Brings Code Layers and Motion to the Canvas

The Gist

Integrated code layers. Designers can now create interactive code directly in Figma.
Built-in motion tools. Animation and timeline editing arrive natively on the canvas.
Workflow gains. Product and design teams get faster iteration and tighter collaboration.

Figma announced a suite of new features at Config 2026 on June 24, expanding its platform with code layers, built-in motion design, shader fills and effects, generative plugins, Weave tools and an updated Figma agent. According to the company, the announcements center on supporting new creative materials — code, motion and shaders — directly on the collaborative canvas.

Figma described code layers as treating code "like any other design material," letting users convert any design layer into an interactive code layer with a single click or prompt. Early access begins in July. Figma Motion, available now, adds a timeline with keyframes and presets, plus export in CSS, JSON, React, MP4, WebM, Animated SVG and GIF formats.

Config 2026 Feature Breakdown

Capability	Description
Code layers	Converts any design layer into interactive code with one click
Figma Motion	Adds timeline, keyframes and animation export in CSS, JSON and React
Shader fills & effects	AI-generated parameterized shaders created via text or image prompts
Generative plugins	Custom tools built by describing desired behavior; no dev environment needed
Figma agent	Uses skills, connectors and attachments to automate cross-tool workflows

The Gist Integrated code layers. Designers can now create interactive code directly in Figma. Built-in motion tools. Animation and timeline editing arrive natively on the canvas. Workflow gains. Product and design teams get faster iteration and tighter collaboration. Figma announced a suite of new features at Config 2026 on June 24, expanding its platform with code layers, built-in motion design, shader fills and effects, generative plugins, Weave tools and an updated Figma agent. According to the company, the announcements center on supporting new creative materials — code, motion and shaders — directly on the collaborative canvas. Figma described code layers as treating code "like any other design material," letting users convert any design layer into an interactive code layer with a single click or prompt. Early access begins in July. Figma Motion, available now, adds a timeline with keyframes and presets, plus export in CSS, JSON, React, MP4, WebM, Animated SVG and GIF formats. Config 2026 Feature Breakdown Capability Description Code layers Converts any design layer into interactive code with one click Figma Motion Adds timeline, keyframes and animation export in CSS, JSON and React Shader fills & effects AI-generated parameterized shaders created via text or image prompts Generative plugins Custom tools built by describing desired behavior; no dev environment needed Figma agent Uses skills, connectors and attachments to automate cross-tool workflows Recent Figma News Figma made one of 2025's most dramatic market debuts when it priced its IPO at $33 per share on July 31, raising $1.2 billion before closing its first trading day at $115.50 — a 158% surge that pushed its valuation near $50 billion. Full-year FY2025 revenue crossed $1 billion for the first time at $1.056 billion, up 41%, and Q1 2026 grew 46% to $333.4 million, prompting a full-year guidance raise to $1.422–$1.428 billion. On the product and M&A front, Figma acquired open-source headless CMS Payload in June 2025 and paid more than $200 million for Israeli AI startup Weavy, rebranding it Figma Weave to add generative image, video and motion capabilities. Figma Make exited beta, and weekly active users grew more than 70% quarter over quarter as of Q4 FY2025. Not all momentum has been frictionless. In January 2026, Figma integrated Anthropic's Claude into FigJam, but by April 2026, Anthropic CPO Mike Krieger resigned from Figma's board amid reports of a competing product. The company also faces a proposed class action filed in November 2025 alleging it silently opted users into AI training on their proprietary designs. Figma currently serves 13 million monthly active users. Figma's Design-to-Code Push Figma is collapsing the gap between design and engineering, with its boldest move arriving in late May 2026. Figma Make: Canvas-to-Code Editing On May 28, Figma launched new capabilities for Figma Make, its AI-powered prototyping tool. The update lets designers visually edit production codebases without leaving the canvas. It entered limited beta for Mac desktop users with four core capabilities: Direct visual editing: Select elements, adjust properties and let an AI agent locate and modify underlying code Annotation-based prompting: Annotate on-screen elements to describe interaction or animation changes Git workflow support: Create branches, revert commits and manage version control within Make Pull request creation: Open pull requests so engineers can review changes through standard processes A canvas-to-code loop also lets users copy screens from Make into Figma Design, then sync edits back to the codebase. Broader Platform Context Figma's platform spans design, prototyping, whiteboarding via FigJam and Dev Mode for design-to-code handoffs. These moves fit a wider industry pattern as design, development and content management converge into unified digital experience platforms. The Payload acquisition further signaled that CMS capabilities are migrating closer to where design happens. For development teams, AI integrations in design workflows offer more than speed. When AI can answer project-specific questions about why a component was built a certain way, less experienced developers can contribute safely and stay aligned with design intent. Figma Background Founded in 2012, Figma is a cloud-based design platform for design, product and engineering teams. It offers browser-based design and prototyping, FigJam for whiteboarding, Dev Mode for design-to-code collaboration and AI-assisted asset generation. — Figma Motion adds timeline-based animation, keyframes and multi-format export directly within the design canvas, part of a broader Config 2026 push to bring code, motion and interactive experiences into a unified design workflow.Figma

Recent Figma News

Figma made one of 2025's most dramatic market debuts when it priced its IPO at $33 per share on July 31, raising $1.2 billion before closing its first trading day at $115.50 — a 158% surge that pushed its valuation near $50 billion. Full-year FY2025 revenue crossed $1 billion for the first time at $1.056 billion, up 41%, and Q1 2026 grew 46% to $333.4 million, prompting a full-year guidance raise to $1.422–$1.428 billion.

On the product and M&A front, Figma acquired open-source headless CMS Payload in June 2025 and paid more than $200 million for Israeli AI startup Weavy, rebranding it Figma Weave to add generative image, video and motion capabilities. Figma Make exited beta, and weekly active users grew more than 70% quarter over quarter as of Q4 FY2025.

Not all momentum has been frictionless. In January 2026, Figma integrated Anthropic's Claude into FigJam, but by April, Anthropic CPO Mike Krieger resigned from Figma's board amid reports of a competing product. The company also faces a proposed class action filed in November 2025 alleging it silently opted users into AI training on their proprietary designs. Figma currently serves 13 million monthly active users.

Figma's Design-to-Code Push

Figma is collapsing the gap between design and engineering, with its boldest move arriving in late May 2026.

Figma Make: Canvas-to-Code Editing

On May 28, Figma launched new capabilities for Figma Make, its AI-powered prototyping tool. The update lets designers visually edit production codebases without leaving the canvas. It entered limited beta for Mac desktop users with four core capabilities:

Direct visual editing: Select elements, adjust properties and let an AI agent locate and modify underlying code
Annotation-based prompting: Annotate on-screen elements to describe interaction or animation changes
Git workflow support: Create branches, revert commits and manage version control within Make
Pull request creation: Open pull requests so engineers can review changes through standard processes

A canvas-to-code loop also lets users copy screens from Make into Figma Design, then sync edits back to the codebase.

Broader Platform Context

Figma's platform spans design, prototyping, whiteboarding via FigJam and Dev Mode for design-to-code handoffs. These moves fit a wider industry pattern as design, development and content management converge into unified digital experience platforms. The Payload acquisition further signaled that CMS capabilities are migrating closer to where design happens.

For development teams, AI integrations in design workflows offer more than speed. When AI can answer project-specific questions about why a component was built a certain way, less experienced developers can contribute safely and stay aligned with design intent.

Figma Background

Founded in 2012, Figma is a cloud-based design platform for design, product and engineering teams. It offers browser-based design and prototyping, FigJam for whiteboarding, Dev Mode for design-to-code collaboration and AI-assisted asset generation.

Have a tip to share with our editorial team? Drop us a line:

Figma Launches Code Layers & Motion at Config 2026