Workflow lab: New tools, more expression with Figma Motion, Figma Weave, and shaders

Overview

Your brand is more than a logo. It shows up in your product, your campaigns, and every asset your team makes. Each of those moments is a chance to make your brand more recognizable and distinct.

These days it can become a challenge to build and maintain a brand the further you push an idea and the more people, tools, and handoffs get involved. Because different people own different parts of the creative process, your team is working across a dozen tools and revisions. For most teams, Figma is already where products get built. The latest designs are there, and so is the system behind them. That makes it a strong foundation for brand and creative work too. If you're launching a campaign, you can build it alongside your actual product work while keeping commenting, live collaboration with multiplayer, and a shared design system along the way.

Key concepts

Figma Motion

Figma Motion is a mode within Figma Design, accessible from the bottom of your toolbar, where you animate properties over time using a timeline. Motion is currently in beta.

Keyframes and animation styles

Keyframes mark a property's value at a specific point on the timeline. You place them manually, which gives you the most control and customization.

Animation styles are pre-built animations you apply from the right panel, like position, scale, rotation, size, and opacity. They're fast to apply, can be stacked, and can be copied and pasted between layers.

Shaders

A shader is a small program that tells a graphics processor how to transform geometry, calculate light, generate texture, or distort an image. Figma has two types:

• Shader effects act on a layer and render whatever sits underneath it—similar to a blur or glass effect, or a camera filter.
• Shader fills render the actual pixels of a layer—backgrounds, patterns, and gradients.

Shaders are built entirely through the Figma agent, and their controls can be keyframed in Motion.

Learn how to build shaders.

Figma Agent and skills

Figma Agent lives in the left panel and can help with tasks across Figma's products and features, including building animations, shaders, and plugins. Watch: A product designer's guide to the Figma agent.

A skill is a markdown file containing repeatable instructions the agent can call. Any workflow you'd otherwise re-prompt for, like documenting components and auditing a file, is a good candidate. You can author skills directly with the Figma agent, and there are many available in the Figma Community.

Figma Weave

Figma Weave is Figma's generative platform for images, video, audio, and 3D. It's a separate, node-based environment that combines generative models with manual tools, so you keep creative direction over the composition instead of prompting for it.

In Weave, work flows left to right: inputs connect on the left, outputs come out on the right.

Workflows

The four workflows below move across different creative treatments rather than forming one end-to-end demo. The point is breadth—where each tool fits, and what's now possible without leaving Figma.

Build a brand system that scales

Use this workflow when your brand guidelines live in local files and old PDFs, and you want them systemized in Figma alongside your product design system.

Design libraries are foundational for most product design teams, where avatars, buttons, text fields, are all versioned and shared. Brand and creative teams can work the same way, with a system that shares foundations with product designers rather than living separately.

Step 1: Bring brand assets into a library

Alongside your UI components, add your brand primitives, like logos, icons, type ramps, and color ramps. Having these in a Figma library gives you versioning and a way to grow the brand over time, adding a color ramp or a mode when you launch a new product, rather than reissuing a document.

Learn how to create a library in Figma.

Step 2: Use variables for brand palettes and modes

Figma variables let you define multiple palettes and product modes for the same asset. You can use Figma Agent to generate variables by prompting it with your color system to build out the variable modes for you.

Once modes are set up, a template, like an Instagram story, can be switched between palettes from the Appearance panel in the right sidebar, and the color changes are recognized automatically. Work that used to be manual becomes something a marketer or partner can do safely.

Learn more about creating reusable values with variables.

Step 3: Put documentation next to the assets

Add documentation for common patterns like type lockups, badges, usage rules directly to your design assets on the canvas. Guidance shows up where people are actually working, and it can be updated rather than reissued as a PDF.

Learn how to add descriptions to styles, components, and variables.

Recap

In this workflow, you:

1. Brought brand primitives into a Figma library alongside your product design system.
2. Used Figma Agent and variables to generate brand palettes and product modes.
3. Documented patterns on the canvas so guidance stays current and in context.

Build motion assets from your brand system

Use this workflow when you want to add animation to brand or product work using components you've already built, without moving to a separate motion tool.

Once your brand and product systems live together in Figma, you can bring them to life with Motion using those same components.

Step 1: Enter Motion and read the timeline

Toggle into Motion from the bottom of your toolbar. A timeline appears at the bottom of the canvas, where you set duration and animate properties over time.

On the canvas, a motion icon on a frame means motion is applied to it. Click it to open that frame's timeline. As you scrub, you'll see properties animate, and the properties panel now shows keyframes alongside each property you can manipulate.

