Figma Release Notes

Push past what you thought was possible with code layers, Figma Motion, shaders, generative plugins and Weave tools, all on the canvas.

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? Here at Figma, we keep coming back to one simple premise: No tool should limit where an idea can go.

This year’s Config announcements are all about limitless expression on the canvas. We’re supporting new materials to express anything you can imagine and introducing new tools to shape and push these materials further than ever: code, motion, shaders, generative plugins and Weave tools, all on the Figma canvas.

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.

In the months and years ahead, I believe there will be an explosion of creativity, risk-taking and bold expression. Our goal at Figma is to help you design in a totally unbounded way with materials and tools that compose together, and let you riff and play at the speed at which you think. The canvas is more than where your work lives. It’s also where everything connects.

Here’s a look at everything we announced at Config 2026.

Code on the canvas

For years, the design industry has talked about “design versus code,” and tools (including Figma!) have forced a choice. But this is a false debate. Design is a process. Code is material, just like images, vectors and design layers. For a long time, code has lived in single-player environments built for linear thinking. Stated differently: The material was separated from the process. We believe code should be treated like any other design material. So we are introducing code layers in Figma.

On the canvas, you can turn any design layer into an interactive code layer with just a single click (or a prompt). You can quickly duplicate a code layer to explore multiple directions side by side, just like you would with a design frame.

From there, it works the way the canvas works: You can riff, comment and iterate with all your teammates in the same file.

For moments when you want to move from code back into design layers, you can extract design frames into editable design layers. Then, when you’re ready to go back, one click updates the code layer with what has changed.

Join the waitlist at figma.com/config-betas for early access when code layers rolls out starting in July.

Bring design to life with Figma Motion

Motion designers make things feel alive in ways that are hard to explain, let alone replicate. So many of us have aspired to make this same kind of magic, yet it has felt out of reach. And it often meant moving into other tools. Starting today, you can build with motion directly in Figma.

In Figma Design, we’ve added a timeline, including keyframes, presets and much more. You can build motion from scratch, layer it onto existing designs or ask the Figma agent to generate a starting point. I hope you will find Figma Motion powerful, intuitive and a joy to use. If you’re already a motion designer, Figma removes the repetitive work, so you can focus on pushing your creativity further.

Because motion is built on Figma’s platform, it can now be a foundational element of your design systems. You can animate a component once, and that motion travels across every screen and every collaborator’s file, the same way fills and typography do.

Lastly, Figma Motion is also built to work in code. When you switch to Dev Mode, the full timeline is visible and inspectable: Every timing value, every easing curve, every keyframe is readable without interpretation. You can copy animation code directly in CSS, JSON or framework-ready React. Motion is also MCP-compatible, so you can pass any animated frame directly to a coding agent for implementation. You can also export as MP4, WebM, Animated SVG or GIF, and we're already working on delivering more formats and export types.

Shader fills and effects

Shaders have always existed in Figma, powering our canvas rendering behind the scenes. But making shaders can feel intimidating, and they are hard to share with your team.

Now you can describe what you want, or use an image as a reference, and the Figma agent will build it for you. An effect transforms what’s already in the layer, and a fill acts as a new material. Because all of this is built with the Figma agent, shader fills and effects are parameterized by default. This allows you to add controls directly on the canvas and shape them in any way you want.

What comes back looks and behaves like it was always part of Figma. Parameters are surfaced as controls, stackable with other effects, and ready for seamless conversion to code and popular formats.

Interactive shaders are also coming soon, but we’re working to get performance just right.

Generative plugins

We’re seeing more and more teams build their own tools, and we think this is awesome! Every designer has unique workflows. Generative plugins make creating all the tools you want possible. To build a generative plugin, just describe the tool you need: the behavior, the controls and the parameters. No local dev environment or plugin API knowledge required. It feels native to the canvas just like any other Figma tool.

For both generative plugins and shaders, you can build something for yourself and share it with anyone in your file. Soon, you’ll be able to publish tools to your team, organization or the broader community.

Figma Weave tools

Figma Weave tools apply the same approach to visual content, allowing you to build and reuse expressive workflows. And they are now available in the Figma canvas.

Some context: Weave is a node-based canvas where you build generative workflows. You can connect models, transform assets, refine outputs and compare approaches. Instead of prompting for a single result, you’re working with model outputs like clay to sculpt a multi-model workflow that allows you to turn whatever is in your head into a visible process you can inspect, iterate on and reuse.

Today, you can build workflows in Weave and publish as templates for others to use or remix. Soon, you’ll be able to publish them as tools for your team, organization or community. To get you started, we’ve added a bunch of Weave tools to inspire you.

An agent that knows how you work

The Figma agent (launched to everyone yesterday!) is built to understand the design canvas.

Skills package up your workflows and conventions into reusable instructions for the agent. You can build your own, use skills from your team or pull from the community. Connectors let the agent reach the tools already in your stack—for example, Notion, Slack, Granola, Hex, GitHub, Atlassian and more—and then send updates back. Attachments can bring in research, briefs or any relevant artifact.

Agent chats are also now visible to your teammates by default, so you can see what directions others are exploring and build on their thinking. Of course, you can also make chats private when you need to.

The agent is also coming to more surfaces, like FigJam and Slides. Join the waitlist for early access at figma.com/config-betas.

With more possibilities than ever on the Figma canvas, we can't wait to see how you raise the ceiling. Go build something only you can make.

Visit our help center to see a round-up of what we launched, its availability and how to get started. Find answers and inspiration on all things Figma at Figma Learn.

With code layers in Figma Design, you can explore multiple directions with code, side by side with your team.

Share Code on the Figma canvas

Agents have expanded who can build and what’s possible to create. But too often, the process of getting there happens alone, in separate chats, disconnected workflows, and isolated exploration.

Getting started is flexible:

In Figma Design add a code layer from the toolbar, create one from an existing frame, or ask the Figma agent to generate one. From there, start from a template or describe what you want to build. You can also bring in an existing codebase—import a GitHub repository or upload a local folder directly.

In Make generate and edit code, then bring it onto the canvas as a code layer to explore, compare, and refine with your team.

With code layers in Figma Design, interactive code becomes part of the canvas itself, making it easier for teams to explore, iterate, and shape ideas together in the same place.

Explore options with code layers on the Figma canvas.

Entertain all your alts

Designers have always duplicated frames to try alternatives—code layers work the same way. Working experiences can live on the canvas so you can compare how options actually feel, not just how they look. Move, adjust, and resize elements and get an immediate code response. Keep iterating with prompts and the agent generates a new version while preserving the original. Since code layers exist in your shared file, teammates can jump in, leave comments, and prompt against the same layer.

Turn any frame on the canvas into working code by asking the agent to build it for you.

Move between your materials

Code layers make software explorable. By selecting extract designs you can make code visually understandable by converting the current state back into editable Figma layers. You decide what comes onto the canvas—a single screen, a specific state, or a full flow. From there, one click updates the code layer with your edits. So you can work fluidly between the canvas and code.

Extract key flows and states from code onto the canvas as editable design layers.

Refine with your judgment

When you want more specificity you can annotate in the code editor and ask the agent to make your desired change or click in and make the edit yourself. Once you're happy, convert it back to the code layer and push to your repo so your source reflects the changes you landed on. Now your whole team can see the update.

Make changes to the code generated in the code editor.

With code layers in Figma Design, the canvas becomes a shared space where design and code evolve together—a place to try things, compare them, and land on the right idea to build.

Code layers are rolling out in closed beta over the next few weeks. Sign up here to request early access. Visit our help center to see a round-up of what we launched at Config, and how to get started. Find answers and inspiration on all things Figma at Figma Learn.

Nikolas Klein is a product designer turned product manager. He’s been working at Figma since 2018, and has always been focused on getting more people to explore their interactive ideas together. He is now a PM on Figma Make.

Today, we’re announcing new ways your Weave creative workflows can live alongside your Figma frames.

At Figma, we believe the best work always happens in the open—on the canvas, where the process becomes not just visible, but shared. Our acquisition of Weavy, now Figma Weave, last year was the first step in bringing design and creative production closer together in the same collaborative space. With Weave's node-based workflows, the process of making and editing imagery, video, audio, and 3D becomes a sequence you and your teammates can inspect, tweak, and repeat.

Today, we're bringing Weave tools onto the Figma canvas and Weave workflows to the Figma Community—and with the Figma node in Weave soon to come, you’ll do less translating between design and creative production, and more fine-tuning of your vision.

Weave tools in Figma

The first way Weave is coming to Figma starts where most designers spend their time—on our design canvas, moving work forward. Starting today, 20+ AI image tasks are accessible directly from Figma Design's left panel as Weave tools. Each Weave tool is a pre-built Weave workflow, packaged into a simple UI in Figma Design—style transfers, product shoots, material extraction, and art direction across a dozen visual languages. Think of it as Weave's power and creative range, set up for you.

With Weave you can branch ideas, remix outputs, compare approaches, and refine work across models. New to Weave? Start here.

Need to change an aspect ratio, generate an e-commerce shoot, or render a photo in Art Nouveau? Pick the tool, add your inputs, get production-quality output—without having to write a freeform prompt yourself. Running a Weave tool delivers a consistent result every time, so you can repeatedly tackle common use cases in just a few clicks. You bring the creative direction and the workflow handles the execution.

Not everyone needs to build a workflow from scratch—but when someone on your team does, it should travel further. Soon, any designer will be able to publish their own workflows as Weave tools directly in Figma. Define the logic once, share it with your team, or the world, and everyone benefits from the thinking behind it.

“It’s great having Weave tools in Figma. They can help us expand our existing photography and illustration to develop new brand guidelines or generate mockups in the styles we need.”
— Bruno Figueiredo, Lead Designer, OutSystems

Weave workflows in the Figma Community

Taxi Studio, a brand design agency based in Bristol, England, set up a Weave workflow to generate 3D renders for a design presentation with their client, Carlsberg.

Using three simple inputs—a beer glass, a hop leaf, and a background—they created a starting point for brand imagery and could further refine lighting, camera angle, and texture. “All of this took a day, whereas it would have taken a 3D specialist weeks and tens of thousands to ideate through these elements,” says Midweight Designer Jack Goozee. “It’s such a great way to elevate and add richness to the work, while staying very much in control.”

When you've built your workflow, publishing it takes just a few steps:

1. Open the Share menu in Weave
2. Select “Publish to Figma Community”
3. Add a title, description, and category
4. Upload a thumbnail
5. Publish your public template

The best thing one designer can share with another isn't the finished piece—it's the process that made it possible. Through the Figma Community, you can now publish and discover Weave workflows—the sequences of steps and decisions behind creative output. A workflow shared on Community becomes a resource the way a component library does: something others can open, understand, adapt, and build on. Automated ads, multi-angle product shots, social motion systems, fashion visualizers, character design sheets—all there to build on.

Create a workflow that solves a problem you keep running into. Publish it. Let the community run it, make it theirs. Your creative logic becomes the starting point for someone else's.

“With Weave, you can put much more time into thinking about your vision of the brand. It gives you the ability to freely explore and zone in on the thing you want.”
— Jack Goozee, Midweight Designer, Taxi Studio

Customer snapshot: NBBJ

At architecture firm NBBJ, Weave helps designers visualize abstract concepts, generate 3D renders, and create graphics and diagrams. “The ramp-up speed is wild by comparison to other tools,” says Design Technology Integration Leader Simon Manning. “Consistently, new users of Weave brought up to speed on Wednesday can produce content with it by Friday. They’re having no issues because it’s similar enough to other workflows where they can transfer their skillset, and it’s also really easy for other people on the team to share workflows.”

The Figma node in practice

Take for example a brand layout in Figma—typography locked, grid set, visual direction fully in your control. When brought into Weave as a Figma node, it connects to a CSV of translated copy and generates a localized version for every region. One design, dozens of outputs, none drifting from the standard you built.

Weave tools bring AI creative workflows to your canvas. The Figma node works in the other direction—it brings your Figma frames into Weave.

At Config, we're giving a first look at what's coming: Paste any Figma frame directly onto the Weave canvas as a Figma node. Connect it to upstream and downstream nodes in your workflow, and any edits you make to the frame in Figma will reflect in real time across your Weave workflow. Your design and your creative pipeline move together.

This changes what a Figma frame can be. Not just a finished artifact, but a live input—a product layout that feeds directly into a campaign, a brand frame that powers AI output at scale.

Weave handles the generation. Figma holds the design.

“Ultimately, the client gets a much better product because we were able to investigate more options, more deeply, than we’d been able to do before in the same amount of time.”
— Paul Audsley, Principal and CIO, NBBJ

With Weave tools, sharable workflows, and the upcoming Figma node, we're a few steps closer to a world where all your design files and node-based decisions will live side-by-side.

Weave tools are in open beta and will be free to use throughout the duration of the beta. Once generally available, Weave tools in Figma will consume Figma AI credits. Weave workflows are live on the Figma Community today for you to explore—or, try publishing your own. Keep an eye out for the Figma node in Weave, which is expected to launch later this summer.

Itay Schiff is the co-founder and chief creative officer of Figma Weave. With 25 years in post-production and VFX, he leads Weave's vision of Artistic Intelligence—scaling ideation and media creation.

Motion now lives on the canvas—in the same file as your components, your variables, and your team—so your designs can come to life from day one.

Customer snapshot: Atlassian

For Atlassian, motion in the canvas has removed the friction that can prevent it from being shipped. “It turns animated illustrations from a specialist handoff into a system capability,” says Senior Product Designer Alexandra Pereira. “Dev Mode and being able to comment on the timeline will allow for a seamless back and forth.”

For designers less familiar with motion, the agent guides them through the basics. “When I was animating a banner, I prompted the agent to give me suggestions on what was working, and what wasn’t,” says Lead Product Designer Davy Fung. This helps demystify motion for everyone, says Lead Motion Designer Maxwell Hathaway: “People get to see how things move really quickly, and that access is going to help them develop taste faster.”

When it’s done right, motion is one of the most expressive elements in a design. It shapes how users read hierarchy and feel the thought behind an interaction. A creative decision this impactful should be scoped and shaped from the start, with input from the whole team.

Starting today, motion is native to the same canvas where the rest of your designs live. Motion is no longer a bottleneck or a one-person job. Any designer can now prompt the Figma agent to build motion directly on the new animation timeline, lowering the barrier to creation while raising the ceiling of what's possible. And with Dev Mode access and functionality, the whole experience is built for a much smoother handoff.

Design and animate in the same file

Custom animation styles are coming, so you'll be able to build and save your own soon.

Sitting alongside Design, Draw, and Dev modes, Motion is the newest layer of a connected experience on the canvas. Switch any frame to Motion mode, and the timeline appears alongside your design.

• Timeline control: Drag layers to adjust timing; scrub to preview any moment; and keyframe position, scale, rotation, and opacity independently. Enable auto keyframing to record every change you make while the playhead is moving. And with time-based comments on the canvas, anyone can point to a specific moment in the animation, bringing the whole team into motion reviews.
• Animation styles: Add preset animation styles—fade, move, scale—for the quickest way in, and then continue refining on the canvas. You can stack animation styles on the timeline to play at the same time, or drag to sequence them.

"Atomic design is now atomic motion design because I have keyframes on the canvas. It’s the last big piece in the interactive world." — Maxwell Hathaway, Lead Motion Designer, Atlassian

Collaborate on the canvas with time-based comments.

Kickstart the animation process with preset animation styles.

Customer snapshot: Adanna Onuekwusi

For product designer and illustrator Adanna Onuekwusi, motion has always been a way to bring delight and emotion into her work. But moving between external tools, browser-based plugins, and Figma to animate a single illustration meant constant context-switching. Having motion directly on the canvas changes that. “Having everything in one space is really helpful,” she says. “I can systematize the motion process and publish it as a library, so it extends the work from something one person does to something other people can benefit from.”

Build a motion system for all your files

Good motion isn't a collection of one-off animations. It's a set of values defined once and applied everywhere. But most teams have never had a place to build that system, so motion gets rebuilt from scratch every sprint, and what ships reflects whoever had time, not what was designed.

• Animated components: Components are the foundational unit of a design system. Now they carry motion, too. Once you build an animation for a component, it travels with that component across every screen and collaborator’s file, the same way fill and typography do.
• Motion variables: Motion variables let you customize that animation. Create an easing variable, define multiple modes for that variable, and apply it across your animations. Switch the mode at the page level, and every animation referencing that variable updates at once.

Create motion variables with modes, switch modes, and watch animations update across the file.

"If it’s something you interact with every day, software should make you feel something. Motion is another pathway to bringing that to life." — Adanna Onuekwusi, product designer and illustrator

Shader effects and motion

Every property a shader exposes can now be keyframed on the motion timeline. Traditionally, Figma's animatable properties were limited. Shaders change that—anything you can control with a slider or input field, you can now animate with keyframes over time.

3D transforms coming soon

Motion and 3D transforms are part of the same design decision. When you’re thinking about how something moves, you’re thinking about where it lives in space.

With 3D transforms, you’ll be able to rotate frames, vectors, and text on the z-axis with native controls and a live preview as you drag. Every transform stays fully editable. The result exports to CSS and connects through MCP, so the spatial design you build is the spatial design that’s in code. Combine 3D transformation with motion in the same file and you can prototype spatial interactions that weren’t possible in Figma before.

Join the waitlist.

Go further with the Figma agent

Motion is technically demanding. For a designer who hasn't animated before, the Figma agent removes the learning curve—describe what you want, and it builds real keyframes on the timeline, grounded in your components and tokens.

For a designer who already animates, it handles the repetitive work so you can focus on pushing the work and dialing in the details. Adjust the easing curve or timing, add a property, or tear it down and rethink it. You can run several prompts at the same time, so you can stay in your flow while the agent tackles multiple frames.

Type a prompt and the agent builds keyframes on the timeline. Then, edit the result directly.

