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
@JMFowlkes3 жыл бұрын
It's actually beyond helpful to see how you organize your artboard and assets -- the small things that aren't really taught thoroughly.
@reinada76405 жыл бұрын
Yeah, I really recommend following along . There's some satisfaction to everything working.
@ShodaiThox4 жыл бұрын
I was and still stunned by your ideas and creativity, a really well done mate, keep up the good work!
@ForeverDansky4 жыл бұрын
Thanks so much Shodai ❤️
@johnvv50555 жыл бұрын
Thanks man. I'm switching from Sketch to Xd and your tutorial was very helpful.
@ForeverDansky5 жыл бұрын
Awesome to hear John, glad the video was helpful :)
@angelicaortiz57675 жыл бұрын
I reall like the quality and the smoothness of the animation, thank you for sharing!
@ForeverDansky5 жыл бұрын
You're welcome Angelica!
@bajiraosingham94955 жыл бұрын
About time XD added Horizontal swipe as a Gesture too.
@giovannavw2754 жыл бұрын
MAN I JUST FOUND YOU OUT I AM IN LOVE SERIOUSLY SO WELL EXPLAINED! finally yessssssssss
@karthikrajeev37724 жыл бұрын
I got a real help from your videos to build up my skills. Great work man. Thank you so much.
@mjkritzi5 жыл бұрын
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.
@richardsonbuyayo69335 жыл бұрын
If adobe XD adds a timeline... ITS GG
@sasquarth5 жыл бұрын
yesss!!!!!
@pdrohts5 жыл бұрын
And support a HTML + CSS convert...
@Alisyafic5 жыл бұрын
Soon brother, soon.
@portlyoldman5 жыл бұрын
Pedro Henrique there are two free add ons for this.
@saulocodes5 жыл бұрын
@@portlyoldman names?
@saibhargavaramu57494 жыл бұрын
I thought dansky will end the video now .. but he kept on adding new improvements .. wow ! .. I got to know so many things !!
@leite14315 жыл бұрын
WOW AWESOME INTRO!! Usually i dont get impressive with intros, but that one is killer!!
@ForeverDansky5 жыл бұрын
Thanks so much Leite 🙂
@OliviaMmmm Жыл бұрын
That was awesome! Suddenly it seems so easy. Thanks!
@ForeverDansky Жыл бұрын
Cheers Olivia! You’re welcome ☺️
@mariushebnes59513 жыл бұрын
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
@ForeverDansky3 жыл бұрын
Glad it was helpful!
@mobinaslani90775 жыл бұрын
You know what Dan?! . . . . That is AWESOME 🤩
@ForeverDansky5 жыл бұрын
Thanks Mobin!
@jer-5 жыл бұрын
Just got into UI and UX a couple weeks ago and following this tutorial has my imagination running WILDDDDD. Thank you
@princevasimalla2 жыл бұрын
haha, where are you now mate?
@MehediHasan-wq4zk5 жыл бұрын
One of the best video of Adobe Xd animation. Thank you.
@XxXdancex3 жыл бұрын
Lmao I was here for the info but ended up getting bullied into organizing my illustrator layers 👁👄👁
@cseymour975 жыл бұрын
auto animate is the best. It's so much fun for creating layered parallax effects for web designs.
@sprioleau5 жыл бұрын
@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.
@lisamithani21635 жыл бұрын
Super Creative way to do these transitions Love it !💕 ✨
@ForeverDansky5 жыл бұрын
Awesome Lisa!
@juliancaraganciu5 жыл бұрын
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 ;)
@ZahraSharafi19943 жыл бұрын
Awesome tutorial, totally enjoyed animating with XD. thanks!
@ForeverDansky3 жыл бұрын
You’re very welcome Zahra ✌️😊
@alexandrerios15025 жыл бұрын
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.
@ethanhunt45214 жыл бұрын
Love the way you said "Enjoy the chaos" :)
@darksideishere2 жыл бұрын
love your creativity
@ghhfhk2768 Жыл бұрын
thanks, it actually let me through so i could download it.
@bluntbrave44883 жыл бұрын
If that layer disorganisation made you angry, you should see my layers.... 😂😁 Great tutorial, thanks!
@raol6352 жыл бұрын
Thank you. First tutorial for me. Interesting.
@hanimj.95075 жыл бұрын
What a cool and easy to follow tutorial! I’ll definitely try this out and let you know 😊
@ForeverDansky5 жыл бұрын
Awesome Hanim! Yea would be great to know how you get on 👌
@CCreative3653 жыл бұрын
That was so slick! Thanks for this tutorial
@jovannamireles27883 жыл бұрын
wow! this is an awesome design! and you make the animation look so easy!! Thank you!
@ForeverDansky3 жыл бұрын
You're welcome Jovanna 😊
@shubhsharma193 жыл бұрын
learning from u is so fun
@willreis56255 жыл бұрын
Thanks Dansky, this one of the best tutorial.
@jamaledinramzani58463 жыл бұрын
Very practical and professional
@akasage5 жыл бұрын
That auto animate on the chair at the end >>
@AngelaDesignsThings5 жыл бұрын
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
@sophieslozes97173 жыл бұрын
Thank you soooooo much for this tutorial !!!
@williamgarcia36973 жыл бұрын
Thanks very much, basics and order are very important to come up with a great design!
@haciendalasbromelias36713 жыл бұрын
I really enjoyed the tutorial! thanks a lot!
@specialprojects6023 жыл бұрын
This was very helpful. Thank you very much.
@rickjackley85314 жыл бұрын
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. :)
@sauwce85045 жыл бұрын
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?
@LiyaaHuang5 жыл бұрын
^This!!!
@imanco20865 жыл бұрын
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.
@Bella-gv1hc4 жыл бұрын
Thank you! Very clear and helpful.
@14onyx3 жыл бұрын
and now you can animate outlines yay
@Siraphyn4 жыл бұрын
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!
@Darnosman3 жыл бұрын
u deserve it bro. Liked and subscribed. more power to you
@thetechtiger11173 жыл бұрын
excellent vid Dansky!
@omegashin94205 жыл бұрын
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.
@leiv4 жыл бұрын
Good tutorial... U are an elegant UI designer!
@mrglissi5 жыл бұрын
I didn't really have to click on this, but I still enjoyed watching it. Thanks for making stuff simple and easy, man! Also, that outro track is great!
@redcat106015 жыл бұрын
Ease in-out, duration 0.5 *XD will remember that*
@AceCmbatguy255 жыл бұрын
Lmao yes !
@HuddUniVisualDesign3 жыл бұрын
Brilliant video! BTW. You could create the colour transition (you mention) for the buttons / links using an 'auto-animate' transition from 0-100%!
@dianewallinger30383 жыл бұрын
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?
@jessicamiller79503 жыл бұрын
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
@auditid5 жыл бұрын
This is amazing. Thank you for making such an easy and understandable tutorial. Excited to try it out!
@Oddstacker4 жыл бұрын
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
@yuelingtan58255 жыл бұрын
Thank you so much Dansky :'D Will really need this for my current project!
@christianzavanaiu164 жыл бұрын
Really love this tutorial! It feels like a magician learning magic! Will be reviewing your other tutorials now..
@adriansbgs5 жыл бұрын
Thankyou! It's help me a lot Dan as a starter who still learn about UI/UX 🍻
@charleswyke-smith87815 жыл бұрын
Very helpful - appreciated the download files - thanks!
@christinetobiasz4 жыл бұрын
such a easy tutorial thanks again!
@gishifps4 жыл бұрын
Great video! Nice & clear steps. Thanks for sharing!
@kalpeshpatel0404 жыл бұрын
Thanks a lot for creating this video. It helps a lot...
@TazzM4 жыл бұрын
The earrings look epic :P ..thanks for the video!
@roxinviviantopp77475 жыл бұрын
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..?
@hninpwint75035 жыл бұрын
Thanks a lot. Your's tutorial was a great helpful for me.
@ximenagutierrez92495 жыл бұрын
omg thank you so much, this helped A LOT
@ForeverDansky5 жыл бұрын
You're welcome Ximena :)
@ChapitZulkefli3 жыл бұрын
thanks. this helping me a lot. stay safe.
@laneveach93175 жыл бұрын
Great stuff as always Dan! Each tutorial gets better and better.
@vry.design5 жыл бұрын
I like it, man. Amazing concept!
@ForeverDansky5 жыл бұрын
Thanks so much Vikas!
@PhuongLe-ew6pj4 жыл бұрын
Yeah, finally I did it, follow your guide very easy. Thanks for the vid.
@ForeverDansky4 жыл бұрын
You're welcome Phuong!
@paulrw16915 жыл бұрын
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.
@ShivkantBaghel4 жыл бұрын
your intro music is awesome man
@just_timothy4 жыл бұрын
I heard the song again in my mind after reading this
@jessieash51345 жыл бұрын
Thank you so much for this tutorial
@ForeverDansky5 жыл бұрын
You're welcome Juvia :)
@marvinogah5 жыл бұрын
You could graduate colors by just place a different colored layer on top of the previous layer, and take down the opacity to 0, If layer 1 is red and layer 2 is white, putting layer 2 on layer 1 at 0 opacity, auto animate should be able to animate it to 100 opacity in the following state, that could do the trick.
@lindamaddocks80403 жыл бұрын
That was fun! TY so much.
@jackhoweller5 жыл бұрын
One way to solve the button colour fading is to convert the text to paths, then put an invisible ‘hitbox’ over the top for each button to use to switch artboards
@alexstolzoff40355 жыл бұрын
If you want to animate the colors just copy and paste it the color your transitioning on to the previous screen and wrap it with a mask, give the rectangle of the mask width of 0, then copy that mask over to the screen you want to transition to and drag it over the element you want to give a color transition appearance
@alaahershey17975 жыл бұрын
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.
@certifiablegamers42484 жыл бұрын
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?
@s473683 жыл бұрын
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.
@philipodallo79503 жыл бұрын
Thank you for this.
@helenesandvik98413 жыл бұрын
Tank u so much for this great tutorial
@grav3ns3n5 жыл бұрын
At least 2 beers from me for this video, many many thanks! Subscribed and liked!
@Jerraleon4 жыл бұрын
This was great definitely going to use these functionalities!
@FahimMD5 жыл бұрын
Thanks for making this content. Will be using it for sure at work 🤓
@AbhishekKumar-gg6ox5 жыл бұрын
Sir, You are great. I love your attitude and your way of teaching. Thanks for your great work. Keep it up.
@AgentStofftier5 жыл бұрын
Didn't know XD. Didn't know XD is that great. Thank you very much, dansky!
@Kxarwarx5 жыл бұрын
Step by step - Easy and Simple =). *Dansky, thank You!*
@lonleybeer3 жыл бұрын
Awesome tutorial, learned a lot of useful tricks cheers!