Code Layers Challenge Cursor as GPU Shaders Hit Paid Plans

Figma closed its three-day Config 2026 conference on Thursday with a product slate that moves it onto direct competitive ground with AI coding environments like Cursor and Replit, and into motion design territory previously occupied by After Effects. The announcements, delivered in a Wednesday keynote at Moscone Center in San Francisco, put GitHub-linked code, a full keyframe animation timeline, programmable GPU-accelerated visual effects, and integrated generative-image tooling onto a single canvas — a structural expansion that, for the first time in Figma’s 14-year history, treats code as a design material equal to vectors and frames.

For the more than 10 million users across Figma’s platform — designers, engineers, product managers, and marketers — the practical question is immediate: several tools they currently pay for separately, among them GitHub integrations, After Effects, and AI-native coding environments, now have first-party equivalents on the canvas, available now or within weeks.

Code Layers Bring GitHub Directly to Canvas, Bypassing the Handoff Phase

The most structurally significant announcement is Code Layers, which allows teams to pull GitHub-linked repositories directly onto the design canvas and work with them alongside visual components. Users can clone a repository, convert any design layer into an interactive code-backed layer with a single click or prompt, extract editable design frames from code, and sync changes back to the codebase — all within the same multiplayer file where designers leave comments and product managers leave annotations.

Chief product officer Yuhki Yamashita told reporters the multiplayer canvas is powerful because teams exploring new directions can iterate without the pressure of code quality, allowing experimentation before any production concern enters the picture. Code Layers is backed by custom React code and supports npm packages, including motion libraries and 3D frameworks.

The handoff phase — the point where a designer hands a Figma file to an engineer who then recreates it in code, and both sides spend days reconciling spacing, states, and animation details — has been the dominant source of implementation drift in software teams for over a decade. Code Layers attacks this structurally. Where AI coding tools like Cursor and Replit have moved development upstream toward the design phase, Figma is moving the design canvas downstream into the codebase. Early access opens in July via figma.com/config-betas.

What WebGPU Makes Possible Inside a Browser That WebGL Never Could

Shader fills powered by WebGPU are live today for Full seat users on paid plans. To understand why this matters technically, the distinction between WebGL and WebGPU is not cosmetic.

WebGL, which powered Figma’s renderer for years, is a JavaScript port of OpenGL ES 2.0 — a graphics API whose design dates to 2007, with no path to the GPU capabilities found in Direct3D 12, Apple’s Metal, or Vulkan. WebGPU, standardized by the W3C GPU for the Web Working Group with contributions from Apple, Google, Mozilla, Intel, and Microsoft, maps directly to those modern APIs. It ships as a production standard in Chrome, Edge, Opera, and Safari, with approximately 82% global browser support as of June 2026.

The critical difference is compute pipelines. WebGL can only execute graphics rendering — processing vertices and producing pixels. WebGPU supports general-purpose GPU computation alongside rendering, meaning workloads traditionally requiring a native application or a server round-trip can now run entirely in a browser tab at GPU clock speeds, not CPU clock speeds. This is the same architectural capability that underlies browser-side machine learning inference and real-time game engine rendering — Figma’s shader fills are the first surface of a deeper architectural unlock.

Figma began migrating its rendering backend from WebGL to WebGPU in 2023, writing all its internal shaders in WebGPU Shading Language (WGSL), a Rust-inspired language designed specifically for the new standard. Shaders have always powered Figma’s canvas rendering behind the scenes. What Config 2026 adds is user-authorability: instead of requiring shader programming knowledge, users describe an effect to the design agent, and the agent generates a parameterized WGSL program with controls that surface directly on the canvas. Effects include dithering, pixelation, blur, frosted glass, liquid metal, fractal noise, and moiré patterns. Shader effects can be stacked, exported to Figma Make, and shared across teams.

One real constraint remains: Firefox, as of mid-2026, has WebGPU disabled by default, with the team citing security fingerprinting vectors and driver stability concerns. Users on Firefox will not see shader fill effects render. Interactive shaders, which respond to user input in real time, are listed as coming soon; Figma has noted that performance optimization is still underway.

Figma Motion: Keyframe Timeline With CSS, React, and MP4 Export

Figma Motion is available in open beta starting today. It adds a full keyframe timeline inside Figma Design files, complete with keyframes, easing curves, spring animations, and preset starting points. Because it is built on Figma’s platform, an animated component defined once carries its motion behavior across every screen and every collaborator’s file — the same way fills and typography already do.

The export breadth is the operational argument for motion designers weighing whether to keep a parallel After Effects workflow. Figma Motion exports in CSS, JSON, React, MP4, WebM, Animated SVG, and GIF. CSS and React outputs go directly to engineering handoff. MP4 and WebM cover presentation and marketing use cases. Animated SVG rounds out a toolkit that previously required separate tools at nearly every step.

