Skip to main content
Juliano_Gil
Juliano_Gil
July 2, 2023
Solved

Move objects up when hover

Hello everyone! 🙂

I’m super new to Figma, I’ve been using xd as my daily UI app, and now that I’m transitioning I can’t understand how to do something like this with Figma.

image

I just want the cards to go like 10px Up when I hover them like in the video below… I can’t seem to get it to move up with component variants and such.

Cards working example

Thank you very much for your help and time! 🙏

    This topic has been closed for replies.
    Alyshia1
    Alyshia1Solution
    January 23, 2024

    @Juliano_Gil hey I’ve found a way around this!

    1. I created a second frame so that the main ‘card’ is situated inside it and make sure padding is all set to 0

    2. Duplicate this first frame and make style changes for what you want it to look like on hover (which will be your second frame)

    3. With your second frame, click RETURN on your keyboard once so that the card frame inside this frame is selected

    4. Set this inner frame to ‘Absolute position’

    5. With it now set to absolute, you can move it wherever you’d like with it still being enclosed by the outer frame

    6. Prototype it like you already did before (eg. on hover)

    And it should work! Hope this helps 😀

    View in thread

    5 replies

    Vicky7
    Vicky7
    July 3, 2023

    hey Juliano
    You can create the frames and get them into a component set
    so you could make the prototype for the pop-up card transition.
    Screenshot_20230703_124454

      Juliano_Gil
      Juliano_GilAuthor
      July 3, 2023

      Hey Vicky! Thank you for your response! I appreciate it!

      So I could only get it to work when the upmost frame holding the card, in both variants, has that extra empty space on the top.

      Screenshot 2023-07-03 101437

      If the default state has that upmost frame hugging the card it doesn’t do the animation. 🤔

      It’s fine and all, but it messes a bit with the alignments in the rest of the page since this component carries an empty extra 20px space.

      Is there a way to do with without that extra empty space in the default state? From what I can see your version only has that extra space in the hover variant, is that right? What am I missing?

      Thank you again for your time, i appreciate you brother!

      Vicky7
      Vicky7
      July 4, 2023

      Hi Juliano
      I don’t know whether we could do it in the standard state
      You can use auto layout for the frames,
      So it could adjust automatically for the pop-up animation
      I have been working like this for making pop-up animation
      in figma prototype
      we will research if there are any better options, If I get
      to know will put a comment about it.

      Alyshia1
      Alyshia1Solution
      January 23, 2024

      @Juliano_Gil hey I’ve found a way around this!

      1. I created a second frame so that the main ‘card’ is situated inside it and make sure padding is all set to 0

      2. Duplicate this first frame and make style changes for what you want it to look like on hover (which will be your second frame)

      3. With your second frame, click RETURN on your keyboard once so that the card frame inside this frame is selected

      4. Set this inner frame to ‘Absolute position’

      5. With it now set to absolute, you can move it wherever you’d like with it still being enclosed by the outer frame

      6. Prototype it like you already did before (eg. on hover)

      And it should work! Hope this helps 😀

        Metin2
        Metin2
        March 27, 2024

        @Alyshia1 Your solution is much better and professional, thank you Alyshia, you made my day 💜

          Terms & ConditionsAccessibility statement