How to Make Button Change state and go to other artboard

[claraa21341977]

Hi! I'm design a mobile app, and I'd like to know how to create a state change for a button by tapping (changing colors to indicate it's been activated) and with this same tapping action go to anothere artboard.

for example:

LOGIN BUTTON inactive > tap action > LOGIN BUTTON changes color > go to LOGIN page

thanks!

[HARSHIKA_VERMA]

Hi Clara.

Thank you for reaching out. If I heard you right you want to assign to two interactions to a single button with a Tap action. However, I am afraid to put same Tap trigger on a same button. 

I have tried to create a sample showing the similar button by putting Hover action for color change and Tap action to go to the login page.

Please check this link: https://xd.adobe.com/view/d424c6e5-0030-4556-a542-bb7572655a23-8177/ 

Let me know if that helps.

Thanks,

Harshika

[claraa21341977]

hi Harshika!

I would be a good way to solve this problem in the web mode, but I'm making a mobile exclusive project, where there's no hover state.

thanks for your answer anyway.

[HARSHIKA_VERMA]

Thanks for coming back, Clara. Well if you are looking for something without hover state then I believe Vertika steps below can help you better to achieve your workflow.

Please try that and let us know if that helps.

Thanks,

Harshika

[claraa21341977 · Accepted solution]

Thank you and Vertika for quick and thoughtful answers! I found another way witch worked best, I'll share it here to help others with the same problem:

-Create 2 states for my button, inactive and active.

-Create 2 identical arboards, one with the button inactive and one with it active.

-Wire the first to the second, tap trigger, transition without any kind of effect. This will create a fake ''state change''

-Wire the 2nd artboard to the goal page (in my case, from login page to home screen) using a time trigger (i used 0,6s).

the final result:

tap the button, it changes color and you're automaticaly taken to the next page.

[HARSHIKA_VERMA]

Thanks for sharing the solution that worked for you. This will definitely help our customers to create a same kind of workflow.

Please feel free to reach out to us in the future for any query related to XD.

We would be happy to help.

Thanks,

Harshika

[Vertika Gupta]

Hi There,

Got it, we can make it easily in XD. Please follow my below step:-

1. create button -> make it compoment.

2. Create another state of same button with the design of ur need.

3. Go to prototype mode.

4. Do wiring from default state with trigger as tap and destination to another state.

5. Make another wiring from second state with trigger as tap and destination is another artboard.

Above step will help to you in acheiving your design.

Happy designing.

Thanks,

Vertika Gupta

Adobe XD

[DroidR13]

This still requires two taps. On mobile, it should be able to highlight on tap, then have a timed transition to another artboard.

[Syed Naveed5E15]

any solution with one tap ? color change of button and next artboard with single click