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

[Niki Cukier]

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>

[Ares Hovhannesyan]

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

[Niki Cukier]

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 🙂 

[Spas K. · Accepted solution]

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:

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 🙂

[Niki Cukier]

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. 

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

[Spas K.]

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.

[Niki Cukier]

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

[Javier_948]

Thank you very much for the contribution, but I'm going crazy, I'm very new.
Let's see if I explain myself. I have a button, which is a square. Above this button I put an exactly the same square, with a black background. When not pressed the opacity is 0% and when pressed it is 20%. In this way the button darkens when pressed.
I put the lottie for automatic play. My problem is that I don't know how to insert it only so that it acts in the state of pressing the button. It is active all the time, so when you try it you can go through the screen directly, without having to press the button.
I don't know how to do it, could you please help me?
Greetings