Skip to main content
E
elizabeth5FE2
Participant
April 25, 2021
Question

I want to create a button that changes to a different state when clicked without changing artboards

  • April 25, 2021
  • 1 reply
  • 2349 views

Hi! I want to create a button on my XD site that changes from a red + to a pink check mark when clicked without switching the artboard. Ive tried a hover state that changes the button, but right after clicking it changes right back to its default state a second later. Is it possible to make this work without switching artboards?

    This topic has been closed for replies.

    1 reply

    Myra Ferguson
    Community Expert
    Myra FergusonCommunity Expert
    Community Expert
    April 25, 2021

    It looks like you have your button set up with two states so go to the Prototype mode and set up the interaction for the button to go to the active state. To set that up--select the button, and in the Property Inspector in the Interaction section, click the "+" button to add a trigger. Set the Trigger to Tap (I'm assuming that's the interaction you want). Then, down in the Destination section, select the name of your active state. When you preview it and click on the button, it should go from your plus to your checkmark.

    E
    elizabeth5FE2Author
    Participant
    April 25, 2021

    I have tried this, my issue is that when I go to select a destination, it will not let me choose a destination on the same artboard, it will only let me select another artboard. Is there a way to fix that or maybe there is a setting that I am missing? I am pretty new to XD.

    Myra Ferguson
    Community Expert
    Myra FergusonCommunity Expert
    Community Expert
    April 26, 2021

    It sounds like the button hasn't been made into a component yet. To turn it into a component, go back to the Design mode, select the artwork for the Default state and go to Object > Make Component. In the Properties panel, click on the "+" to the right of Default State to add a state. Select New State. Select the content and modify it for this state.

     

    Then you should be able to go to the Prototype mode, add a Trigger, and set the Destination to either an artboard or a state.

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