I used this tutorial to animate a "payment complete" screen for a wireframe prototype. I could not for the life of me figure out what I was doing wrong on my own, and it turns out the answer was so incredibly simple! Thank you so much for solving this headache for me.
Alright now, practical question time: How does animating things in XD help me and my client in the process of app/website development? As far as I'm concerned, animating things in XD is double the work, since there's no native way to export animations done in XD to other platform/formats (it is freakin' cool to do tho). As soon as the app/website is greenlit, I have to do it all again in AE, which will then finally be implemented. I understand that for UX's and prototyping's sake it's very practical to give the client a first impression of how it actually would feel like to use the app/webpage. But apart from that and being on a fix budget/schedule, isn't this quite inefficient or am I missing something? Thanks peeps!
How can we use these microinteractions within the same artboard? Or say the search bar animation made in Auto-Animate UI Kit.. What If I want to use it as a module in my artboard?
I didnt understand the slight difference between drawing the animations lines from the element on the artboard to the other artboard instead of from artboard to artboard. Can someone tell me ?
So if this icon was displayed on multiple pages of an app, would there need to be 2 extra artboards for each of those pages just for this one interaction?
@Ameena Bdeir nope :/ it doesn't appear you can use the overlay function alongside the auto-animate function, so the only method I can think of is having to create extra artboards just for animation interactions. Doesn't seem like a very practical solution so I'm hoping to find a better one!
Thank you for the tutorial but there is always this issue i stuck with adobe XD is how can we make the animation go by itself without clicking or demand. For example like a loading screen. When its entering the loading screen, i want it to animated itself in a loop until the other screen pops but I do not know how. And cant seem to figure out how. Can you make a video on that too?
Hi Dansky, I have a photo and on click i want to display some details about the photo by keeping every other element same on the page. How do I do it?? i would like a flip animation for the photo and the details. Please help..stuck on this for a while.
Hey Purushottam, send me an email at Foreverdansky@gmail.com and I can send you the xd file. I've just figured out how to create a card 'flip' animation and it'll be easier to send the file over than explain it here 🙂
I have a long screen, and when I transition to the next screen, it takes me back up to the top of the screen instead of keeping me at the point on the screen that I'm at when I 'like' something. How do I fix that?
Try marking the "Fix Position When Scrolling" check box under "SCROLLING" on the right hand side panel (all this under Prototype mode). You can also control the scroll positioning for individual elements by marking the same option under the Design mode.
The problem I have is that I have to use multiple artboards. Can't I create this animation without the artboards? Coz if I'm doing a blog for example, I don't think this will work. Or can it?
@@QasimKhan-sh5hm I think you can create a link by pressing "Share," then on the newly expanded share options adjust the setting to your preference (select User Testing in the view settings for prototyping) Then create the link. Give your client that link and they should be able to click through the prototype. This is what I did to show my boss the prototype i was working on. Not sure if this is the proper way to do it though. I've also done the window+G option to deliver as well. Hope that makes sense
Awesome! Could you show how to integrate this on a homepage?
Best as always 👍🏻
So helpful!
I used this tutorial to animate a "payment complete" screen for a wireframe prototype. I could not for the life of me figure out what I was doing wrong on my own, and it turns out the answer was so incredibly simple! Thank you so much for solving this headache for me.
needed this for an assignment. thank you for the easy explanation & walkthrough
Thats awesome ! Thank you Dansky
You are Awesome
This was SO helpful! Thank you so much ☺️
Wow! Awesome Tutorial!
I love your videos! thankssss ♥
Really cool! Helped me a lot
Nice tutorial dude! Keep on doing this
Awesome, thanks!
That was just pure brilliance! Simple to learn and fun to watch! Thank you :)
Awesome! So great to hear 👍😊
very nice explanation and very clear thaank you for this tutorial :)
Did it. Thank you
thanks! that was helpful
Also, thanks for making the video straight forward
Love the content! Great name, too
Very cool!
Awesome 🤩
You are the best
Great 👌👍♥♥♥
We need more tutorials.
* wears photoshop shirt *
*MAKES XD TUTORIAL*
Did Photoshop 5 minutes ago propably
Thank so much I'm get solutions of problem thank you
Can you show how you'd animate a confirmation message like "Added to Favorites!" or "Removed from Favorites" that would disappear after a few seconds?
i like your video!!!!!
How to use them in other artboards as animated icons ?
Great
Thank you for the video. Do you know if it is possible to loop an animation without changing artboards? Maybe auto-animating with components states?
nice
Y. r. u. so good
I liked the BG.
D for DANSKY, Dansky. NOT DONKEY! Such a crisp tut 🖤😭
Alright now, practical question time: How does animating things in XD help me and my client in the process of app/website development? As far as I'm concerned, animating things in XD is double the work, since there's no native way to export animations done in XD to other platform/formats (it is freakin' cool to do tho). As soon as the app/website is greenlit, I have to do it all again in AE, which will then finally be implemented. I understand that for UX's and prototyping's sake it's very practical to give the client a first impression of how it actually would feel like to use the app/webpage. But apart from that and being on a fix budget/schedule, isn't this quite inefficient or am I missing something? Thanks peeps!
Same question.
Look into Framer X + ReactJS. That's the better, and more useable way to do it.
Wow..
It's all about creating the impression. Function is more important, but in the industry that is over saturated, it would help to go beyond the basics.
It just adds value to your portfolio which is the first step of getting high paying clients.
How can we use these microinteractions within the same artboard? Or say the search bar animation made in Auto-Animate UI Kit.. What If I want to use it as a module in my artboard?
Use the component feature by using different state.
Can we do the animations in downloaded icons ?
Big lik
Nice, but I don’t know how to put it working on a page in prototype, please help
How can we use this time function now
I didnt understand the slight difference between drawing the animations lines from the element on the artboard to the other artboard instead of from artboard to artboard. Can someone tell me ?
We can use that on C# Program ?
Nice, please how do I do this with a hover instead of a tap
please tell me how to use these adobe xd projects in website or app?
how can i convert them to use in website or app?
Thanks for the video, but how do we place this as a button in full-fledged design page?
how to make background transparent
So if this icon was displayed on multiple pages of an app, would there need to be 2 extra artboards for each of those pages just for this one interaction?
@Ameena Bdeir nope :/ it doesn't appear you can use the overlay function alongside the auto-animate function, so the only method I can think of is having to create extra artboards just for animation interactions. Doesn't seem like a very practical solution so I'm hoping to find a better one!
Thank you for the tutorial but there is always this issue i stuck with adobe XD is how can we make the animation go by itself without clicking or demand. For example like a loading screen. When its entering the loading screen, i want it to animated itself in a loop until the other screen pops but I do not know how. And cant seem to figure out how. Can you make a video on that too?
Hi Dansky, I have a photo and on click i want to display some details about the photo by keeping every other element same on the page. How do I do it?? i would like a flip animation for the photo and the details.
Please help..stuck on this for a while.
Hey Purushottam, send me an email at Foreverdansky@gmail.com and I can send you the xd file. I've just figured out how to create a card 'flip' animation and it'll be easier to send the file over than explain it here 🙂
If you scale the 2nd heart bigger, will it look like it hops when taped?
Yes absolutely! Loads of ways to get creative with Auto-Animate! 🔥
Now that i created that animated icon, how can i merge them as one to be an actual icon to be set where ever i want ?
this is exactly what my question is.
Nice tutorial dansky ! thanks for sharing
also i will be grateful to take look for my video tutorial
i hope you enjoyed !
why I don't have in my xd " Time " on the Triggar list?
You have to select the whole art board. Then you'll see the "Time Trigger" Option.
How do I export this animation as animated Gif?
I have a long screen, and when I transition to the next screen, it takes me back up to the top of the screen instead of keeping me at the point on the screen that I'm at when I 'like' something. How do I fix that?
Try marking the "Fix Position When Scrolling" check box under "SCROLLING" on the right hand side panel (all this under Prototype mode). You can also control the scroll positioning for individual elements by marking the same option under the Design mode.
Haha, this is life before component states.
The problem I have is that I have to use multiple artboards. Can't I create this animation without the artboards? Coz if I'm doing a blog for example, I don't think this will work. Or can it?
As they all linked it change color to all them to me...
Plzz tell me how can I export prototype in XD
Press windows+G and play your prototype and record it. And it will save to tour local drive.
@@debiprasadsena ok but how someone use my protype window +G is just for recording
@@QasimKhan-sh5hm I think you can create a link by pressing "Share," then on the newly expanded share options adjust the setting to your preference (select User Testing in the view settings for prototyping) Then create the link. Give your client that link and they should be able to click through the prototype. This is what I did to show my boss the prototype i was working on. Not sure if this is the proper way to do it though. I've also done the window+G option to deliver as well. Hope that makes sense
how to extract in gif format
😘
I don't have win10...
Is Dansky Australian? 😎
hahahah d for donkey
I don't know why I clicked here. Your thumbnail is too addicting. Please change it ASAP!