Skip to main content
N
Niki Cukier
Participant
June 18, 2022
Answered

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

  • June 18, 2022
  • 2 replies
  • 3658 views

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>

This topic has been closed for replies.
Correct answer Spas K.

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 🙂

 

2 replies

Spas K.
Community Expert
Spas K.Community ExpertCorrect answer
Community Expert
June 20, 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 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 🙂

 

    N
    Niki CukierAuthor
    Participant
    June 22, 2022

    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.
    Community Expert
    Spas K.Community Expert
    Community Expert
    June 22, 2022

    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.

      Ares Hovhannesyan
      Community Expert
      Ares HovhannesyanCommunity Expert
      Community Expert
      June 19, 2022

      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

        N
        Niki CukierAuthor
        Participant
        June 22, 2022

        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 🙂 

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