Everything Figma announced at Config 2026 (June 23–25): Figma Motion timelines, code layers with GitHub sync, WebGPU shaders, generative plugins, Weave tools, 3D transforms preview, and the upgraded design agent.
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.
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.
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
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 designs to 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
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.
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.
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.
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.
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.
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
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.
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.
