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!
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.
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?
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?
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?
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!
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 ?
@@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
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.
![ARGENTINA vs. CHILE [3-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 7](http://i.ytimg.com/vi/De3AWmXzhuA/mqdefault.jpg)
Awesome! Could you show how to integrate this on a homepage?
How to use them in other artboards as animated icons ?
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.
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.
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 you show how you'd animate a confirmation message like "Added to Favorites!" or "Removed from Favorites" that would disappear after a few seconds?
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! 🔥
* wears photoshop shirt *
*MAKES XD TUTORIAL*
Did Photoshop 5 minutes ago propably
Thanks for the video, but how do we place this as a button in full-fledged design page?
Thank so much I'm get solutions of problem thank you
That was just pure brilliance! Simple to learn and fun to watch! Thank you :)
Awesome! So great to hear 👍😊
D for DANSKY, Dansky. NOT DONKEY! Such a crisp tut 🖤😭
Nice, but I don’t know how to put it working on a page in prototype, please help
Nice, please how do I do this with a hover instead of a tap
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.
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?
needed this for an assignment. thank you for the easy explanation & walkthrough
Best as always 👍🏻
So helpful!
Nice tutorial dude! Keep on doing this
I love your videos! thankssss ♥
I liked the BG.
Really cool! Helped me a lot
You are Awesome
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?
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?
very nice explanation and very clear thaank you for this tutorial :)
Thats awesome ! Thank you Dansky
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!
thanks! that was helpful
Also, thanks for making the video straight forward
Wow! Awesome Tutorial!
This was SO helpful! Thank you so much ☺️
Love the content! Great name, too
You are the best
We need more tutorials.
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 ?
Awesome 🤩
Awesome, thanks!
i like your video!!!!!
Did it. Thank you
Great 👌👍♥♥♥
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?
Very cool!
Can we do the animations in downloaded icons ?
We can use that on C# Program ?
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 make background transparent
How do I export this animation as animated Gif?
How can we use this time function now
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 🙂
how to extract in gif format
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.
Great
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.
As they all linked it change color to all them to me...
nice
Y. r. u. so good
Haha, this is life before component states.
Big lik
😘
I don't have win10...
Nice tutorial dansky ! thanks for sharing
also i will be grateful to take look for my video tutorial
i hope you enjoyed !
Is Dansky Australian? 😎
hahahah d for donkey
I don't know why I clicked here. Your thumbnail is too addicting. Please change it ASAP!