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

New Here ,
Apr 25, 2021 Apr 25, 2021

Copy link to clipboard

Copied

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?Screen Shot 2021-04-25 at 10.21.42 AM.pngScreen Shot 2021-04-25 at 10.21.57 AM.png

Views

191

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
community guidelines
Adobe Community Professional ,
Apr 25, 2021 Apr 25, 2021

Copy link to clipboard

Copied

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.

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
community guidelines
New Here ,
Apr 25, 2021 Apr 25, 2021

Copy link to clipboard

Copied

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.

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
community guidelines
Adobe Community Professional ,
Apr 26, 2021 Apr 26, 2021

Copy link to clipboard

Copied

LATEST

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.

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