"Being able to generate within guardrails really matters for enterprise systems. It allows for consistency, accessibility, and implementation quality as much as speed." — Alexandra Pereira, Senior Product Designer, Atlassian

Ship the motion you designed

Motion in production rarely matches exactly what was designed. Details that took hours to dial in, like easing and timing, get lost in translation between the file and the code. Figma closes that gap even before you reach the handoff. Select any animated frame and export an MP4, GIF, SVG, or WEBM directly from the file, so you can get early alignment and input.

When the file is ready for development, switch to Dev Mode and open the Motion tab. The full timeline is visible and inspectable. Every timing value, easing curve, and keyframe is readable without any interpretation needed from the developer. They can copy animation code directly from the panel in CSS, JSON, or framework-ready React and motion.dev.

Motion is also MCP-compatible, so you can share a link to any animated frame with a coding agent. Since it carries the full motion context, nothing gets rewritten or reinterpreted.

Copy CSS, JSON, or Motion.dev from Dev Mode for handoff.

"If a teammate can easily inspect and translate motion with the formats that we need, it reduces the gap between intent and shipping." — Alexandra Pereira, Senior Product Designer, Atlassian

Animation is no longer a finishing step or a scope risk. Motion now moves through the design process the way everything else does: from the first frame to the final build, in one place.

Motion is in open beta. Starter users can access motion with limited exports. Full seat users on all plans can access motion primitives and export. Full design system integration and the Figma agent for motion are available on paid plans.

Learn the principles behind effective motion design and get hands-on practice creating animations in Figma Motion. Try out motion for yourself in our playground file or get started in the help center.

Sign up here to join the waitlist for 3D transforms.

Dave is a product manager on Figma's Expressive Design team, where he focuses on building tools that give creators more power to express themselves. He joined Figma with Modyfi in 2025, where he was head of product. Nothing makes Dave happier than seeing someone use the tools he's built to create something he never thought was possible.

Prompting gets you started. Custom tools, real context, and skills take the design agent further—so what ends up on the canvas actually looks like you.

Explore our playground files for the agent and custom tools.
The difference between an agent that helps you work more efficiently and one that actually understands how you work is context. When an agent knows your team's way of working it can do more than produce. It can collaborate.
Where that collaboration gets interesting is on the Figma canvas itself—creating tools, effects, and experiences that wouldn’t have been possible before. The Figma design agent is now available to more users in open beta, giving you more flexibility, precision, and creative control over your work.

Build your own tools

Customer snapshot: Edward Checheque

Product designer Edward Checheque’s generative plugins import HTML to the canvas, create dashboard layouts, and visualize data. Before, building them was a frustrating process. “I would need to ask a favor from a developer who may not have time to help me,” says Edward. “Later, AI tools made it possible, but I still had to switch between different tools and workflows. Now with the agent in Figma, it’s much faster and easier because I can just ask for what I want directly. I’ve gone from zero possibilities to great possibilities.”
Everyone works differently, but design tools are often one-size-fits-all. Layouts, textures, and effects are all determined by what's supported natively in your design tool. Starting today, you can shape your tools just as you shape your designs. That opens up more room to experiment visually and share what you build with your team.

Generative plugins

A plugin extends what's possible on the Figma canvas—but building one has always required technical skills and a dev setup that many designers don't have. Now you can prompt the design agent to build reusable plugins.
Because they use PropsKit, these generative plugins look and feel native to Figma. And because they live on the canvas, they give you more direct control as you iterate. For anything that reaches outside Figma Design, like AI services or third-party APIs, still use classic plugins.

An image layout generator plugin helps you organize assets.

“The agent suggested ways to solve issues. That was magic for me because it talked to me like a developer who wanted to help me.”
Edward Checheque, Product Designer

Shader effects and fills

Customer snapshot: Anna Zhang

Creative technologist Anna Zhang built her own shaders to remix her own photography with collage, marbling, light leak, metal emboss, and prism effects. “It’s a way to compound what I’ve been doing in the past or build a reusable workflow,” she says. “There’s a lot of expressive potential from a single starting point.”
Anna focused on the functionality while letting the agent handle the UI: “It was a back-and-forth dialogue between me and the agent, and what it was outputting would shape the parameters I would add down the line. It was like a negotiation.”
The agent can also build shaders—small, customizable programs powered by WebGPU that define how pixels render. Think dither, liquid metal, fractal noise. They come in two flavors:

• Shader effects are like native Figma effects, but built entirely by you—like particle stretch, lens distortion, color outline, and more. You can stack them, adjust the properties, and couple them with native effects for the result you want.

Using any plugin or shader—whether you built it, a teammate shared it, or you found it in the Community—is always free and available on all plans. Prompting the agent to build plugins or shaders requires access to the Figma design agent and will cost AI credits once it's generally available.

• Shader fills are dynamic and generative—going far beyond solid colors and gradients, including watercolor, moiré, pattern grids, and more.

Play with shader fills like dither waves, fluid halftone, particle web, and magnetic field.

Shaders and generative plugins live in a new Tools tab alongside classic plugins, Weave tools, and widgets. Figma has over 30 plugins and shaders to get you started, but the most useful are the ones you build yourself.
When creating via the design agent, you decide the kind of shader you want to build and which properties you need to manipulate, and the agent builds it for you. But what the agent can do on the canvas is only as good as what you give it to work with.

Customize the controls on your shader effects and fills.

Layer effects to get the results you want.

“Being able to author your own tools allows you to have control—every one carries a worldview about what should be possible.”
Anna Zhang, Creative Technologist

Bring more context to every conversation

Good context doesn't just inform the agent—it shapes what it makes. The closer the agent is to your project, your brand, and your ways of working, the more accurate the output will be.

• Attach files directly: Drop files like a user interview, UX copy doc, or data report into the agent chat. The agent uses it as reference throughout the conversation, so the work reflects your project context and direction.
• Reference other Figma files: When you paste a Figma file link, the agent gets the full structure—components, tokens, layout, and styles—and can understand and reproduce design patterns, not just approximate them from a flat image.
• Search the web: The agent can pull in live data without leaving Figma, like real restaurant names and photos for a listing, current UX patterns from competitors, and up-to-date content for realistic mockups.
• Connect your tools: MCP connectors bring context from GitHub, Atlassian, Slack, and other tools directly into the agent—and can post updates back. Pull product tickets from Linear to inform a design, or reference data from Hex without copy-pasting.

Attach files directly in the agent chat.

Bring context from external tools into the agent.

Scale your point of view

Good prompts carry a point of view. Skills let you save that thinking, share it with your team, and put your creative direction to work beyond your own files.

• Create custom skills: Skills turn the prompts you keep coming back to into reusable slash commands—whether that's applying a specific aesthetic, reviewing designs, or automating something you’ve already figured out.
• Publish skills to your team: Share a skill and your thinking becomes part of how the whole team works. A design philosophy, a signature aesthetic, a feedback lens—turned into something any teammate can implement, learn from, and build on.
• See your collaborators' prompts: The iteration history isn't just a log—it's a window into how someone thinks. Agent conversations are visible to your file collaborators by default, turning the process into a shared resource. Make them private whenever you need to.

Create and share custom Skills that turn repeatable workflows into one-click commands.

The best moment in design is when what's in your head appears on screen. Today, you have more ways to bring that idea to life. Your code, your plugins, your shaders, your context—all on the Figma canvas. That's what the Figma design agent unlocks.

The Figma design agent is available in open beta for Full seat users on Professional, Organization, and Enterprise plans. Collab, Dev, and View seats can use the agent in their drafts. The agent is free to use during beta. Play around in the agent playground file or learn practical ways to use AI in your design workflow. Read more about the Figma agent and generative plugins and shaders in our help center.

Read Figma CEO and Co-founder Dylan Field’s recap of Config.

Georgia leads Creation Engine at Figma, focused on empowering creative technologists, designers, and artists doing beautiful work on the canvas. Before Figma, she held roles at Abstract and GitHub building tools for designers and developers. Outside of work, Georgia makes wine under her own label, skis whenever she can, and spends the rest of her time with her two Australian Shepherds.

Rodrigo is a product manager at Figma, working on agents. Before Figma, Rodrigo led AI product management at Asana.

NEW RELEASE

UPDATE

FIGMA

AI

FIGMA COMMUNITY

DESIGN

We recently announced new features and capabilities that expand what you can do in Figma. Here’s everything we shared at Config 2026:

Create with new materials.

Motion, depth, texture, and code — all on the canvas now.

• Motion: Create precise, expressive animations in the timeline or with the Figma agent. Build out reusable systems, and ship dev-ready animations.
• 3D transforms: Give your designs and images 3D dimension and depth. Combine with motion to make objects move like they do in the real world.
• Shaders: Describe what you want and our agent will build it for you—shareable and ready to bring texture to your files.
• Code layers: Prompt interaction ideas, compare directions, and dial in the details—starting from designs or your codebase.

Create custom tools.

The Figma agent connects to your tools, your files, and your team.