Learn more about keyframes for Motion in Figma.

Step 2: Animate a logo and build motion into components

A logo animation is a good place to start, because it scales. Use simple properties like path trim, easing, and opacity to bring it to life.

Motion can be built into your components, so when you drag out an instance, the animation comes with it.

Motion is also readable by the Figma MCP server, which makes it useful for documentation. You can have an agent generate a documentation frame that lists what's animated, the role each element plays, a keyframe breakdown, and usage guidelines. Learn how to hand off animations to development.

Step 3: Prompt Figma Agent for animation

Agents can build a lot of your motion, which helps if you're new to animation. One example from the livestream: prompting the agent to "animate the compass dial rotating smoothly, and at the same time update the degree text to reflect the rotation in sync" produced a working animation in about two prompts.

Tips for prompting the agent in Motion:

• Select the layer in the chat: Selecting the actual layer you want to animate brings that context into the agent so it can read those layers.
• Describe the feeling, not the math: You don't need to specify Bézier curves and milliseconds. Get the feeling across with the agent, then refine the keyframes or animation styles yourself.
• Mention timing and choreography: Sequencing matters: "I want this to enter, then this, then this."
• Use style keywords: Play art director to help the agent.
• Name the type of motion: Slide in, fade in, scale up.

Step 4: Apply animation styles for speed

For simpler needs like a fade in/move in from the left, use animation styles instead of keyframing.

1. Select a layer.
2. From the right panel, click Add animation. You can currently adjust position, scale, rotation, size, and opacity.
3. Set the property value, delay, and duration, and apply an easing curve from the presets or from motion variables in your design system.

Animation styles can be stacked, and copied and pasted between layers. For a list of events that should slide in one after another, apply the style to the first item and paste it onto the rest.

Explore Figma Motion.

Step 5: Use skills for repeatable motion setups

Skills with the Figma Agent let you package a way of working. The Camera Zoom and Pan skill, available in the Figma Community, adds camera motions like zooming in and out, panning left, right, up, and down to a composition.

Rather than animating your content directly, the skill adds frames on top of it and animates those, keeping the camera move separate from the artwork. It also adds the keyframes for you. A prompt like "Use Camera Zoom and Pan to set up the rig, then add the keyframes to create a dynamic camera motion" produces a zoom in, a pan across, and a zoom back out.

Learn more about creating skills with the Figma MCP server.

Step 6: Collaborate and hand off to developers

Motion carries context for the people you work with:

• Dev Mode: Select an asset with motion applied and scroll down to see the keyframe code, which you can copy. You can also open the timeline in Dev Mode, so collaborators with Dev Mode access can review the motion themselves. JSON export is available too. Learn how to hand off animations to development.
• Comments on the timeline: Reviewers can comment at a specific point in the timeline, snapshotting a moment in time rather than describing it.
• Export: Export animations in MP4, GIF, SVG, and WebM, from your Export settings in the right sidebar. Exports open in a new tab so you can keep working while a larger file processes.

Recap

In this workflow, you:

1. Entered Motion and animated properties on the timeline with keyframes.
2. Built motion into components so animation travels with every instance.
3. Used animation styles like stacked, copied, and pasted for faster, simpler animation.
4. Prompted Figma Agent and used a community skill to handle setups you'd rather not build by hand.
5. Handed off through Dev Mode, timeline comments, and video export.

Use this workflow when you want a visual treatment that's hard to achieve with Figma's built-in effects, and you want it reusable across your brand.

Shaders are built entirely through the Figma agent, which means you can describe a treatment and get back a tool with controls, rather than recreating an effect by hand each time.

Step 1: Build a shader effect with the agent

Open a new agent chat and ask it to create a shader. For example, "I want to create a chromatic aberration effect."

A more useful approach for brand work is to select an image that already has your treatment applied and ask the agent to analyze what visual treatment is happening, then build controls to scale it onto other content. In the livestream example, this produced a "Photo Lab" shader with desaturation, solarization, a levels control, film, and grain. A photo treatment involving inversion and solarization that was difficult to reproduce with Figma's photo editing tools alone can be quickly accomplished with shaders.

Learn more about shader fills and effects.

Step 2: Apply and tune the shader

1. Select a layer.
2. From the Effects panel, choose Shader, and pick from the shaders you've created.

Each shader exposes the controls the agent built, like midpoints, white and black points, gradient map, motion blur, or solarization.

You can also stack effects on top of an existing shader and both render together.

Step 3: Use shader fills for backgrounds and patterns

