Figma: Config 2026 — code layers, motion timeline, shaders, and an upgraded design agent

Figma held Config 2026 at Moscone Center in San Francisco from June 23 to 25, with the product keynote delivered by CEO Dylan Field on June 24. The announcements extend Figma’s reach into animation, code, and procedural visual effects—areas that previously required designers to leave the tool entirely.

Code layers. Designers can now convert design layers into interactive code layers with a single click, enabling side-by-side exploration of different implementation approaches within the same file. Teams can clone repositories directly into Figma and extract flows from code into design layers for inspection and iteration.

Figma Motion. A timeline-based animation tool now lives inside Figma Design. Keyframes, animation presets, and motion variables allow teams to build animated components that travel with their design systems. Animations export to CSS, JSON, and React formats. The design agent can generate starting keyframes from text prompts.

Shader fills and effects. AI-generated procedural effects—visual treatments created algorithmically rather than through static fill settings—can be customized through parameterized controls and stacked with other effects. They convert to code and common export formats.

Generative plugins. Designers can describe a custom tool in natural language and Figma builds the plugin without requiring a development environment or prior coding knowledge.

Enhanced design agent. The agent now supports user-defined skills that package recurring workflows and conventions into reusable instructions, custom tools built by teams or pulled from a community library, and connectors to external services including Notion, Slack, and GitHub.

For product designers, the announcements mean fewer context switches between Figma and external tools for animation, code editing, or plugin development. For engineering teams, code layers and Dev Mode integration reduce friction between design files and production code.