On this page
Quick steps
Build the start frame
Design the first state as a top-level frame.
Duplicate it and change the layers
Duplicate the frame and move, resize, fade, rotate or recolour layers in the copy. Don't rename them.
Connect the frames
Press Shift+E, drag a connection from a layer in the first frame to the second frame, and pick a trigger such as On click or After delay.
Set Smart animate
Set the animation to Smart animate and choose a duration. Press Shift+Space to preview.
How Smart animate matches layers
Figma pairs each layer in the start frame with the layer of the same name at the same place in the hierarchy in the end frame. Matched layers animate between their two states. Layers that don't change between the frames aren't animated.
Duplicating the frame is the easiest way to keep names and nesting identical. If you rebuild a layer or wrap it in a new frame, the match breaks.
Why is Figma Smart animate not working?
- Layer names don't match. A renamed layer ("Card" vs "Card copy") has no partner. Rename them to match.
- The hierarchy changed. The same name inside a different parent frame counts as a different layer.
- You're animating an unsupported property. Shadows don't tween, and neither does a rectangle turning into an ellipse.
- It's an overlay. Smart animate doesn't apply to overlay actions. Use Navigate to between full frames instead.
Other animations in Figma prototypes
Figma also has Instant, Dissolve, Move in/out, Push and Slide in/out. Slide offsets the new frame as it dissolves in; Move keeps the original frame still. All of them are available on every plan, and duration runs from 1 to 10,000 ms. For button states, Smart animate on variants gives you hover and press effects; see how to add a hover effect in Figma.
Export the animation as a GIF
A prototype only plays inside Figma. To drop the animation into a README, Slack or a case study, you need a GIF. Flippy, our plugin, takes a set of frames in order and exports them as a GIF with per-frame timing and a loop count, so each Smart animate state can be one frame of the GIF. The full method is in how to make a GIF in Figma.
For connections, triggers and flows, start with how to prototype in Figma.
Ranked listThe best Figma animation plugins in 2026Frequently asked questions
How do I add animation in a Figma prototype?
Connect two frames in the Prototype tab and set the animation to Smart animate, Dissolve, Move, Push or Slide. Smart animate tweens matching layers between the two frames.
Why is Smart animate not working in Figma?
Usually the layer names or their nesting differ between the two frames, so Figma can't pair them. Smart animate also skips shadows, shape-type changes and overlay actions.
What can Smart animate animate?
Scale, position, opacity, rotation and fill on layers that share a name and position in the hierarchy across both frames.
More in Prototyping
- How to Make Flow Arrows in FigmaFigma Design has no connector tool, but you can still draw flow arrows that stick to frames. The native options, the FigJam copy trick, and plugins, explained.
- Why Is "Fixed" Greyed Out in My Figma Prototype?Fixed (stay in place) is disabled when the layer sits in an auto layout frame. Turn on Ignore auto layout or remove auto layout, then set the layer to Fixed.
- Figma Prototype Not Working? Why It Happens and How to Fix ItMost broken Figma prototypes come down to structure: designs outside frames, frames with no connections, nested targets. Fix On click, After delay and more.
- How to Add a Hover Effect in FigmaMake Default and Hover variants, connect them with While hovering, Change to and Smart animate. Plus why Figma hover states stick or don't fire, and the fix.
- How to Make a Frame Scroll in a Figma PrototypeFigma scrolling only works when content is bigger than the frame. Set Overflow, clip the content, and fix horizontal, vertical and Scroll to that won't work.
- How to View a Figma Prototype on Your PhoneOpen a Figma prototype on a phone with the mobile app, a shared link or Mirror. Plus how to fix a zoomed-in prototype, set the device, and fit it to any screen.
- How to Make a Prototype in FigmaPress Shift+E, drag the + from a layer to a frame, and pick a trigger, action and animation. How to add overlays, flows and share a Figma prototype link.
- How to Add Video to a Figma PrototypePlace an MP4, MOV or WebM up to 300MB with Shift+Cmd+K. Which plans can upload video, how GIFs play in Figma prototypes, and what to do about sound.
- How to make a GIF in FigmaMake a GIF in Figma from frames with a plugin, export a Figma Motion animation as GIF, or record a prototype. Steps, loop and timing settings, and trade-offs.
- How to Make a Skeleton Loader in FigmaHow to design a skeleton loader in Figma: grey blocks with auto layout, a component with variants, a Smart Animate shimmer, and a plugin that converts frames.
- How to Export in Figma (PNG, JPG, SVG, PDF)Export from Figma as PNG, JPG, SVG or PDF: the Export section, scale, bulk export shortcut, transparent backgrounds, and what to do if Export is missing.
- How to install Figma pluginsFigma plugins don't need installing: open one from the Community or run it inside a file. Steps for Figma Design, Dev Mode, FigJam, Slides, saving and admins.