A shader fill renders the layer itself. One example from the livestream: a fill that mimics weather patterns like clear blue sky and light rain applied to a schedule section of a website that reads horizontally through the time of day.

Check out some shader fills in the Figma Community.

Step 4: Explore first-party shaders

Shaders live in the Tools section of the left sidebar. Sort by From Figma to see the first-party examples released at Config:

• Pixel stretch: Stretches pixels from a point in the image. Control angle, radius, and position, including with on-canvas controls. Useful for suggesting speed.
• Lens distortion: Adds chromatic aberration and distortion—distorting imagery rather than layering an effect on top of it.
• Slice shift: Slices and manipulates the image in different directions.
• Bloom: Oversaturates and blows out the whites of an image, with control over where in the image the effect builds.
• Nebula: A fill that generates an open night sky, with controls for star density and travel through space, plus sky colors.
• S gradient: A gradient fill with on-canvas handles. Drag to adjust points, edit colors on the canvas or in the panel, and attach colors to variables. Because it was prompted with the agent, you can build your own gradient tool with the specific behavior your brand needs.

Also worth knowing: Generative plugins

The agent builds plugins the same way it builds shaders. Plugins are good for automating workflows and generating layouts. One example: a plugin that arranges selected images into different layouts with controls for spacing, randomness, and corner radius, adding the result directly to the canvas. Pair it with the agent to animate the result.

Plugins are found in the tools panel, or in your file if already running.

Learn more about generative plugins in Figma.

Recap

In this workflow, you:

1. Had the agent analyze an existing treatment and build a shader with reusable controls.
2. Applied and tuned the shader from the effects panel, stacking effects where useful.
3. Used a shader fill to make a static section dynamic, and keyframed its controls in Motion.
4. Explored Figma's first-party shaders as starting points.

Scale brand content and campaigns with Figma Weave

Use this workflow when you want to build a reusable generative pipeline where you swap the input and get a new on-brand asset, rather than prompting one-off images.

Weave may look intimidating at first, but this demo will break it down enough for you to walk away with something useful. The main concept to consider is you're building a simple yet powerful machine: a workflow you set up once, then rerun with different inputs.

Step 1: Set up brand guidelines and input lists

Start with your brand colors as a color palette node.

1. Click the Search icon from the left sidebar and search Color palette.
2. Drag it to your canvas.
3. Add or remove colors from the right sidebar, and modify them at any time.

Now, build your variables as editable text lists.

1. Create a list in a Text prompt node with each value separated by an asterisk.
2. Add an Array node to your canvas and connect the list to it.

In the livestream example, one list held locations relevant to an outdoor activity app (road, rooftop, underground, pedestrian), each separated by an asterisk. Feed that text into an Array node, which scans for asterisks and breaks the text into separate prompts. Connect the array to a List node and you get a dropdown you can choose from.

Repeat for a second variable for like activities like running, climbing, and surfing.

Step 2: Write a master prompt

Feed both lists into a Prompt node. The master prompt references the list values, so updating a list updates the prompt.

The example prompt described a candid documentary sport photograph of a single athlete doing [activity] in [location], then added guidelines: the brand colors and an instruction to use only those colors, a request for editorial outdoor lifestyle photography, and specific camera and lens details.

You don't need this much detail, but better prompts get better results.

Step 3: Compare models side by side

Connect the prompt into two or more models at once. You never know which model will do the best job, so comparing is worth it. Models are listed on the left and can be dragged into the canvas; the catalog is updated regularly.

Step 4: Add a Gen Effect and color correct

A Gen Effect is Weave's equivalent of a Figma shader—a generated effect you can modify as much as you want. Click next to the effect name to see the prompt that created it.

The livestream example used a cinematic effect with chromatic aberration and film grain, with a gizmo you can move on the canvas. Change the input image and everything updates accordingly.

For color correction—raising exposure, adding contrast—use Weave's manual controls rather than prompting. Prompting for that kind of look is difficult; editing it directly is fast.

Step 5: Composite and generate video

The Compositor stacks layers on top of one another, so you place elements yourself instead of prompting for placement. Add text over your treated image and you have a finished asset.

To make it move, connect the image into a video model. The prompt in the example was deliberately constrained: animate the photograph into a short live-action video clip, camera locked, no zooms, no camera motion, just continue the existing action.

To apply the same treatment to the video, duplicate the effect group with Cmd / Ctrl D and connect the video. It inherits the grain, chromatic aberration, blur, color correction, and timing.

Step 6: Derive product shots with an LLM node