Publishing animated components and high-resolution MP4 export require a Full seat on a paid plan. The feature is not available on Government plans.

Weave Tools and Generative Plugins: AI Image Generation on the Canvas

Figma’s generative-image capability, branded as Figma Weave, is now accessible through standard Figma Design files as a first-party integration. Figma acquired Weavy, the Israeli AI startup behind the underlying technology, for more than $200 million in October 2025 and rebranded it — the Config 2026 update brings pre-built workflow templates onto the canvas for Professional plans and above with Full seats, including background replacement, logo insertion, and aspect ratio adjustment.

A separate generative plugins framework allows users to build custom tools natively on the canvas by prompting the design agent, without a local developer environment or plugin API knowledge. Figma ships over 30 starter plugins and shaders in a new Tools tab alongside classic plugins.

A Platform Under Pressure, Expanding Anyway

Config 2026 is the company’s first major product showcase since its $1.2 billion NYSE IPO in July 2025. The competitive context has shifted substantially since that listing. Figma’s stock, which reached a 52-week high of $142.92, had fallen to roughly $19 by June 2026 — a decline driven in part by investor concern about AI coding tools displacing traditional design workflows, and by the high inference costs of running AI features powered by providers such as Anthropic and OpenAI, both of which are building competing products. Revenue, however, continues to grow: the company reported $1.056 billion in fiscal year 2025 revenue, up 41%, and Q1 2026 revenue grew 46% to $333.4 million.

The product logic behind Code Layers and Figma Motion is that the design canvas should absorb the adjacent tools — code editors, motion software, GPU shader environments — rather than be routed around by them. Dylan Field, Figma’s CEO and co-founder, closed the keynote with the conference’s central message: “AI has lowered the floor, but it has not raised the ceiling. Designers, creatives, builders — you will raise the ceiling.”

Separately, a proposed class action filed in November 2025 — Khan v. Figma Inc. — alleges the company used customer design files to train its generative AI models without consent. Figma has denied the allegations, stating it does not use customer data to train its models without permission and that de-identification protections apply where data is used with authorization.

Frequently Asked Questions

What is Figma Code Layers and when can I use it?

Code Layers is a new Figma feature that lets teams clone a GitHub repository onto the design canvas, convert design layers to interactive code-backed layers, and sync changes back to the codebase — all in the same multiplayer file. It supports React-based code and npm packages, including motion libraries and 3D frameworks. Code Layers is currently in a waitlist beta, with early access opening in July 2026 at figma.com/config-betas.

Does Figma Motion replace After Effects for motion designers?

Figma Motion is a native keyframe timeline inside Figma Design files, available in open beta today on all plans, with a Full seat required on a paid plan for publishing animated components and high-resolution MP4 export. It exports CSS, JSON, React, MP4, WebM, Animated SVG, and GIF. For teams whose motion work is primarily interface animation that needs to reach engineering in CSS or React, it offers a single-file workflow that After Effects does not. For teams doing complex compositing, effects work, or motion graphics outside a product UI context, After Effects covers use cases Figma Motion does not currently address.

What is WebGPU and why does it matter for Figma’s shader fills?

WebGPU is the W3C-standardized successor to WebGL, and it maps directly to modern native GPU APIs — Vulkan, Apple’s Metal, and Direct3D 12 — rather than the OpenGL ES 2.0 design that WebGL was built on. The key architectural difference is that WebGPU supports general-purpose GPU computation alongside graphics rendering, meaning work that previously needed a native application or a server can now run entirely in the browser at GPU speed. Figma uses WebGPU to render programmable shader fills — effects like dithering, blur, frosted glass, and fractal noise — generated as WGSL programs by the design agent. Users on Firefox will not currently see these effects render, as Firefox has WebGPU disabled by default.

How is Figma competing with Cursor, Replit, and other AI coding tools?

AI coding environments like Cursor and Replit have moved the development workflow upstream — toward the design phase — by generating UI components from prompts. Figma’s Code Layers move in the opposite direction, bringing the production codebase directly onto the design canvas. The result is that iteration, annotation, and design-system alignment can happen in the same Figma file as the GitHub-tracked code, rather than requiring a separate handoff step. Figma’s stated competitive advantage is that the design system is already loaded; engineering teams joining a Figma file work with the actual components, tokens, and constraints rather than building from scratch.

Figma Config 2026 ran June 23–25 at Moscone Center, San Francisco. Code Layers enters early access in July; Figma Motion is available in open beta now; WebGPU shader fills are live on paid plans.