Figma: Config 2026 keynote with Dylan Field

The Config 2026 opening keynote, delivered by Figma CEO Dylan Field at Moscone Center in San Francisco, covers Figma’s biggest product launch of the year. The conference drew over 8,000 attendees in person and streamed live; the YouTube recording is the full keynote including all product announcements and live demos.

What the video covers

Field opens with what he frames as the central question for designers in the current moment: if AI has made it easier to produce things, what does that mean for the people who previously did that work? His answer — and the conference’s thesis — is that AI has lowered the floor of production but has not raised the ceiling of craft. The keynote then presents six expansions to the Figma platform as tools to raise that ceiling.

Speaker and context: Dylan Field, CEO and co-founder of Figma. The audience is primarily product designers, engineers, and design system leads.

Key announcements covered

Code Layers — Any design layer on the canvas can be converted into an interactive code layer with a single click or a text prompt. Teams can clone repositories and bring code flows into Figma for rapid iteration without requiring production-quality code. Field’s Chief Product Officer describes it as treating code “like any other design material.” Early access begins July 2026.

Figma Motion — Native animation lives in the same file as components and variables. The timeline editor supports keyframes and presets with multi-format export: CSS, JSON, React, MP4, WebM, animated SVG, and GIF. Previously, designers had to create animations in separate tools and convert them to code.

Shader fills and effects — AI-generated WebGPU shaders let designers describe a visual effect or use an image as reference; the Figma agent builds the shader. Gradually rolling out to users with paid plan seats as an open beta.

Generative plugins — Designers can create custom plugins (layout generators, vector path tracers) by describing what they need in natural language, without writing plugin code.

Weave tools — Visual workflow orchestration tools appear directly on the Figma canvas, enabling multi-step AI workflows inline.

Updated Figma agent with Skills and Connectors — Skills package team conventions into instructions the agent can follow. Connectors pull live context from MCP-connected services (GitHub, Slack, Notion, Atlassian, Hex) and can post updates back to those services.

Key takeaways

1. Figma is positioning the canvas as a single workspace for design, code, motion, and AI — removing the traditional hand-off boundary between design and development toolchains.

2. Code Layers treats code as an exploration material, not a production artifact. Non-engineers can prototype in real code without quality pressure, which changes how design and engineering collaborate on early-stage work.

3. The Skills and Connectors system moves the Figma agent from generic assistance toward team-specific automation — agents that follow your team’s conventions and read your project’s live state from external tools.

4. Figma Motion closes the animation handoff gap without requiring separate tools. For teams currently using After Effects, Jitter, or Rive for animation prototyping, this changes the toolchain calculus.

5. Field’s central message — that AI lowers the floor but not the ceiling — is a deliberate counter-narrative to the framing that design work is becoming automated away. Worth watching to understand how Figma is positioning this transition to the design community.

Worth watching if

Your team is evaluating whether to consolidate design, animation, and code tooling into a single platform. Also relevant if you’re deciding how to structure design-to-engineering handoff workflows, or if you want to understand how Figma’s agent architecture connects to external project management and development tools via MCP.