Skip to main content

Figma Motion for prototyping

  • June 25, 2026
  • 5 replies
  • 150 views
Michael_Castagnolo1

While I’m very happy to finally have a timeline, I’m struggling to get it to work for prototyping.
 

With a traditional timeline I can have things appear in/out as needed when users move forward and backward or open/close UI elements. However, Figma Motion doesn’t seem to work that way. When I have a sheet appear up with an animation inside, I want a close icon to allow the sheet to drop back down without playing the animation inside in reverse. This doesn’t seem to work in Figma Motion. I found a check box that suggests it can do this if I select “Smart animation”, but it doesn’t work. It seems bugged. Cool feature but having it focused on prototyping would make it the most useful.

Lastly, please make it so that we can have an animation loop when it’s running in a prototype. Currently, they only play once. It would be great to use it for something like spinners or flowing animations on a screen a user is looking at.

    5 replies

    Jaycee Lewis
    Figmate

    Hi ​@Michael_Castagnolo1 👋 Thank you very much for taking the time to share your feedback. I passed it along to the Motion team. We appreciate you! — Jaycee

      Артём маликов

      I totally agree with the author — looped animations don't work properly inside a parent frame because they only play once, obeying the main timeline instead of their own. Please add an option to extend a looped element's animation over a longer period or make it run infinitely.

      Артём маликов

      I found a workaround! I created a component for the icon with a looped animation that lasts 1735 milliseconds. This component has two identical variants with the exact same animation. Using 'After delay', the variants toggle back and forth every 1735 ms. This forces the animation to restart continuously, even when the icon is placed inside a parent frame with a different timeline and animation settings.

      Артём маликов

      The previous method didn't work for me, but I found a new one that I’ve tested and confirmed to be effective:

      When you add the icon to a parent frame, switch to prototyping mode. Add an "After delay" trigger to the icon, setting the delay to the exact duration of your icon's animation in milliseconds. For the "Action", select "set playhead" (at the very bottom of the list). Leave the time at its default (0:00.0000) and target the icon itself. This forces the icon to reset and loop after every specified delay interval.

      Please note: If the icon is a component, configuring this inside the main component won't work for its instances. This interaction must be set up directly on the specific icon instance inside the parent frame.

      This keeps the icon's looped animation restarting independently, without waiting for the entire parent frame's timeline to reset.

      I know this is a bit of a workaround, and I hope the developers will implement a cleaner, more native solution in the future.

      Niklas G
      • Niklas G
      • New Member
      • July 10, 2026

      I came across a simliar problem. But in my case I dont want my animation to loop.

      I have a check-box component that plays a small 800ms timeline animation (set to play once) when checked (Interaction: smart animation, play motion animation) and should normally dissolve again when unchecked again (interaction: dissolve).
      When I preview it the timeline animation loops and only stops when prressed again. (loop duration is also independed of the length of the timeline).

      Same happens when I choose instant for both interactions.
      Is this just a timeline issue, that it loops although its set to play once?

      Terms & ConditionsAccessibility statement