Figma Config 2026: Code Layers, Native Animation, AI Shaders, and Agent-Ready Builder Tools
TL;DR
Figma Config 2026 (announced June 24) introduced a cluster of changes that push the design-to-code boundary significantly closer. Code Layers brings code directly onto the canvas — clone repos and extract code flows into design layers for testing. Native Animation/Motion lets designers create animations, transitions, and 3D transforms in Figma and export directly to code, removing the rebuild step. Additional announcements include AI-powered shader effects, an enhanced AI assistant that lets users write prompts to create repeatable skills for AI agents and connect external tools (Notion and GitHub confirmed), and AI-generated custom plugins such as layout generators and vector path tracers. A Weavy integration for node-based workflows is coming later in the year. No pricing changes were disclosed. For buyers evaluating AI website builders, the design→code gap Figma is closing is the same gap those tools compete on.
Code Layers
Clone repos and extract code flows into Figma design layers — code and canvas in the same environment
Native motion export
Animations, transitions, and 3D transforms authored in Figma and exported directly to code — no separate rebuild step
Notion + GitHub
Confirmed external tool connectors for the enhanced AI assistant; agent skills can be saved and rerun
Weavy — later 2026
Node-based workflow integration with Weavy coming later in the year; no specific date disclosed
Figma announced a cluster of updates at Config 2026 on June 24 that collectively push the boundary between design and production code closer than it has been. The announcements span canvas-level code integration, native motion export, AI-driven visual effects, and an assistant that can be extended to connect external tools and run repeatable agent workflows.
Code Layers: code and canvas in the same place. The most structurally significant announcement is Code Layers — a capability that integrates code directly onto the Figma canvas. Designers and developers can clone repositories and extract code flows into design layers for inspection and testing. This is a different model from the "inspect and re-implement" pattern most design-to-dev handoffs use today: rather than a developer reading a Figma file and writing code separately, Code Layers puts both representations in the same space. The practical implication for teams is that the design file becomes closer to a single source of truth for layout and behavior, not just for visual reference.
Native Animation and Motion: design it once, export to code. Figma is adding native animation and motion capabilities — animations, transitions, and 3D transforms can now be authored directly in Figma and exported to code, without requiring a rebuild in a separate tool. For teams that currently design motion in Figma (or elsewhere) and then re-implement it in CSS or a JS animation library, this removes a redundant step. The quality and fidelity of the exported code relative to what a developer would write by hand will be the real test, but the workflow simplification is meaningful on paper.
AI shaders and visual effects. Figma announced AI-powered shader effects and fills — generative visual effects that can be applied within the design environment. The specifics of how these are controlled or parameterized were not detailed beyond the announcement.
AI assistant with agent skills and external tool connections. The enhanced AI assistant in Figma now allows users to write prompts that create repeatable skills for AI agents — tasks that can be saved and rerun, not just one-off generations. The assistant can connect to external tools; Notion and GitHub are confirmed connector examples. This positions Figma's AI assistant less as a one-shot generation tool and more as an extensible agent workflow layer inside the design environment.
AI-generated custom plugins. Figma's announcement includes the ability to generate custom plugins using AI — the examples given are layout generators and vector path tracers. This expands what non-developer designers can build within Figma without writing plugin code themselves.
Weavy integration for node-based workflows. A Weavy integration enabling node-based workflows is on the roadmap, coming later in the year. No specific timing was disclosed.
No pricing changes. Figma disclosed no pricing changes as part of Config 2026.
What to watch. The design-to-code gap — the effort required to translate a design into production-ready code — is the same gap that AI website builders and low-code tools compete on. Figma's Code Layers and native motion export are direct moves into that territory. The question for buyers is whether the exported code is production-quality or a starting point, and whether the agent skill layer in the AI assistant becomes meaningfully extensible beyond the confirmed connectors at launch.
Why It Matters
Code Layers and native motion export directly narrow the design-to-code gap — the same gap that AI website builders and low-code tools compete on. If Figma can make design files the single source of truth for both layout and behavior, the workflow for design-dev handoffs changes structurally. The AI assistant becoming an agent workflow layer — with saved repeatable skills and confirmed connections to Notion and GitHub — is a different capability category than generative image or layout suggestions. It positions Figma as an orchestration surface, not just a design tool. No pricing changes were announced, so these capabilities are presumably rolling into existing plans, though Figma has historically added premium tiers for new AI features.
Who's Affected
- — Design and development teams currently managing design-to-code handoffs — Code Layers and native motion export change the handoff workflow if adopted. Evaluate whether your team's current gap is in layout inspection, motion re-implementation, or both.
- — Buyers evaluating AI website builders and low-code tools — Figma is closing the same design→code gap those tools compete on. If your team already uses Figma, the Config 2026 capabilities are worth evaluating before committing to a separate builder tool.
- — Designers building or extending Figma workflows — AI-generated custom plugins (layout generators, vector path tracers) and agent skills in the AI assistant expand what designers can build without writing plugin code. Worth experimenting once these features reach your plan.
- — Teams using Notion or GitHub alongside Figma — the confirmed external tool connectors for the AI assistant are Notion and GitHub. If those are already in your stack, the integration path is the most immediately relevant.
What To Do Now
- 1. Evaluate Code Layers against your actual handoff bottleneck. If your design-to-dev friction is in layout inspection, Code Layers is directly relevant. If it's in motion and animation re-implementation, native motion export is the feature to track. Identify the bottleneck before evaluating the feature.
- 2. Do not conflate "exported to code" with "production-ready code." Figma's native motion export removes a redundant step, but the quality of generated code relative to hand-written implementation will vary. Treat it as a starting point to evaluate, not a guaranteed drop-in.
- 3. Track the Weavy integration timing before planning node-based workflows. The node-based workflow integration is on the roadmap but has no specific date. Do not design workflows around it until a timeline is confirmed.
- 4. Check which plan tier gets AI features. Figma has historically gated new AI capabilities behind premium plans. Verify which Config 2026 features are included in your current plan before building team workflows around them.
More on this topic — Best AI Website Builders
More from ToolNav News