Highlighted

How to Make Button Change state and go to other artboard

Community Beginner ,
Aug 06, 2020

Copy link to clipboard

Copied

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!

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.

Views

94

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to Make Button Change state and go to other artboard

Community Beginner ,
Aug 06, 2020

Copy link to clipboard

Copied

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!

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.

Views

95

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Employee ,
Aug 06, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Aug 06, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Employee ,
Aug 06, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Aug 06, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Employee ,
Aug 06, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Employee ,
Aug 06, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...