Struggling with Hover States in Penpot Components.

[valkier]

I’d like to understand the workflow in Penpot to see if I should switch from Figma.

I design a button. Then I create a component, followed by a variant. Now I have a Button:default and a Button:hover. In the Prototype tab, I can set up a connection using “Mouse Enter” and “Mouse Leave.”

This button appears in the Assets panel.

However, if I create a new page and drag the button from the Assets panel into my new design, the button doesn’t respond when I hover over it.

Did I miss something, or do I have to add the :hover state to the design for every instance of the button and set up the connection again?

[LauraKalbag]

@valkier

Did I miss something, or do I have to add the :hover state to the design for every instance of the button and set up the connection again?

Right now, you do have to set up the connections again. However, I know that linking variants to interactions like this is a really common request, and something that’s on the team’s radar for the future.