Skip to main content
Solved

questions about Figma Motion: motion paths, prototyping, and variants

  • June 30, 2026
  • 5 replies
  • 145 views
YoungoneKim

Hi everyone,

I have a few questions about Figma Motion.

  1. Is it not possible to use curved position paths in Figma Motion?

As far as I can tell, there does not seem to be a way to adjust a position path with Bezier handles or a similar path-editing method, beyond using position keyframes.

The only workaround I found was to overlap movement keyframes with position animation to create a curved motion, but this feels inconvenient and limited in terms of customization.

Apologies if I simply missed the feature.

  1. Is it possible to animate variant changes?

It would be very useful if there were a way to change variants using something like hold keyframes.

I also looked into whether variables could be used for this, but at least in my case, I could not find a way to make it work.

  1. In prototyping, is there a way to make a Motion animation play only on a specific action, such as click or hover?

I wanted to create an animation where an overlay appears on click, but when the overlay opens, I cannot reset the playback position or set the starting point of the animation.

I tried setting the layer delay to 1ms and moving the playhead back to the beginning, but the result was strange: it briefly played from the middle, then jumped back to the start and played again.

These are the main issues I have experienced so far. If there is any existing way to solve or improve these workflows, I would appreciate your help.

 

Thank you.

Best answer by adamsmasher

Hey, ​@YoungoneKim! Thanks for your post and for trying out Motion - these are great questions. I’ll address each individually.

 

  • Adjust the curve of a path (​@Bekah Hufnagel, this will help you as well).  You can adjust the curve of a path used for animating position by doing the following:
    • Select a layer where you are animating a position change in Motion.
    • Hold down CMD and click and drag the start or ending point to show the bezier handle. I’ve attached a screen recording to show this in action.
  • Animate changing/swapping variants
    • You are correct that there isn’t a way to directly do this, but I did think of another way to achieve it:
      • You’ll actually have two layers for this, one for each component state.
      • Animate the opacity of each separately and reversed from each other, that way the opacity of the first state is zero and the same time the opacity of the second state is 100%.
  • Trigger a Motion animation based on an interaction in a prototype
    • There isn’t a way to do this right now, so I’ll flag this to the team for review. Thank you for asking!

 

Let me know if anything I said doesn’t make sense or if you have further questions.

    5 replies

    Bekah Hufnagel

    Hi! I have the exact same question regarding trying to have curved motion paths. Sorry that I can’t help, commenting to stay in touch in case I find a solution!!

    anabela
    • anabela
    • New Member
    • June 30, 2026

    Does someone know if it's possible to hide the "motion" button? I am constantly clicking it by mistake as I want to change between dev and design mode and now this "motion button" is in between. Not user friendly. 

    adamsmasher
    Figmate
    • adamsmasher
    • Figmate
    • Answer
    • July 2, 2026

    Hey, ​@YoungoneKim! Thanks for your post and for trying out Motion - these are great questions. I’ll address each individually.

     

    • Adjust the curve of a path (​@Bekah Hufnagel, this will help you as well).  You can adjust the curve of a path used for animating position by doing the following:
      • Select a layer where you are animating a position change in Motion.
      • Hold down CMD and click and drag the start or ending point to show the bezier handle. I’ve attached a screen recording to show this in action.
    • Animate changing/swapping variants
      • You are correct that there isn’t a way to directly do this, but I did think of another way to achieve it:
        • You’ll actually have two layers for this, one for each component state.
        • Animate the opacity of each separately and reversed from each other, that way the opacity of the first state is zero and the same time the opacity of the second state is 100%.
    • Trigger a Motion animation based on an interaction in a prototype
      • There isn’t a way to do this right now, so I’ll flag this to the team for review. Thank you for asking!

     

    Let me know if anything I said doesn’t make sense or if you have further questions.

      adamsmasher
      Figmate
      • adamsmasher
      • Figmate
      • July 2, 2026

      Hi ​@anabela! I wanted to address your question separately - thank you for asking. I can appreciate how something as small as adding in a button icon can disrupt your workflow.

       

      While there isn’t a way to hide Motion entirely, have you thought about making use of the keyboard command Shift + D to swap between design and dev mode? The same combination works going both ways and might even be faster for you.

      Amila Sampath

      I created a Figma plugin called Motion Path that lets you select an object and a path, then automatically generates the animation in Figma Motion for you.

      The plugin includes 300+ ready-to-use examples covering the most common animation use cases.

      You can learn more about its features here:
      https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin

      You can also try the plugin here:
      https://www.figma.com/community/plugin/1654530170219655744

        Terms & ConditionsAccessibility statement