If you do want the color wheel to gradually fade between the colors, you can duplicate it and make them change opacity on top of eachother. That simulates it
I really liked your tutorial! When you export everything from XD and send it to the developer, to build the actual app, the overlapping objects with 0% opacity not causing a problem? Or are you only using this version to send to the customer to approve and you have another version without animations to send to the developer if your part of the job is done?
This is for your prototype. Either for client demonstration or as a guide for the developers. Usually, if it cannot be done by the developer themselves, the UI/UX designer has to provide the animation for the developer.
Wow, this was a really nice tutorial. I personally preferred that the comment would slide up and down instead of sideways. it just feels smoother to me
Great video! Decided to look into the color auto animation, or lack of support. What I did was set a gradient with the colors I wanted and had a mask move and set the masked section to the other part. Hope this finds you well. :)
This is very useful, just starting with this program with daily challenges and I had difficulty understanding the differences between those transitions and auto-animate. Thank you for including these short-cuts
You can try fading in and out colors with the same method: as in having two objects of different colors one on top of the other with different opacities. It's how it used to be done in js a long while back ;)
Hello sir, I have a question. When you created the circle in illustrator you made 4 sides of the circle. But when you used it in XD you rotated the circle and used the same side on the 3 sides. Now I can understand why you rotated the and changed colour of the same side of the circle. You asked XD to move the part of the circle on changing art board. My question now is - What is the use of other 3 sides of the circle?
They're there so the single side of the circle doesn't feel lonely. Sometimes they go out together to grab a drink. Or to a fancy restaurant to celebrate their combined birthdays.
Hey, that was a great video, I only have one problem when I press on comments from the home page the ring thing is moving, but clockwise, not like in your video, so it's taking the longest path, any fix for this would be so appreciated. I fixed it by making the value of the rotation negative. it was 180, I changed it to -180.
If you copy and paste the pink rectangle on the follow screen under the blue rectangle and move the button text above the blue rectangle it will animate the colour of the rectangle.
thank you, thank you, thank you. Awesome tutorial. Enjoyed creating if from scratch, but I used your "ring stuff" since I don't use illustrator and I got hooked trying to create it with xd. Thanks again
@dansky You mentioned graduation of colors between screens using auto-animate. One trick I've used that gets close is duplicating each color of the button on the current artboard. Then, for the button colors that are not needed for that artboard, reduce their transparency to zero. Keep the needed button at 100% (opaque). Repeat this transparency reduction for the un-needed instances of the buttons on each screen. When you do auto-animate, you'll see a much more subtle and gradual color change than simply changing the color of the button from one artboard to another as you've done in this video.
Great video. I just wondering, some of the UI designers still using After Affect to create an animated mockup. Do you think if XD has auto-animate features, does After Effect still needed to create the animated mockup?
great Video! I think a big problem of this is if you have one small change in your layout after doing animation stuff it's quite an effort to adapt all the layers.
Hey! I wanted to auto-animate (using component states) the buttons of my app, to add a "clicked" effect before the button takes the user to another page. Am I right to stay that this is not actually possible?
Same question! Brand new to this and wondering if it's faster to design prototypes just using artboards, or if it can be useful to also make component states
Wow what an amazing tutorial! My brain wants to get a hold of this trying to figure out why didn't you put links to the semi circles? And they still move. Anyone that can explain? Thanks
He skipped the reviews left fade-in in the followers artboard, but like he says, "It's a tutorial". Great video Dansky, I just miss the support from people on your videos.
Please can you answer a beginner question... if you want to pass the finished animation onto a developer who uses e.g Dreamweaver, or a CMS such as Sitecore, can you export it from XD in a format they can just import? It seems the export feature of XD only produces static designed assets, with no working links or animation. Does this mean when wanting to actually have this animation in your website, the developer would need to recreate it from scratch based on what they see? If so, what is the point in having this facility in XD or even going to the trouble of making this animation. Is it just to 'sell' the concept?
Thanks for this content , that's really helpful and useful! I just wanted to ask why you created 4 shapes for the selector, but basically you only used one (left) and rotate it?
It's okay to have them basically they are vector shapes which are lite in size and one thing, while rotating something around, we need equal and opposite weight of items to be selected so that it can rotate around center of an orbit, let me explain you, Try deleting all the other three selector shapes, and rotate this one, you wont get perfect rotation around the profile picture because it assumes middle of that arc as the center of motion
Dansky the Place to Be...!!! love this guy'z content, whenever i search something on youtube for a solution if i happen to see a dansky video i just scroll right to it..and also that shirt is super cool dude is it your own merch..?
@Dansky Can't we just copy the button( of another color) with opacity down and overlapping on the button(of different color) of another artboard? will it make a color change effect?
It's actually beyond helpful to see how you organize your artboard and assets -- the small things that aren't really taught thoroughly.
If you do want the color wheel to gradually fade between the colors, you can duplicate it and make them change opacity on top of eachother. That simulates it
Yeah, I really recommend following along . There's some satisfaction to everything working.
I was and still stunned by your ideas and creativity, a really well done mate, keep up the good work!
Thanks so much Shodai ❤️
About time XD added Horizontal swipe as a Gesture too.
Thanks man. I'm switching from Sketch to Xd and your tutorial was very helpful.
Awesome to hear John, glad the video was helpful :)
I reall like the quality and the smoothness of the animation, thank you for sharing!
You're welcome Angelica!
I really liked your tutorial!
When you export everything from XD and send it to the developer, to build the actual app, the overlapping objects with 0% opacity not causing a problem? Or are you only using this version to send to the customer to approve and you have another version without animations to send to the developer if your part of the job is done?
^This!!!
This is for your prototype. Either for client demonstration or as a guide for the developers. Usually, if it cannot be done by the developer themselves, the UI/UX designer has to provide the animation for the developer.
I got a real help from your videos to build up my skills.
Great work man.
Thank you so much.
If adobe XD adds a timeline... ITS GG
yesss!!!!!
And support a HTML + CSS convert...
Soon brother, soon.
Pedro Henrique there are two free add ons for this.
@@portlyoldman names?
Just got into UI and UX a couple weeks ago and following this tutorial has my imagination running WILDDDDD. Thank you
haha, where are you now mate?
I thought dansky will end the video now .. but he kept on adding new improvements .. wow ! .. I got to know so many things !!
That was awesome! Suddenly it seems so easy. Thanks!
Cheers Olivia! You’re welcome ☺️
MAN I JUST FOUND YOU OUT I AM IN LOVE SERIOUSLY SO WELL EXPLAINED! finally yessssssssss
One of the best video of Adobe Xd animation.
Thank you.
Awesome tutorial, totally enjoyed animating with XD. thanks!
You’re very welcome Zahra ✌️😊
Wow, this was a really nice tutorial. I personally preferred that the comment would slide up and down instead of sideways. it just feels smoother to me
Glad it was helpful!
Great video! Decided to look into the color auto animation, or lack of support. What I did was set a gradient with the colors I wanted and had a mask move and set the masked section to the other part. Hope this finds you well. :)
WOW AWESOME INTRO!! Usually i dont get impressive with intros, but that one is killer!!
Thanks so much Leite 🙂
This is very useful, just starting with this program with daily challenges and I had difficulty understanding the differences between those transitions and auto-animate. Thank you for including these short-cuts
love your creativity
You can try fading in and out colors with the same method: as in having two objects of different colors one on top of the other with different opacities. It's how it used to be done in js a long while back ;)
Super Creative way to do these transitions
Love it !💕 ✨
Awesome Lisa!
Thanks Dansky, this one of the best tutorial.
Thanks very much, basics and order are very important to come up with a great design!
What a cool and easy to follow tutorial! I’ll definitely try this out and let you know 😊
Awesome Hanim! Yea would be great to know how you get on 👌
wow! this is an awesome design! and you make the animation look so easy!! Thank you!
You're welcome Jovanna 😊
Hello sir, I have a question.
When you created the circle in illustrator you made 4 sides of the circle. But when you used it in XD you rotated the circle and used the same side on the 3 sides. Now I can understand why you rotated the and changed colour of the same side of the circle. You asked XD to move the part of the circle on changing art board.
My question now is - What is the use of other 3 sides of the circle?
They're there so the single side of the circle doesn't feel lonely. Sometimes they go out together to grab a drink. Or to a fancy restaurant to celebrate their combined birthdays.
Hey, that was a great video, I only have one problem when I press on comments from the home page the ring thing is moving, but clockwise, not like in your video, so it's taking the longest path, any fix for this would be so appreciated.
I fixed it by making the value of the rotation negative. it was 180, I changed it to -180.
That was so slick! Thanks for this tutorial
Thank you soooooo much for this tutorial !!!
You know what Dan?!
.
.
.
.
That is AWESOME 🤩
Thanks Mobin!
If you copy and paste the pink rectangle on the follow screen under the blue rectangle and move the button text above the blue rectangle it will animate the colour of the rectangle.
auto animate is the best. It's so much fun for creating layered parallax effects for web designs.
thank you, thank you, thank you. Awesome tutorial. Enjoyed creating if from scratch, but I used your "ring stuff" since I don't use illustrator and I got hooked trying to create it with xd. Thanks again
Very practical and professional
thanks, it actually let me through so i could download it.
Brilliant video! BTW. You could create the colour transition (you mention) for the buttons / links using an 'auto-animate' transition from 0-100%!
@dansky You mentioned graduation of colors between screens using auto-animate. One trick I've used that gets close is duplicating each color of the button on the current artboard.
Then, for the button colors that are not needed for that artboard, reduce their transparency to zero. Keep the needed button at 100% (opaque).
Repeat this transparency reduction for the un-needed instances of the buttons on each screen. When you do auto-animate, you'll see a much more subtle and gradual color change than simply changing the color of the button from one artboard to another as you've done in this video.
Thank you so much Dansky :'D Will really need this for my current project!
Thank you. First tutorial for me. Interesting.
I really enjoyed the tutorial! thanks a lot!
This was great definitely going to use these functionalities!
Great stuff as always Dan! Each tutorial gets better and better.
Great tutorial. Really useful I wonder can Figma do the same thing? Have there been updates to auto-animate in XD since this video?
excellent vid Dansky!
This is amazing. Thank you for making such an easy and understandable tutorial. Excited to try it out!
Ease in-out, duration 0.5
*XD will remember that*
Lmao yes !
Great video. I just wondering, some of the UI designers still using After Affect to create an animated mockup. Do you think if XD has auto-animate features, does After Effect still needed to create the animated mockup?
Thank you! Very clear and helpful.
This tutorial is awesome! Million thanks!
Love your series, I'm a Product Design Director and my team uses Figma, but this is fantastic from Adobe. Keep up the great work!
Really love this tutorial! It feels like a magician learning magic! Will be reviewing your other tutorials now..
great Video! I think a big problem of this is if you have one small change in your layout after doing animation stuff it's quite an effort to adapt all the layers.
Great video! Nice & clear steps. Thanks for sharing!
Thankyou! It's help me a lot Dan as a starter who still learn about UI/UX 🍻
Thank you so much for this tutorial
You're welcome Juvia :)
Lmao I was here for the info but ended up getting bullied into organizing my illustrator layers 👁👄👁
This was very helpful. Thank you very much.
such a easy tutorial thanks again!
Yeah, finally I did it, follow your guide very easy. Thanks for the vid.
You're welcome Phuong!
learning from u is so fun
Hey! I wanted to auto-animate (using component states) the buttons of my app, to add a "clicked" effect before the button takes the user to another page. Am I right to stay that this is not actually possible?
Same question! Brand new to this and wondering if it's faster to design prototypes just using artboards, or if it can be useful to also make component states
Good tutorial... U are an elegant UI designer!
Thanks a lot. Your's tutorial was a great helpful for me.
Thanks for making this content. Will be using it for sure at work 🤓
Awesome tutorial, learned a lot of useful tricks cheers!
This was so helpful.
Thank you!
Absolutely awesome tutorial!
Highly appreciate it! Thank you! :)
Love the way you said "Enjoy the chaos" :)
Great easy to follow tutorial, thanks :)
Wow what an amazing tutorial!
My brain wants to get a hold of this trying to figure out why didn't you put links to the semi circles? And they still move. Anyone that can explain? Thanks
Hello, I ask a begginer question, what is the use of making animations in xd when later it will not be possible to export to android studio?
omg thank you so much, this helped A LOT
You're welcome Ximena :)
This is incredible!!! Thank you for this tut and file! I will use this for my personas!
Thanks a lot for creating this video. It helps a lot...
He skipped the reviews left fade-in in the followers artboard, but like he says, "It's a tutorial". Great video Dansky, I just miss the support from people on your videos.
I like it, man. Amazing concept!
Thanks so much Vikas!
Please can you answer a beginner question... if you want to pass the finished animation onto a developer who uses e.g Dreamweaver, or a CMS such as Sitecore, can you export it from XD in a format they can just import? It seems the export feature of XD only produces static designed assets, with no working links or animation. Does this mean when wanting to actually have this animation in your website, the developer would need to recreate it from scratch based on what they see? If so, what is the point in having this facility in XD or even going to the trouble of making this animation. Is it just to 'sell' the concept?
thanks. this helping me a lot. stay safe.
Very helpful - appreciated the download files - thanks!
Great tutorial, and thank you for the downloadable file, makes experimentation easy.
That auto animate on the chair at the end >>
Thanks for this content , that's really helpful and useful! I just wanted to ask why you created 4 shapes for the selector, but basically you only used one (left) and rotate it?
It's okay to have them basically they are vector shapes which are lite in size and one thing, while rotating something around, we need equal and opposite weight of items to be selected so that it can rotate around center of an orbit, let me explain you, Try deleting all the other three selector shapes, and rotate this one, you wont get perfect rotation around the profile picture because it assumes middle of that arc as the center of motion
Dansky the Place to Be...!!! love this guy'z content, whenever i search something on youtube for a solution if i happen to see a dansky video i just scroll right to it..and also that shirt is super cool dude is it your own merch..?
That was fun! TY so much.
Sir, You are great. I love your attitude and your way of teaching. Thanks for your great work. Keep it up.
It was a joy to follow along and see it become so beautiful! Great work
Please adjust the audio to be a tad louder though.
Step by step - Easy and Simple =). *Dansky, thank You!*
Downloaded Figma last night. XD is on the cards tonight!!
Is it better save everything under groups or components? Thanks
It is fantastic! Thank you very much for this tutorial! :)
How do you get the video quality so good?
That was very useful! Is there any reason not to do this with the new states feature?
u deserve it bro. Liked and subscribed. more power to you
Loved your tutorial! Thank You!
@Dansky Can't we just copy the button( of another color) with opacity down and overlapping on the button(of different color) of another artboard? will it make a color change effect?
Tank u so much for this great tutorial
and now you can animate outlines yay
Is there a way how you can export this animation so it could be used by developers?