I’m trying to improve my project prototype and I have managed to create navigation between the primary button to overlay with the hover button. At the moment the hover button is a separate frame outside the landing page frame.
Where and how should I place the hover button in a way I don’t ruin the interaction?
Hey @Liisa_Pollumaa, it will help if you can post a picture so we can get a visual of what you’re asking about. 
My suggestion based off your question would be to duplicate the Landing Page frame, and then create a Prototype Interaction as hover, and change the button styling on the 2nd frame you duplicated. Make sense?
At the moment it’s like in the picture. I have the hover buttons as frames beside the Landing page. For me, it seems like littering the page.
Am I doing it all wrong? Everything works when trying out the prototype.
@Liisa_Pollumaa - I’m not sure how old this original post is (no year stamp). Micro-interactions were released last year in Figma and it removes the need to do button overlays just to handle hover effects. I’d suggest to turn your buttons into a component with a hover variant and add a micro-interaction of ‘while hovering’ on the components itself. This will clean up your prototype a bit and you won’t need to create additional screens to to handle hover effects. The Figma youtube channel has some great tutorial on that.
I guess another question I have is, what do you need hover states for on a mobile app. From the picture, it looks like this is a mobile app right? So in a real world scenario, you won’t be able to do hover states.
If this is a really narrow app that you’ll be having on a computer, then a hover state makes sense.
@Liisa_Pollumaa in this really choppy screen recording:
- I make an exact copy of my previous frame (command D on Mac)
- Since I copied exactly, every element on the two screens is the same which makes prototyping really simple / easy. I create a hover state from the button on screen 1, and drag it over to screen 2. Make sure you use Smart Animate, as that will use the same component from both screens and animate the difference.
- I change the color of the button on Screen 2, so that when I hover with my mouse, the button will change
- I prototype to demonstrate.
Again, I’m not sure that you would use this in the real world if this is for a mobile app, but it’s doable for demonstrating. What might make more sense in this example is for the user to fill out the login forms (email / username & password), and then the button would be clickable.
Hope this makes sense. Best of luck to you.
Thank you so much. Will try out your suggestions and I totally forgot about Smart Animation.
Yes, this hovering interaction on a mobile app doesn’t make sense in the real world. I was just trying it out at the moment and wanted to make sure I got it
Do you keep the copy of the frame as it is or do you move it in the original frame in the end?
Hey @Liisa_Pollumaa, I’m sorry I don’t completely understand your question at the end there. I made an exact copy of the first frame, so that when I did the smart animate it knew what was different.
So I kept a copy of the first one, and I guess I moved the original frame because it was a clone of itself?
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.