An LLM node works like chatting with a language model, but inside your workflow, where its output feeds the next node.

In the example, the LLM was prompted as a product photography art director: extract the object the athlete is holding from the input photograph—a skateboard, a surfboard—and write a prompt for a product shot of it. Change the input image and the generated prompt updates automatically, carrying the colors and design from the original.

Step 7: Batch generate variations with a text iterator

A Text iterator batch renders. The node can receive multiple inputs and the connected model runs them all simultaneously from one click with no manual repetition.

The example in the demo fed an image edit model the product shot plus a text iterator containing inputs for four camera angles, generating every angle at once for a full view of the product. Add another value to the iterator and it becomes another prompt. The same pattern scales to 20 or 50 generations from a single run.

Step 8: Bring in Figma frames

The Figma node pulls in a Figma frame as an input. When you update the frame in Figma, it updates in Weave automatically.

The demo example used it to bring in a logo, had a model turn it into a sticker, then removed the gray background with a Gen Effect built for background removal—with tolerance controls and a choice of which color to key out.

Note: The Figma node was announced at Config and is rolling out gradually. Access is expanding over the coming weeks.

Step 9: Save nodes you'll reuse

A Gen Effect you build once can be reused indefinitely, without running another model. Click the three dots on a node, choose Save Node, and name it. Saved nodes appear in the side panel and can be dragged in like any other node.

Step 10: Composite the final piece

To finish the example: the logo and the product were composited manually, because as a designer, you want to decide placement rather than prompt it. We then used a model with a simple instruction to composite the two layers and make the logo feel like part of the object, changing nothing else.

For the final shot, three elements were combined in the compositor: a rotating 360° product video (generated with a video model, then run through a video background removal node), a moving background (the person removed from the original photo, animated, and cropped with a crop node), and a Figma design frame brought in through the Figma node.

The composite looked good but didn't feel unified, so the same Gen Effect used everywhere else was duplicated in, with grain and aberration across the whole frame, tying it together.

Swap the input and the entire machine produces a new asset: same treatment, same brand, different product.

Recap

In this workflow, you:

1. Set up brand colors and editable input lists, split into prompts with array and list nodes.
2. Wrote a master prompt referencing those lists, and compared results across multiple models.
3. Applied a reusable Gen Effect and color corrected manually.
4. Composited layers yourself and generated video with deliberately constrained prompts.
5. Used an LLM node to derive product prompts and a text iterator to batch generate angles.
6. Brought Figma frames in through the Figma node and saved effects as reusable nodes.
7. Rebuilt the final composite from moving parts—and left a machine you can rerun with new inputs.

Putting it all together

Across all four workflows, the same pattern holds: the system carries the work. A brand library makes motion reusable, motion built into components travels with every instance, a shader built once becomes a tool with controls, and a Weave workflow becomes a machine you rerun. The agent handles the scaffolding; you keep the creative direction.

Frequently asked questions

Can you export motion from Figma?

Yes! MP4, GIF, SVG, and WebM, from your export settings. Exports open in a new tab, so larger files can process while you keep working.

Learn more about exporting with Figma Motion.

Does Figma Motion support audio?

Audio support is currently on the roadmap.

What's the difference between a skill and the agent?

Figma Agent lives in the left panel and helps with tasks across Figma's products and features. A skill is a markdown file with instructions the agent calls to perform a repeatable task a specific way. Skills go into the Figma agent, and you can author them with the agent itself.

Learn how to create skills for repeatable processes.

Can I build a Weave workflow that locks certain elements while varying others?

Yes, with the caveat that generative models are unpredictable. Two approaches: create a model sheet of your subject showing it from different angles and use that as an input, which locks in consistency; or use models with element support. Consistent subjects across multiple outputs are achievable, though the setup is involved.

How do you know which model to use in Weave?

Test several. A model you'd expect to underperform can return something more creative. Recommendations from the livestream, offered as opinion: for image editing, Nano Banana and GPT; for video, Kling V3 and Seedance 2.5. Cost, resolution, and performance vary, so comparing models side by side—which Weave is built for—beats settling on the first result.

Any prompting tips for Figma Agent?

Bring as much context as you can: select the relevant frames on the canvas, attach references, and use connectors to pull context from other tools. Be specific, and use natural language. If you're still learning motion or shader vocabulary, you can use AI to help describe a reference image.

Learn more about using AI in your design workflows.

From the Weave side: say what you don't want, not just what you do—it may be the single most useful tip. And don't overwrite. Long prompts aren't automatically better, and models have attention limits, so make sure the main keywords are there.