How to create an animated button and transaction to next artboard in XD?

Community Beginner ,
Jun 18, 2022 Jun 18, 2022

Copy link to clipboard

Copied

Hello everyone,  im Niki.

 

I'm a beginner in adobe xd and could use your help, since i cannot find all the answers on youtube 🙂

Ive created a component, which is an action button, that has two states: the default state and the "click" state. Now on the click state I did a few visual changes, so the users gets the feeling of a real button when clicking on it. I managed to connect the default state to the click state and get the animation done. My problem now starts here: When Im in prototyping mode and trying to connect this button to the next page, I want that when I click/tap on the button to see the animation and transact on the same time to the next page, but so far i didnt manage to do that. What is happening is that i do one tap and i get the animation and then i need to click AGAIN to transact to the next artboard. Is there a way to connect this, so i wont have to click twice on the button? Coz also in real apps when you click you see the animation and you transact immidiately, you dont have to click again....

Hope you guys understand my question, I've tried to explain it the best i could :S 

 

Looking forward to hear from any of you 🙂 

Kind Regards 

Niki

 

<Title renamed by moderator>

TOPICS
How to

Views

272

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

correct answers 1 Correct answer

Adobe Community Professional , Jun 19, 2022 Jun 19, 2022
Hi Niki, what you're trying to do is a bit hard to achieve, as Xd can't do two transitions at the same time, and also doesn't support a time trigger on a component. Usually we use the hover state for that on desktop, but it doesn't work on mobile. It would've been nice if hover states worked like that on mobile - the hover state plays out, and then the transition happens, but alas  Anyway, there is a bit of a hack to do it, so here's how it's done: 1. You take this empty lottie file, and pu...

Likes

Translate

Translate
Adobe Community Professional ,
Jun 19, 2022 Jun 19, 2022

Copy link to clipboard

Copied

The best source to learn is Add multiple states to components (adobe.com)

I have video (but in my native language). hope that can  be helpful https://youtu.be/Hs8TZEOKIRI

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
Community Beginner ,
Jun 22, 2022 Jun 22, 2022

Copy link to clipboard

Copied

Hey Ares,

Thank you very much for taking the time to reply. I have to say though that the video is a bit hard for me to understand since i dont know the language, but I really appreciate your effort to help me 🙂 

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 ,
Jun 19, 2022 Jun 19, 2022

Copy link to clipboard

Copied

Hi Niki, what you're trying to do is a bit hard to achieve, as Xd can't do two transitions at the same time, and also doesn't support a time trigger on a component. Usually we use the hover state for that on desktop, but it doesn't work on mobile. It would've been nice if hover states worked like that on mobile - the hover state plays out, and then the transition happens, but alas 🙂

 

Anyway, there is a bit of a hack to do it, so here's how it's done:

 

1. You take this empty lottie file, and put it somwehere in the click/tap state of your button.

2. While on the prototype tab, add an "End of Playback" trigger on the lottie-switch, and point it to the artboard you want to go to after the tap animation is done. (lottie already has a time trigger with a 0s delay set to lottie playback, you should leave that one there) It should look like this:

 

SpasK_0-1655698763238.png

 

If you're having trouble, here's this quick sample I made so you can see how it's set up.

 

Essentially what happens is that when you tap and go to that click state, the lottie file becomes active. This lottie file has a 0s timeline, and a 0s time trigger to play, so it plays instantly, and the End of Playback trigger activates instantly as well to transition to the next artboard. Why don't we just have time triggers for component states? Beats me 🙂

 

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
Community Beginner ,
Jun 22, 2022 Jun 22, 2022

Copy link to clipboard

Copied

Hey Spas,

 

OMG thank you so muuuuch !!! I've spent hours and days trying to figure that out. I would never find out by myself  😛    

Thank you again 🙂

Do you have maybe a youtube channel ?? I would love to follow you and learn more. 

I'm actually trying to create another component, but like I said before it's hard to ask the right question on the internet to get what you are looking for. 

I hope you don't mind me asking you again something. 

So, I have on the one artboard some fields for the user to customize. Let's take the "Language" one. Once you click on it, it takes you to another artboart where you can choose the language you wanna practice, then click select, and eventually, it takes you back to the previous page with all the fields. Now, what I want to do, is to make the language that you chose appear in the "Language" field. 

I'll attach some photos to make it easier to understand. 

iPhone 13, 12 – 26.pngiPhone 13, 12 – 30.png

So, every time you choose a different language, I want it to appear in the previous artboart incide the "language" field.

 

Hope you have some more time to help me with this as well.

Really appreciate it 🙂 

 

Kind regards,

Niki

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 ,
Jun 22, 2022 Jun 22, 2022

Copy link to clipboard

Copied

Hi, Niki, glad I was able to help. That's my channel but I don't have too much content on, just a few rough tutorials 🙂

 

On the conditional rendering of the chosen language, I'm aftaid it's beyond Xd's capabilities. You would have to make either different artboards or states in a component for each possible case, so if you had 10 languages, you make 10 artboards and send the user to the one they picked. And if you have multiple dropdowns it becomes a nightmare...

 

I would just show the selector and keep just the one language, to show the devs what's supposed to happen. You rarely need that much fidelity in prototypes.

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
Community Beginner ,
Jun 22, 2022 Jun 22, 2022

Copy link to clipboard

Copied

LATEST

Awesome!! Thank you so much 🙂 Ill follow you on your channel!!!

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