Image button - basic / hover / fixed appearance

[Flux Wildly]

Hello Adobe XD Support,

I'm working for a customer who has forced me to design, preview and build their entire website within their licensed Adobe Suite. As I usually use online web software to create websites, this is a first for me.

After some researching, I have decided to take the job and do the design phase in Photoshop, the preview/presentation phase in XD and the web building phase in Dreamweaver.

Now that the first phase is done, I am immediately hitting walls making the design interactive within my second phase, with XD. I am new to your XD application, and I have a question.

Is it possible to keep a clients image button design (made in Photoshop) intact within Adobe XD, while creating different states for it? I have been searching your Support pages plus external Youtube tutorials for several working days without making further progress on the job and I'm slowly getting the feeling it's simply not possible to import two states of one image button, and refer to one state as the basic state, and the other as the rollover and fixed state, as seen in my attached image.

Can this be done in Adobe XD?

[gianvitulano]

Hi Flux Wildly,

to do this you need to create a component. Through the components, you can create different states for buttons, icons, etc... Check out the Adobe XD Component Guide: Work with components

[Flux Wildly]

Thank you for your quick response.

I'm aware of the components, but it seems they all end up looking like the Reply button on this page, for example.
Are you sure this is the way to literally keep my red image button (with the lightbulb graphic, as originally posted) and its rollover state the way they are? I guess my question is if it's possible to keep my previous button/icon design intact? Or does it visually result in an XD component replacement instead?