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
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.
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
@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.
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.
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 ;)
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.
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
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
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. :)
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
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
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.
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
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.
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 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.
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..?
I found this tutorial very informative, and I had downloaded the practice file. My main issue is that In the Windows version, there is no menu on the top, like I see on your Mac Version, and when I have the items magnified, I can't scroll them left to right like I can in Illustrator. I don't know why they didn't add the menus in Windows Version of Adobe XD, and not scroll around in the larger view like I can in Illustrator (Windows). I also can't move the panel on the left or the right.
