June 23–25, 2026, marked a turning point for the design world. At Config 2026 in San Francisco, with thousands of attendees and a sold out in person event, Figma unveiled a sweeping vision that redefines what a design tool can be. The message from CEO Dylan Field was clear:
No tool should limit where an idea can go.

“Design is about asking the hard questions. Right now, these questions feel bigger than ever. What’s changing? What’s possible? And what does it even mean to create?”

The Big Idea from Config 2026: Code as Material

For years, the industry has debated “design versus code.” At Config 2026, Figma declared this debate over. Code is no longer the opposite of design. It’s a design material, just like vectors, images, and typography.

Code Layers: The Headline Announcement

The headline announcement at Config 2026 was Code Layers. With a single click (or a prompt), any design layer can become an interactive code layer on the canvas. Teams can clone GitHub repositories directly onto the canvas and duplicate code layers to explore multiple directions side by side, just like they would with design frames.

The entire team can comment, iterate, and collaborate in the same file. When you’re ready to move back, you can extract code into editable design layers, make visual tweaks, then push changes back to the code layer, and even directly to your repository.

Why it matters for product teams:

This collapses a handoff step that has defined design to development workflows for over a decade. Code Layers are set to roll out starting in July 2026, with early access waitlists now open.

Bringing Design to Life: Config 2026’s Motion and Visual Upgrades

1. Figma Motion

Motion design is now native. Figma Motion adds a full timeline with keyframes, presets, and easing controls directly in Figma Design. You can build animations from scratch, use presets, or ask the Figma agent to generate a starting point.

What makes this powerful is that motion can now be part of your design system: animate a component once, and that motion travels across every screen and every file, the same way fills and typography do. In Dev Mode, the timeline is fully inspectable, and you can copy animation code directly in CSS, JSON, or React. Export formats include MP4, WebM, Animated SVG, and GIF.

Why it matters for product teams:

Until now, we haven’t had good ways to hand off motion between design, creation, and code. Motion and interaction can now be baked directly into components, making motion systems a first class citizen. Figma Motion is now in open beta.

2. Shader Fills and Effects

You can now describe what you want (or use an image as a reference), and the Figma agent will build shader effects for you. These are parameterized by default, with controls that appear directly on the canvas, stackable with other effects and ready for code export. Interactive shaders are coming soon.

Why it matters for product teams:

Design systems teams should watch this closely: if these shaders become part of brand expression, they need to be governed like the rest of your system.

3. 3D Transforms

Figma introduced 3D transforms that let you apply three dimensional transformations directly to layers on the canvas. This feature is currently available in early access.

Building Your Own Tools: AI Highlights from Config 2026

1. Generative Plugins

Anyone can now create custom Figma plugins by simply describing what they need, no local development environment or plugin API knowledge required. The Figma agent builds the tool with native controls. Plugins can be shared within a file, with team/org/community publishing coming soon.

Why it matters for product teams:

Design systems and ops teams are already building bespoke tooling. Generative plugins significantly reduce the engineering and maintenance tax. But governance is a concern: 500 designers creating single use plugins could lead to chaos.

2. Figma Weave Tools

Weave, the node based AI workflow platform Figma acquired last year, now connects directly to the Figma canvas. You can build generative workflows for image generation, style transfer, and asset extraction, then publish them as templates for others to remix. This represents a shift from using tools to building them.

3. The Figma Agent Gets Smarter

The Figma agent, launched to everyone, now understands the design canvas in new ways.

Three key capabilities stand out:

• Skills: Package your team’s workflows and conventions into reusable instructions that the agent follows
• Connectors: Connect to tools like Notion, Slack, GitHub, and more via MCP (Model Context Protocol)
• Attachments: Drop in briefs, research, or any relevant file for context

Agent conversations are visible to teammates by default, enabling collaborative AI exploration rather than isolated prompting. The agent is also coming to FigJam and Slides.

Why it matters for product teams:

Connectors let the agent pull in live content from complex sources and push updates back. The potential for automated auditing and creation is enormous, but token usage will likely become expensive once it exits beta.

What Config 2026 Means for Product Teams

For design systems, motion can finally be a first class citizen. Code Layers mean components on the canvas can be your actual code components. Agents and Skills can automate repetitive maintenance work.

For designers, you can now work with code, motion, and generative effects directly on the canvas. AI handles the mechanical parts, you focus on taste, strategy, and creativity.

For developers, Code Layers collapse the handoff. You can inspect and edit code in the same file designers use. Motion parameters are readable without interpretation. GitHub repos can be pulled directly onto the canvas.

The critical question to ask is: if AI compresses the mechanical 40% of your work, what will you do with the time you get back?

The Bigger Picture from Config 2026

Dylan Field framed it as a pushback against AI replacement narratives:

“While AI has lowered the floor, it has not raised the ceiling. Designers, creatives, builders: You will raise the ceiling.”

Figma is betting that the design canvas should absorb code rather than be replaced by AI generated interfaces. If engineers and designers can prototype together on the same canvas with code as a material, the tool becomes harder to bypass with a text prompt to a coding agent.

The Critical View: What’s Still Missing

Not everyone is convinced. Industry commentators have noted that while Code Layers brings real React onto the canvas, it isn’t production code. The Figma component is still a “picture,” and the real thing still lives in a GitHub repo. What’s missing is a component that lives once and in one spot, defined in a repo, mirrored exactly in Figma, synced in both directions, so editing the Figma component pushes to the repo and vice versa.

This was the year Figma could’ve made the canvas the one place where the design and the production code are the same object. It named the threat correctly and answered with materials to play with rather than infrastructure to build on.

Final Thoughts

Config 2026 made one thing clear: the future of design isn’t about choosing between tools or disciplines. It’s about bringing everything (code, motion, AI, and human creativity) together in one expressive canvas. And at Designsuite.ai, we help you discover how Code Layers and Agentic Design can improve adoption, engagement, retention, and revenue.

Book a FREE UI/UX Consultation

The question for product teams is no longer whether to adopt these tools, but how to integrate them into your workflow without creating new silos or governance headaches.

Beyond Just Designs