Skip to main content
Known Participant
January 1, 2023
Answered

How to create buttons Hover State in XD?

  • January 1, 2023
  • 1 reply
  • 474 views

I exported some button graphics from an Illustrator drawing of a UI. These buttons use a rounded bevel. There are six transparent PNGs to go on top of them with differnt icons. I put these together in XD to make six button components. They look like this:

 

 

Now all I want to do is set the all of them to 60% transparency, and go to 100% when I hover over one, just so we can see something interactive happening. However, it seems we can't set the transparency for just the hover state. When I change transparency, it's changing the default state also.

 

I have researched this problem, and followed the advice of selecting the elements inside the component and not the component itself, to no avail. It's a pity, because so far I have not had to think using this app...and it allowed me to get quite far quite quickly. All that is progress is now undone by being stuck for hours on what appears to be a poor implementation of something that should be simple.

 

<Title renamed by moderator>

This topic has been closed for replies.
Correct answer Myra Ferguson

You should be able to directly select an individual PNG within a component and adjust its opacity. To select an individual PNG in your component use Ctrl (Windows) / Command (macOS) + click. Here's a video with more information:

1 reply

Myra Ferguson
Community Expert
Myra FergusonCommunity ExpertCorrect answer
Community Expert
January 2, 2023

You should be able to directly select an individual PNG within a component and adjust its opacity. To select an individual PNG in your component use Ctrl (Windows) / Command (macOS) + click. Here's a video with more information: