Custom Buttons created in Photoshop to XD

[NVDT]

I created my application GUI within Photoshop, I know how to import the contents into XD. The problem is,  that the buttons I created with their own (normal / hover) states already created.

I can't seem to make them funcionable within XD. I have tried but can't get the normal / hover states to become active and work as I intended them too. I tried searching for that specific help but unable to located any for this particular thing.

I would be greatful if someone could either in detailed step by step, it doesn't matter if it's in text or video walkthrough.

Thanks,

NV

[Ares Hovhannesyan]

Please review Add multiple states to components (adobe.com)

or my tutorial about components state (in my native Armenian Language).

https://youtu.be/P2fm3O3erBc

[NVDT]

Hey Ares Hovhannesyan.

Thank you for your response, greatly appreciated.

I understand the functionality of states and components within the XD application. I just want to know if it's possible to  make them functionable once I have them imported into XD.

Instead of creatring the button elements entirely in XD.

[Ares Hovhannesyan]

I think you need to convert them into components. Can you share your psd document. Is your buttom created as shape in psd?

[NVDT]

Here are previews of the designs within PS. I do have my buttons created with shapes. not an image or rasterized.

Here are previews within XD. Maybe you can notice something I'm doing wrong.

This was in the "preview".

Sorry for all the previews. But it can't possibly be this difficult to create the button functions with custom imported buttons.

Thanks again.

[Ares Hovhannesyan · Accepted solution]

I have created shape in Ps.

Save it as PSD.

Import into Xd.

Make Component 

Add Hover State 

Change color

In preview mode it change color to blue.  Is these work for you?

[NVDT]

Hey Ares Hovhannesyan.

I initially thought I could just import my UI design 'select' the 'normal' button state convert to component, select the 'hover' button state convert and go back to the 'normal' state and set it to default state then select the 'hover' and set it to the hover state. But it never worked this.

Man, I was seriously overthinking that whole button process. Thank you for helping me figure this out. Greatly appreciate that!