• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to Make Button Change state and go to other artboard

Community Beginner ,
Aug 06, 2020 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!

Views

6.4K

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
community guidelines

correct answers 1 Correct answer

Community Beginner , Aug 06, 2020 Aug 06, 2020

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

...

Votes

Translate

Translate
Adobe Employee ,
Aug 06, 2020 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

Votes

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
community guidelines
Community Beginner ,
Aug 06, 2020 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.

Votes

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
community guidelines
Adobe Employee ,
Aug 06, 2020 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

Votes

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
community guidelines
Community Beginner ,
Aug 06, 2020 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.

Votes

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
community guidelines
Adobe Employee ,
Aug 06, 2020 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

Votes

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
community guidelines
Adobe Employee ,
Aug 06, 2020 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

Votes

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
community guidelines
New Here ,
Mar 22, 2021 Mar 22, 2021

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Beginner ,
Nov 30, 2021 Nov 30, 2021

Copy link to clipboard

Copied

LATEST

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

 

Votes

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
community guidelines