TL;DR: Figma Config 2026 (June 23–25, San Francisco, 8,000+ attendees) was not a feature drop — it was a platform redefinition. CEO Dylan Field declared that AI has lowered the floor but designers will raise the ceiling, then shipped the tools to prove it: Figma Motion (native timelines), code layers (GitHub on canvas), WebGPU shaders, generative plugins, Weave tools, and a design agent with skills, connectors, and shared prompt history. Figma is no longer competing with Sketch. It is competing with the entire creative stack — After Effects, Framer, shader editors, and vibe-coding IDEs — in one file.
Sources: Config 2026 recap (Dylan Field) · Figma Motion · Code layers · Design agent + custom tools · Figma + Weave · The Verge coverage
Config 2026 at a glance
| Announcement | What it does | Availability (June 2026) |
|---|---|---|
| Figma Motion | Native animation timeline, keyframes, motion variables | Open beta |
| Code layers | Interactive code on canvas, GitHub import, extract-to-design | Closed beta from July 2026 |
| Shader effects & fills | WebGPU custom visuals (dither, liquid metal, moiré) | Via design agent (open beta) |
| Generative plugins | Prompt-built native plugins, no dev environment | Via design agent (open beta) |
| Weave tools | 20+ AI image workflows in Figma Design panel | Open beta (free during beta) |
| Weave → Community | Publish node-based workflows as templates | Live now |
| Figma node in Weave | Live-linked Figma frames in Weave pipelines | Later summer 2026 |
| 3D transforms | Z-axis rotation on frames, vectors, text | Preview; waitlist |
| Design agent upgrades | Skills, connectors, shared chats, attachments | Open beta |
Conference dates: June 23–25, 2026 · Location: San Francisco · Theme: "New materials, new tools and a more expressive canvas"
Dylan Field's thesis: designers raise the ceiling
Figma's CEO opened Config with a deliberate provocation about AI hype:
"At past Configs, we've talked about AI lowering the floor and raising the ceiling. But while AI has lowered the floor, it has not raised the ceiling. Designers, creatives, builders: You will raise the ceiling."
That framing matters strategically. Figma is not positioning itself as another text-to-UI generator — the space crowded by OpenAI's Product Design plugin, Claude artifacts, and coding agents that skip design entirely. Instead, Field argues the canvas remains the collaboration surface where judgment, taste, and systems thinking compound. AI accelerates execution; humans set direction.
The product roadmap follows that philosophy: every Config announcement keeps work in the same file as components, variables, comments, and teammates — rather than exporting to After Effects, VS Code, or a separate Weave tab permanently.
Figma Motion: animation finally lives on the canvas
The headline launch. For years, motion design in product teams meant context-switching — Figma for layout, After Effects or Rive for animation, Lottie files for handoff, developers re-implementing easing curves from screenshots. Figma Motion collapses that chain.
What Motion adds
Motion sits alongside Design, Draw, and Dev modes. Switch any frame to Motion mode and a timeline appears beside your layers.
| Capability | Detail |
|---|---|
| Timeline control | Drag layers for timing; scrub preview; keyframe position, scale, rotation, opacity independently |
| Auto keyframing | Records every change while the playhead moves |
| Preset styles | Fade, move, scale — stack or sequence on the timeline |
| Time-based comments | Comment on a specific frame in the animation, not just the static artboard |
| Animated components | Build motion once; it travels with the component across every file |
| Motion variables | Easing variables with modes — switch mode at page level, all referencing animations update |
| Shader + motion | Every shader property exposed as a slider can be keyframed on the timeline |
| Agent-generated motion | Describe what you want; agent builds real keyframes grounded in your tokens |
Dev Mode and export — the handoff gap closes
Motion's production story is as important as the timeline UI. Select any animated frame and export MP4, GIF, SVG, or WEBM for early stakeholder alignment. In Dev Mode, open the Motion tab: every timing value, easing curve, and keyframe is inspectable. Developers copy animation code as CSS, JSON, React, or motion.dev — no interpretation layer.
Motion is also MCP-compatible: share a link to an animated frame with a coding agent and the full motion context travels with it. That connects directly to the Claude + Figma connector ecosystem teams already use for design-to-code workflows.
Customer proof points
Atlassian treats motion as a system capability now, not a specialist handoff. Senior Product Designer Alexandra Pereira: "It turns animated illustrations from a specialist handoff into a system capability."
Adanna Onuekwusi, product designer and illustrator: "Having everything in one space is really helpful. I can systematize the motion process and publish it as a library."
Lead Motion Designer Maxwell Hathaway: "Atomic design is now atomic motion design because I have keyframes on the canvas. It's the last big piece in the interactive world."
Pricing and access
- Open beta as of June 24, 2026
- Starter users: motion with limited exports
- Full seat users (all plans): motion primitives and export
- Paid plans: full design system integration + agent motion generation
- 3D transforms waitlist: figma.com/config-betas
Read more: Introducing Figma Motion
Code layers: code is material, not a separate world
Figma's second structural bet: code belongs on the canvas the same way vectors and images do.
"For years, the design industry has talked about 'design versus code'... But this is a false debate. Design is a process. Code is material." — Dylan Field, Config 2026 recap
How code layers work
- Create — Add a code layer from the toolbar, convert an existing frame, or ask the Figma agent to generate one
- Import — Bring a GitHub repository or upload a local folder
- Explore alts — Duplicate code layers like design frames; compare how options feel, not just look
- Extract to design — Select
extract designsto convert code state back into editable Figma layers - Iterate — Edit in the code editor or prompt the agent; one click syncs changes back to the code layer
- Ship — Push to your repo when the team lands on the right direction
Code layers also connect to Figma Make: generate and edit code in Make, then bring it onto the canvas as a code layer for team comparison.
This is Figma's answer to vibe-coding tools that trap exploration in solo chat sessions. The canvas becomes a multiplayer code playground — the same file where PMs comment, designers adjust spacing, and engineers inspect the implementation.
Availability
Closed beta rolling out over the next few weeks, starting July 2026. Request access: figma.com/config-betas
Read more: Code on the Figma canvas
Shaders: WebGPU visuals without a graphics programmer
Shaders powered Figma's renderer for years. Config 2026 makes them authorable — describe an effect or fill, and the design agent builds a parameterized WebGPU program.
Two flavors
| Type | Examples | Behavior |
|---|---|---|
| Shader effects | Dither, pixelate, lens distortion, particle stretch, color outline, gradient map, riso print | Stack with native Figma effects; transform existing layers |
| Shader fills | Watercolor, moiré, pattern grids, liquid metal, fluid halftone, magnetic field | Dynamic generative materials beyond solid colors and gradients |
Parameters surface as on-canvas controls by default. Creative technologist Anna Zhang described the workflow as "a back-and-forth dialogue between me and the agent... like a negotiation."
Using any plugin or shader — yours, a teammate's, or Community — is free on all plans. Prompting the agent to build plugins or shaders requires the design agent and will consume Figma AI credits at general availability.
Interactive shaders (shader properties that respond to user input) are coming soon; Figma is optimizing performance first.
Figma ships 30+ starter plugins and shaders in a new Tools tab alongside classic plugins, Weave tools, and widgets.
Generative plugins: custom tools without a dev environment
Classic Figma plugins required JavaScript, a local dev setup, and maintenance burden most design teams could not absorb. Generative plugins flip the model: describe the tool — behavior, controls, parameters — and the agent builds a reusable plugin using PropsKit so it looks native.
Product designer Edward Chechique built plugins for HTML import, dashboard layouts, and data visualization:
"I've gone from zero possibilities to great possibilities... I can just ask for what I want directly."
Limitation: generative plugins handle in-canvas logic. For external AI services or third-party APIs, teams still use classic plugins.
Publishing to team, organization, or Community is coming soon. Figma says it has used generative plugins internally for months — including a fintech diagram tool cited in press coverage.
Weave tools: AI image workflows on the design canvas
Figma acquired Weavy (now Figma Weave) to bring node-based generative workflows into the platform. Config 2026 is the integration moment.
Weave tools in Figma Design
20+ AI image tasks now live in Figma Design's left panel as pre-packaged Weave workflows:
- Style transfer (apply a source image's style to a target)
- Product shoots and e-commerce renders
- Material extraction
- Art direction across a dozen visual languages
- Aspect ratio changes without writing prompts
OutSystems lead designer Bruno Figueiredo: "It's great having Weave tools in Figma. They can help us expand our existing photography and illustration to develop new brand guidelines."
Weave tools are free during open beta. At general availability, they consume Figma AI credits.
Weave workflows on Community
Teams can publish Weave workflows to Figma Community — the creative equivalent of a component library. Taxi Studio generated 3D beer renders for a Carlsberg presentation in one day versus weeks with a dedicated 3D specialist, per midweight designer Jack Goozee.
Figma node in Weave (coming summer 2026)
Paste any Figma frame onto the Weave canvas as a live Figma node. Connect it upstream/downstream in a workflow — edit the frame in Figma, and Weave outputs update in real time. Example from Figma's blog: a brand layout + CSV of translated copy → localized variants for every region without design drift.
Read more: Connecting Figma and Weave
Design agent upgrades: skills, connectors, shared thinking
The Figma design agent launched broadly just before Config. The conference expanded it from a chat sidebar into a team knowledge system.
New context sources
| Feature | What it enables |
|---|---|
| File attachments | Drop user interviews, UX copy docs, data reports into agent chat |
| Figma file links | Agent reads full structure — components, tokens, layout, styles |
| Web search | Live restaurant names, competitor UX patterns, current content for mockups |
| MCP connectors | GitHub, Atlassian, Slack, Notion, Granola, Hex — pull context in, post updates back |
GitHub integration is especially significant alongside code layers: design agent context, canvas code, and repository state can converge in one workflow — overlapping with OpenAI Codex plugins for Figma and Notion but native to Figma's file model.
Skills and visible collaboration
- Custom skills — Turn repeatable prompts into slash commands (aesthetic application, design review, bulk updates)
- Team-published skills — Share design philosophy as executable instructions
- Visible agent chats — Teammates see what directions others explored; make private when needed
- Coming to FigJam and Slides — Agent expands beyond Figma Design
Access: Full seat users on Professional, Organization, Enterprise (open beta, free during beta). Collab, Dev, View seats: agent in drafts only.
Read more: Design agent, custom tools and greater context
3D transforms: preview on stage
Figma teased 3D transforms at Config — rotate frames, vectors, and text on the z-axis with native controls and live preview. Transforms stay fully editable, export to CSS, and connect through MCP so spatial design matches shipped code.
Combined with Motion in the same file, teams can prototype spatial interactions that were previously impossible in Figma — card flips, perspective menus, depth-based transitions.
Status: preview only. Join the waitlist at figma.com/config-betas.
What one Figma file can do now (2026 edition)
Designer @leyeConnect summarized the scope shift on X:
"So if you learn Figma 2026 you automatically do: product design, slide/deck design, poster/flyer/marketing design, illustration, image generation and editing, motion design, design systems, plugin generation."
That list is not marketing exaggeration anymore — it is the product map:
Figma Design (2026)
├── Static UI + design systems (original)
├── Figma Draw (illustration)
├── Figma Slides (decks)
├── Figma Buzz (marketing)
├── Weave tools (AI image generation/editing)
├── Figma Motion (animation timelines)
├── Code layers (interactive prototypes + GitHub)
├── Shaders (WebGPU materials)
├── Generative plugins (custom tools)
└── Design agent (orchestration layer)
The strategic question for teams is no longer "Should we pay for Figma?" — 95% of Fortune 500 companies already design products in Figma, per CEO remarks cited in press coverage. The question is whether consolidating this stack reduces tool sprawl enough to justify retraining motion designers, frontend engineers, and brand teams on a single canvas.
Competitive landscape: why Config 2026 timing matters
Figma Config landed in the same week as:
- Anthropic hiring DeepMind researchers while Claude Fable 5 sat suspended — signaling AI labs building interfaces, not just models
- Vibe coding momentum — hobbyists and pros generating full apps from prompts without opening a design file
- OpenAI Codex role plugins pushing prototype → Figma as an export path, not a native workspace
Figma's response: don't replace the designer — absorb the adjacent tools. Code layers counter vibe-coding isolation. Motion counters After Effects exports. Weave counters Midjourney tab-switching. Generative plugins counter "ask engineering for a favor."
The decoder.com analysis noted Figma's agent runs on third-party model infrastructure while Figma invests in human judgment infrastructure — shared prompts, visible iteration, skills libraries. Whether that differentiation holds as models improve is the long-term bet.
Availability cheat sheet
| Feature | Beta type | Who gets it | Cost (June 2026) |
|---|---|---|---|
| Figma Motion | Open beta | Starter (limited export), Full seats (full) | Free in beta |
| Code layers | Closed beta (July+) | Waitlist | TBD |
| Design agent | Open beta | Full seats; drafts for Collab/Dev/View | Free in beta |
| Generative plugins | Via agent | Full seats | AI credits at GA |
| Shaders | Via agent | All plans to use; agent to build | Free to use; credits to build |
| Weave tools | Open beta | All users during beta | Free in beta; credits at GA |
| Weave Community workflows | GA | All users | Free |
| 3D transforms | Waitlist | TBD | TBD |
Sign up for betas: figma.com/config-betas · Help center roundup: Figma Learn · Playground files: linked from agent and Motion announcement posts
Complete announcement checklist
Motion & spatial
- ✅ Figma Motion — timeline, keyframes, presets, animated components, motion variables
- ✅ Shader properties keyframable on motion timeline
- ✅ Dev Mode Motion tab — CSS, JSON, React, motion.dev export
- ✅ MCP-compatible animated frames
- 🔜 3D transforms — z-axis rotation, CSS export, MCP
Code & handoff
- 🔜 Code layers — GitHub import, extract-to-design, push to repo (July 2026 beta)
- ✅ Motion export — MP4, GIF, SVG, WEBM
AI & materials
- ✅ Shader effects and fills (WebGPU, agent-built)
- ✅ Generative plugins (PropsKit, agent-built)
- ✅ Weave tools in Figma Design (20+ workflows)
- ✅ Weave workflows publishable to Community
- 🔜 Figma node in Weave (summer 2026)
- 🔜 Interactive shaders
Design agent
- ✅ Open beta expanded to more users
- ✅ Custom skills (slash commands)
- ✅ Visible teammate agent chats
- ✅ File attachments + Figma file link context
- ✅ Web search
- ✅ MCP connectors — GitHub, Slack, Notion, Atlassian, Granola, Hex
- 🔜 Agent in FigJam and Slides
What it all means
Config 2026 was Figma declaring the canvas is the product — not design files, not prototypes, not a handoff artifact. Every announcement composes:
- Materials expand — code, motion, shaders, AI-generated imagery
- Tools multiply — generative plugins, Weave workflows, agent skills
- Handoff compresses — Dev Mode reads motion; MCP carries context to coding agents; code layers sync to GitHub
For product teams, the practical takeaway is simpler: the "design vs code vs motion vs marketing assets" toolchain fragmentation Figma spent a decade solving for static UI now extends to the full creative pipeline. Whether your team adopts all of it on day one matters less than recognizing the direction — Figma is building the Adobe Creative Cloud + VS Code + After Effects bundle for the AI era, with collaboration as the moat.
For developers watching from the outside: Figma Motion's motion.dev and React exports, code layers' GitHub sync, and MCP-compatible frames mean the design file is becoming a structured source of truth coding agents can consume — not a PNG attachment in a Jira ticket.
Related posts
- OpenAI Product Design Plugin: Prototype to Figma in Minutes — Codex-side design acceleration vs Figma-native workflows
- OpenAI Codex Plugins: Figma, Notion, iOS & Web Apps — third-party agent plugins that touch Figma
- Top 10 Claude Connectors 2026 — including the Figma connector for design-to-code
- Google I/O 2026: Complete Recap — parallel "platform declaration" from Google's agentic era
- Web Performance & Core Web Vitals 2026 — shipping motion and shaders has performance implications teams should plan for
Feature availability, beta access, and pricing details are accurate as of June 26, 2026 per Figma's Config 2026 announcements and official blog posts. Beta programs and credit pricing may change at general availability — check figma.com/config-betas and Figma's help center for current status.