• Agent skills: Add skills, attachments, or connectors to help the Figma agent help you — more context for the agent, more control for you.
• Agent in FigJam and Slides: Generate boards and diagrams in FigJam and draft and bulk-edit decks in Slides.
• Generative plugins: Tell the Figma agent what you need and let it generate custom tools for your creative work.
• Figma Weave tools: Get quality assets on repeat with tools that transform any visual — style transfer, perspective shifts, and more, without leaving Figma.
• Weave workflows: Create and publish Weave workflows as a tool or a template file for others to use on the Figma Community.

Explore everything we launched at Config in our recap blog post.

Aleph 2.0 brings frame-level creative direction to the Figma Weave canvas.

Runway’s new model Aleph 2.0, now available in Weave, is built for more precise footage control to make every edit a decision you direct.

More time, more control

Aleph 2.0 supports video clips up to 30 seconds, so you can direct a full scene. Bring in reference images to inform the look you want, and the model applies it across the video while preserving everything you didn't ask to change. Keyframe edits carry through wherever they're relevant, so a change to a subject follows that subject through every frame they appear in.

Sequence your steps

Creative direction rarely happens in a single prompt. The Aleph 2.0 node in Weave lets you build a video the same way you build any creative project, one decision at a time. Through a connected workflow, you can preview changes before you commit, refine as you go, and shape the final result.

Go beyond what you captured

Once a scene is on the canvas, you're not limited by what was originally filmed. Change the camera angle, introduce a new character, or transform the environment entirely—without a reshoot. That way you can explore multiple directions side by side and develop ideas without starting over. You design the conditions and the model takes the video somewhere new.

Pricing will be updated soon to scale with input length, which may reduce costs for many use cases. Visit our help center, community templates library, and knowledge center to learn more about how to get started in Figma Weave.

Kim Köhler is a creative workflow advocate at Figma Weave. He builds AI-driven workflow examples for designers, produces tutorials, and helps grow an engaged creative community. He previously held creative direction and technical artistry roles at Meta and The Mill.

NEW RELEASE

FIGMA

AI

DESIGN

Web search is now available in the Figma design agent. Pull in live web context, find best practices, and populate designs with real-world content instead of placeholders, all without leaving your file. To get started, users can prompt "search the web" in the chat or turn on web search in the plus menu.

For admins: Org admins on the Organization and Enterprise plans can manage web search access in settings. Web search is enabled by default in the organization, but individual users must toggle it on in chat.

Learn more about web search and access the agent beta in Figma Design.

Share 4 ways we’re using our MCP server at Figma

The Figma MCP server reaches further across the platform than it ever has. From updating a living deck to shipping a design to production—here's what that looks like in practice.

Two months after opening the canvas to agents, the Figma MCP server now works across Figma Slides, FigJam, Figma Make, and the new Figma agent. That means presentation decks, FigJam boards, and Make prototypes can all be created or updated from a prompt. The MCP server also supports custom fonts and lets you download images and icons—as SVG, PDF, JPG, or PNG—from design files through the new download_assets tool.

Here are four workflows Figmates are running right now using these new capabilities.

1. Create and refresh decks in Figma Slides

Mallory Dean, a designer advocate at Figma, maintains an evergreen deck covering Figma’s AI product launches. It's a living deck that she refreshes every few weeks so that what she's presenting at design talks and customer meetings stays current.

The Figma MCP server now supports uploaded custom fonts, so any typeface saved on your machine can be prompted to render correctly in designs or slides.

After we launched the Figma agent, she prompted in her code editor:
"Update my Figma AI deck to include our new Figma agent. Pull content from Slack, Google Drive, our Shortcut blog, and Release Notes webpage. Give me suggestions for what to refresh, plus ideas for new slides."

The agent pulled relevant conversations, briefs, and launch messaging, then used the use_figma tool as well as the /figma-use-slides skill in Figma Slides to update the deck against her template.

The new slides still needed a review pass, images to swap out placeholders and copy edits, but the first 80% of the content work was already done by the time she jumped in. With our new custom font support, the agent rendered type in her uploaded custom fonts—not web-safe approximations—so the deck stayed on-brand.

This same setup shows up across the product development process, whether you’re generating something from scratch or updating an existing document. A PM building a kickoff deck. A designer presenting a design exploration. Marketing pulling together a GTM plan for a feature. Sales updating a customer-facing deck with the latest product changes. The work isn’t just faster—it comes out on-brand, built from your team's design system.

2. Generate FigJam boards from live data

Skills help agents create better and more consistent outputs. Explore custom skills from the Figma community or submit your own skills to the Figma community-resources repo for others to use with the Figma MCP server.

