Skip to main content
C
claraa21341977
Inspiring
August 6, 2020
Answered

How to Make Button Change state and go to other artboard

  • August 6, 2020
  • 2 replies
  • 7838 views

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!

    This topic has been closed for replies.
    Correct answer claraa21341977

    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


    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.

    2 replies

    V
    Community Manager
    Vertika GuptaCommunity Manager
    Community Manager
    August 6, 2020

    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
      DroidR13
      Participant
      March 22, 2021

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

      S
      Syed Naveed5E15
      Known Participant
      December 1, 2021

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

       

      HARSHIKA_VERMA
      Community Manager
      HARSHIKA_VERMACommunity Manager
      Community Manager
      August 6, 2020

      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

      C
      claraa21341977Author
      Inspiring
      August 6, 2020

      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
      Community Manager
      HARSHIKA_VERMACommunity Manager
      Community Manager
      August 6, 2020

      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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices