Build my stackFigma adds code layers, motion timeline, and AI shaders at Config 2026
The biggest Figma update ever brings code-backed design layers, a timeline for animations, shader effects, and generative plugins. Rolling out through July.
Analysis
Figma Blog: Config 2026 Recap
Jun 24, 2026
- Code layers bring working code onto the Figma canvas as native layers. Clone GitHub repos, extract designs from code, and edit either side.
- Figma Motion adds a full timeline with keyframes, easing curves, and presets. Export animations as CSS, JSON, React, MP4, or GIF.
- GPT-5.6 is now available in Figma Make. AI shader fills and generative plugins let you build custom design tools with natural language prompts.
At Config 2026 on June 24, Figma unveiled its most ambitious update in years. Code layers, a full motion timeline, shader effects, generative plugins, and a more powerful Figma agent. Together they represent a fundamental expansion of what Figma is: not just a design tool, but a canvas where design, code, and motion converge.
The rollout is staggered through July. Motion and shaders arrived in June, code layers entered closed beta in July, and GPT-5.6 integration hit Figma Make on July 9. On July 16, Figma shipped code-backed screens that bind to existing variables, making the code-to-design pipeline even smoother.
Code layers: design with code on the canvas
The flagship announcement is code layers. You can now bring working code onto the Figma canvas as a native layer. Import a GitHub repository or upload a local folder, and Figma renders the UI directly. From there, you can extract designs from code, edit them visually, and push changes back to the repo.
This bridges a long-standing gap. Designers and developers no longer need to maintain parallel artifacts. A code layer and a design layer are two views of the same thing, and you can convert between them. The Figma agent can generate code layers from prompts, and the playtesting agent surfaces bugs before real users see them.
Figma Motion: animation on the canvas
Figma Motion brings a timeline directly into the canvas. You can build animations with keyframes, presets, and easing curves, all without leaving Figma. The timeline is fully inspectable in Dev Mode: every timing value, easing curve, and keyframe is readable and exportable as CSS, JSON, or React code.
Motion is also MCP-compatible, so you can pass animated frames to a coding agent for implementation. Export formats include MP4, WebM, Animated SVG, and GIF. For designers, this eliminates the work of recreating animations in After Effects or Principle.
Config 2026 signals Figma's intent to become a multi-surface design platform. The agent expands to FigJam and Slides. Code layers make the design-engineering handoff seamless. Motion brings animation into the core tool. Each move reduces the number of tools a designer needs.
The July 16 update brought code-backed screens with variable attachment. When you bring code-backed screens onto the canvas, colors, type, and spacing now bind to existing variables instead of landing as hardcoded values. More frames come in with auto layout, so edits resize and reflow automatically.
When can I use code layers?
Code layers are in closed beta starting July 2026. Sign up for early access at figma.com/config-betas. Motion and shaders are rolling out gradually from June 24.
Can I export Figma Motion to code?
Yes. The full timeline is inspectable in Dev Mode. Copy animation code in CSS, JSON, or framework-ready React. You can also export as MP4, WebM, Animated SVG, or GIF.
One useful pick in your inbox, weekly
Join 12,000+ founders and marketers who get our latest tested recommendation and the best live deal, every Thursday. No spam, no fluff, unsubscribe anytime.