Figma bets design and code will share a canvas. Cursor has $60 billion against it

Figma’s Code Layers feature does something that would have seemed like wishful thinking two years ago: it lets you clone a GitHub repository directly onto the design canvas. Once the repository is there, you can extract editable design frames from the code that already exists, make changes visually, and sync them back to the repository — all inside a single Figma file, with Figma’s full multiplayer collaboration intact. Design and development in the same window.

For designers who have spent years writing handoff notes, copying specs into Jira tickets, or sending Zeplin links to engineering, Code Layers changes where the conversation between design and code happens. Changes in Figma update the underlying code; changes in the code update the design layer. The bridge between the two disciplines has always required switching context — now that switching has a smaller gap.

Figma Motion turns animations into ready-to-ship code

Figma also announced Motion, a keyframe-based animation timeline built directly into the canvas. Designers can build transitions, hover states, and scroll animations with a timeline and preset library, then export them in seven formats: CSS, JSON, React, MP4, WebM, Animated SVG, and GIF. A loading animation designed in Figma is no longer a reference document for a developer to interpret — it is the animation itself.

The third major announcement was Shader Effects, GPU-accelerated fills powered by WebGPU (the browser’s newest graphics standard) that let designers apply complex, mathematically generated visual textures directly to Figma layers. Figma’s AI agent can generate these custom shader fills from a text description or an uploaded image. Type a phrase like ‘frosted glass with soft blue interference patterns,’ and the canvas produces something that renders live and can be tweaked interactively.

The AI agent adds skills, tools, and external connections

The AI agent itself got considerably broader. It can now build reusable ‘skills’ from natural language prompts (custom tools that automate repetitive design tasks without requiring any API knowledge) and connects directly to external services including Notion, GitHub, and Microsoft Excel. A later 2026 update will add Weavy, a workflow builder Figma acquired last year, for node-based automation inside design files.

Not everything here is available today. Code Layers is in early access, with applications opening in July 2026; it requires a Full seat on a paid Figma plan. Shader Effects and the enhanced AI agent are live on paid plans. Figma Motion is available now for Full seat holders, with general availability for Code Layers expected later in 2026.

Figma’s ambition to absorb parts of the code editor workflow runs into a real question: writing code and designing interfaces are different cognitive activities, and Cursor, the AI code editor that SpaceX acquired for $60 billion last week, has built its audience among engineers, not designers. Whether those two communities converge around a shared canvas is still an open question.

Tags: GitHub, Code Layers, Config 2026, creator tools, Cursor, Figma