How do I make an Interactive Button in Figma?

If you're looking to do more advanced prototyping and you want to have interactive buttons that switch wireframes or change states on mouse hover then I'm going to teach you how to do it in Figma without having to use any 3rd party plugins.

Just follow my step by step video tutorial:

How do I make an Interactive Button in Figma?

I'm only showing you how to create a button in three different states but you can use the same principle to pretty much design it for anything you want. 

First you're going to design the three buttons and make sure to adjust the font colors and backgrounds for each one so that it's clear for the end user if the button has been clicked or hovered. 

Once you're done designing them you'll have to make each individual button a component. This will enable you to access the interaction panel from the prototype settings. 

After you're done with that go ahead and add a new interaction for mouse enter that links to the second component. Then create an interaction for the second component to the first component for mouse leave and from the second to the third on mouse click.
Finally add an interaction to the third component for mouse leave to the first component. 

Then just run the prototype, it should work just fine. 

Conclusion

In short, you're only able to add interactions to components or layers within a wireframe. To keep the example simple I've designed three states of buttons and going to prototype -> interactions I've linked them from one to another based on mouse enter, leave and click. 

And the end result is pretty much a working button that links from one component to another based on mouse activity.