At Config 2026 on June 24, CEO Dylan Field framed Figma's annual launch around a single idea: the canvas should support any material a team needs to express an idea, including code and motion, not just static frames. The keynote shipped Figma Motion with a built-in timeline, expanded the in-canvas Figma design agent with skills and MCP connectors, and previewed code layers that treat runnable code as a first-class design object. For web developers, the through-line is tighter design-to-code handoff and fewer round trips through screenshot-based prompts.
Figma Motion Lands on the Canvas
Motion design has historically meant exporting to After Effects or Lottie, then negotiating implementation details in a separate toolchain. Figma Motion adds a timeline directly in Figma Design with keyframes, presets, and agent-assisted starting points. Because motion lives in the same file as components and variables, animated components propagate through design systems the way typography and fills do.
The developer-facing piece is Dev Mode integration. When you inspect an animated frame, the full timeline is visible: timing values, easing curves, and keyframes are readable without guesswork. Figma supports copying animation output as CSS, JSON, or framework-ready React. You can also export MP4, WebM, Animated SVG, or GIF for review assets.
Crucially, Motion is MCP-compatible. Animated frames can be passed to coding agents through the Figma MCP server, so Claude Code, Cursor, Copilot, and other MCP clients receive structured animation context instead of a flat screenshot. That pairs with the Dev Mode MCP server Figma has been building since 2025, which already exposes variables, component maps, and Code Connect mappings to agentic IDEs.
Design Agent: Skills, Connectors, Shared Chats
Figma's canvas agent entered broader availability ahead of Config; the June 24 update adds the context layer teams need before trusting it on real files. Three additions matter for cross-functional workflows:
- Skills package team conventions and repeatable workflows into instructions the agent can follow, similar in spirit to agent skills in coding tools.
- Connectors pull live context from MCP-connected tools (GitHub, Atlassian, Slack, Notion, Hex, and others) and can post updates back.
- Attachments let you bring briefs, research docs, or reference files into an agent thread without copy-pasting summaries.
Agent chats are visible to teammates by default, so designers can see exploration directions others are taking and build on shared context. Private chats remain available when needed. The agent is free during open beta for Full seats on paid plans; Collab, Dev, and View seats can use it in drafts where AI features are enabled.
Figma also announced generative plugins: describe a tool (behavior, controls, parameters) and the agent builds a canvas-native plugin without a local dev environment. Shader fills and effects follow the same pattern, with parameterized controls surfaced on the canvas and conversion paths toward code. Weave tools from Figma's acquired node-based workflow product now run inside design files as reusable creative pipelines.
Code Layers: Code as Design Material
Code layers are the longest-horizon announcement. Figma's pitch is that code should behave like any other layer type: turn a design frame into an interactive code layer with one click or prompt, duplicate variants side by side, comment and iterate with teammates in the same file, and round-trip changes between editable design layers and the code layer when you need to refine visuals.
Early access starts in July 2026 via the Config betas waitlist at figma.com/config-betas. This is not shipping today, but it signals where Figma wants the design-code boundary to go: less export-and-rebuild, more parallel exploration on one canvas.
What This Means for Web Developers
If your team already wires Figma into agents through the Dev Mode MCP server, Motion export and expanded agent connectors reduce two common failure modes: animation specs lost in translation, and design context stripped down to PNGs before it reaches the IDE.
Practical next steps:
- Enable the Figma desktop MCP server in Dev Mode and confirm your IDE config points at
http://127.0.0.1:3845/mcp. - When Motion rolls out to your org, inspect animated components in Dev Mode and compare exported React/CSS against your design tokens before asking an agent to implement.
- Treat agent skills and connectors as team governance: document which GitHub repos, Notion spaces, or Linear projects the design agent may read before enabling org-wide access.
Figma is not replacing your component library or CI pipeline. It is pushing design files closer to the structured context agents already expect, which is the same direction as Agentic Resource Discovery on the code side and MCP enterprise auth on the tooling side. Config 2026 is Figma's bet that the handoff layer between design and implementation becomes agent-native, not PDF-native.