As a product manager at Figma, Prasant Lokinendi runs feature kickoff workshops often. Prepping an engaging FigJam for these workshops—pulling in context from across the company and formatting sections to fit the session—takes time. So he built /figjam-builder, a custom skill that carries those instructions so he doesn't have to re-prompt them every time.

For our Make voice-to-text launch earlier this year, he prompted his agent to generate a FigJam board from context pulled across Slack, Asana, and Notion for project structure, and Hex for analytics. Instead of an empty FigJam, he started from the most up-to-date data, including product vision, customer insights, and key decisions.

3. Move designs between code and canvas with Figma Make

The MCP server now also works in Figma Make—closing the loop from design edits to production PR without ever leaving Figma. Iris Lin, a product designer at Figma, runs this loop on real product work.

For example, when Iris and a teammate recently built a sample audio editor as a demo file, her teammate shipped a first version, but Iris wanted to update the designs. Interactions are hard to show in a static file, so she branched the code and built the real thing in Figma Make: audio clips you can drag and reorder, a popover with level controls, and a playhead that scrubs.

Since Iris wanted to make edits to her design system for her demo file she brought the Make preview into the canvas by prompting in the Make prompt box:
“Can you bring back the preview here into Figma as design layers?”

The screen landed on the canvas, rebuilt with the relevant components from her library. Iris changed the audio clip component following her normal design patterns on the canvas, giving it a clear default, hover, and drag state. Then she sent it the other direction:
“Pull those new states back into the code.”

The agent read her design changes and wrote all three into the component, ready to push to GitHub as a PR.

This workflow puts you in control of what ships, all from within Figma. The agent reads and writes your real components on both ends—the same way Code Connect maps your library to production code. Design decisions that used to lose fidelity between handoff and review now travel all the way to the PR.

4. Split the work with the Figma agent

As the product manager behind the Figma MCP server, Yarden Katz knows how to push our MCP to its limits. One scenario she keeps coming back to is a screen that exists only in code, with no canvas representation at all. The goal is to get it into Figma, attached to the right design system, so designers can work with it.

Pull all assets out of Figma directly through the Figma MCP server with our new download_assets capability. Unlike a screenshot, it returns the actual exportable file—SVG, PDF, JPG, or the original source image. No manual export needed.

Working from a sample app with a login flow and a dashboard, she prompted from her code editor:
"Push this dashboard and the login flow into Figma. Reuse my existing components and variables where they exist, and generate proper component sets and variables where they don't."

The Figma plugin ships with skills that give the agent context on how to use Figma, so it read her library in both Figma and her codebase and decided what to reuse and what to build new, rather than duplicating work she'd already done.

It got her a strong first pass, not a finished one. The auto layout, the fonts, and a few unmapped colors still needed work. That's where the Figma agent picked up—working beside her on the canvas with deep context on her design system. She prompted it to fix the layout, correct the type, and map every color to the right variable. When it was where she wanted it, she pushed it back to code through the MCP server. If needed, she could also pull source images and icons straight from the agent with our new download_assets tool without exporting separately.

In this use case, the MCP server and the Figma agent tag-team to get to final designs. The server connects Figma to the agent you're already in and brings a code-only screen onto the canvas, built from real components. Then the Figma agent takes it from there. Native to the canvas, it explores directions while staying grounded in your components and tokens, right where you and your team design.

The Figma agent and Figma Make's production codebase integration are currently in closed beta. The write capabilities in the Figma MCP server are in open beta—check out our setup guide to get started and we’d love to see what you build.

Mari Kong is a product marketing manager at Figma focused on AI tools across design and code.

Four updates to the Figma MCP server are available today.

• use_figma in Figma Slides - External agents can now create and update slides presentations built with your templates.
• Uploaded local font support - The server now renders type using the fonts up, not web-safe approximations.
• Downloadable assets - Export JPG, SVG, PDF assets out of a Figma file with the new download_assets tool.
• Compatible now with Xcode - Bring your mobile designs directly into Xcode to create new flows and preview screens

From quickly refreshing a living deck to pulling in live data for a workshop, read how four Figmates are using our expanded MCP server.

UPDATE

FIGMA

DESIGN

WEBSITES

You can now bring your websites onto the canvas as structured layers with the Figma Chrome extension. Copy the full page or selected elements, then paste into Figma to reference and riff on, no coding agent needed. The ability to generate designs using your design system is coming soon.

To get started, install the extension and sign in with your Figma account. This feature is currently in beta and available only on paid plans.

Learn more in the help center.