TechCrunch: Figma adds code layers, animations, and AI features at Config 2026

At Config 2026 on June 24, Figma announced a suite of expansions to its collaborative design platform, the largest set of product changes the company has shipped at a single conference.

Code Layers allow any design layer to be converted into an interactive code layer directly on the canvas. Teams can clone repositories and bring code flows into Figma for rapid exploration — without the code needing to meet production standards. Figma’s Chief Product Officer described the purpose: the canvas is a space where “you don’t really care about the quality of the code,” which positions it as an exploration layer between ideation and engineering. Early access begins July 2026.

Figma Motion adds a native animation timeline to the platform. Keyframes, presets, and transitions now live in the same file as design components and variables. Export formats include CSS, JSON, React, MP4, WebM, animated SVG, and GIF. Until now, designers typically handed off motion specs to engineers or used separate tools like After Effects or Jitter to build animation prototypes.

Shader fills and effects bring AI-generated WebGPU shaders to the canvas. Designers describe a visual effect in natural language or use an image as reference; the Figma agent generates the shader. Rolling out in open beta to paid plan users.

Generative plugins let teams create custom Figma plugins — layout generators, vector path tracers, and similar tools — using natural language prompts, without writing plugin code.

Agent Skills and Connectors update the Figma AI assistant to follow team-specific conventions (Skills) and pull live context from external services (Connectors). MCP-connected integrations include GitHub, Notion, Slack, Atlassian, and Hex. The agent can also post updates back to connected tools.

For product managers: the MCP Connectors mean the Figma agent can now read live GitHub issues, Notion project state, or Slack threads and surface that context inline on the canvas. Combined with Code Layers, this makes Figma a more plausible coordination layer for teams that use AI coding tools alongside their design process.