Skip to main content

Hi,

I'm a Figma beginner and I'm following a lot of training/videos to understand how it works.
I'm trying in vain to use the hover function: when I move the mouse over a button, I want it to change color.

Basically, the basics!

However, when I use on hovering function in the prototype, it doesn't work… I try also the mouse enter and mouse leave, but same results...

Could someone explain how to do this? On the videos I've seen, the menus are different, so I can't find the right tabs to do the same thing.

Thank you for your help.

This should be very simple:

  1. You create a button component: draw the button parts you want, select them and transform them into a component (Ctrl-Alt-k)
  2. Select your component and click the ‘plus in a diamond’ icon
    in the right design bar add a variant. Change the colors in that variant to your hover color as desired.
  3. Click the first variant, switch the right side bar to ‘Prototype’ and add a state transition from the default state to your hover state/variant:

That's all there is. You can then use place an instance of your button component somewhere (in a frame for example) and switch to presentation mode (or do shift-space for a pop-up with that) and try it out. 

Many thanks for your feedback!

It works very well and it's actually very simple.

I've been looking through the youtube videos for 2 days but the channels are out of date…

Thanks again :-)

You are welcome! I did try to attach a demo file to my first response, but it seems that the company I am currently at blocks uploads. Glad you figured it out though.

Perhaps most youtube videos show the previous Figma UI (which you can still switch to by clicking the round black ? icon in the bottom-right corner and choosing "Go back to previous UI”)

Terms & ConditionsCookie settings