On hover animation content inside buttons moves slighty

I have some buttons that have a hover effect and in the prototype there is slight movement of the content.

  • I checked the position of the content to be the same in both instances (default and hovered) in regards to the margins and in between items
  • I applied a “while hovering” interaction with instant animation

This also seems to happen in between separate screens of a prototype for text in a header component that doesn’t have animation applied or any other interaction.

Screen Recording 2022-10-19 at 14.12.55

Anyone has any idea?

3 Likes

Same issue here. Seems an issue with the prototype mode. The movement seems to be happening at random, varying in each launch of the prototype window. I absolutely hate it.

1 Like

Same here. Have you found a solution to this?

I’ll chime in and say this is extremely annoying and I can’t believe it’s not a bigger issue worth solving.

1 Like

Hey all,
Sorry to hear this is happening! This seems buggy. I can’t reproduce on my end. Is it happening on desktop app, browser or both?

As a first workaround, I’d suggest you to clear out the cache to see if this can help.

Mac

Use the Terminal app to clear the cache.

  1. Quit the Figma desktop app.
  2. Open the Terminal.app and enter the following command: rm -rf "$HOME/Library/Application Support/Figma/"{Desktop,DesktopProfile}
  3. Try opening the Figma desktop app again.

Windows

Run a command line from the Start menu.

  1. Close the Figma desktop app.
  2. Open the Start menu and paste the %APPDATA%\\Figma command. Press the Enter key to submit.
  3. In the window, delete the DesktopProfile folder.
  4. Launch the Figma desktop app again.

If this doesn’t help, I would like our support team to investigate further. Please reach out to them by filling this form here.
Be sure to use your Figma account email, your GIF, include a link to the file, and share it with support-share@figma.com, so we can take a closer look. Thank you!

This solution didn’t resolve the issue I’m experiencing

Hey Jamie,
Sorry to hear you are having issues! If this workaround doesn’t help, please reach out directly to he support team: here.
Be sure to use your Figma account email, include a quick video recording when you encounter the issue, link to the file, and share it with support-share@figma.com, so we can try to replicate your issue and investigate further.

Hey guys! I have the same annoying issue and the only solution that helps me is to open my prototype in the browser version of Figma. So this problem is specific just for desktop application. My OS is Windows, web browser - Firefox.

Does anybody know if this issue still exists?
What’s the solution Please?

1 Like

I am also having this issue. Everything slightly shifts when I hover over any of my components.

2 Likes

the only fix I know is you need to add a border but just make it match the fill color if you want to make it look like borderless.

Not sure whether you’re Grouping or Framing elements - but I found Framing instead of Grouping elements solved my problem.

The same thing happens to me here, however, I have noticed that when opening the prototype in the presentation option it works fine. It is in the preview option, which has this little movement.