Learn How to Use New Auto-Animate Feature in Adobe XD (Prototyping, Tap & Drag Effects)

[@rasarasan]

High quality learning in 10 mins. Thank you!

[@CodyBrownDesign]

Thank you Raj! I appreciate that :D

[@quatrical]

That is sick. Now, all that is left is the option to select multiple layers on different groups & artboards, and I'm sold.

[@Nogueiranogueira839]

That is so great when we just need a quick review or tips from a source and we end up in your videos Cody! Time is short so thanks for making it easier for us!

[@vanessantor122]

You are awesome! I'm studying digital web design in class this year and finally i learned more for XD from you than them :D Love from Greece ! Subscribed rigth away !

[@SarahHC91]

This video is exactly what I was looking for. Thanks for explaining in a simple way what this new feature does. Looking forward to more videos!

[@CodyBrownDesign]

Sarah C. Thanks Sarah! I’m glad this video was able to help you :) stay tuned for more

[@f3rdies809]

This video is really helpful

[@Cjust15]

Great video bro and you have a really good voice

[@neelsharma4853]

please please do more of these, i really eant to learn. and thank you so much for teaching us🙏🏼🙏🏼🙌🏻✨

[@sassobello]

Hey Cody, I’ve been watching your videos for a while now. Thank you for making these demos easy to understand. Great job!

[@darlingmyo2]

YES thank you, this is exactly the animation feature i was searching for

[@DominikPlanner]

Really great Tutorial! Many thanks for that :) But what i miss is - what´s the next step? So this animation has to be programmed, almost exactly like that, because we showed it like this to the customer and he wants it exactly like in the prototype - no matter what. So it´s the web developers problem then to achieve that, or what? I miss an export function for web....

[@CodyBrownDesign]

Dominik, thanks for watching! And good question. XD has a few good ways to get everything ready for your developer. First is exporting your assets/and/or artboards: Batch: Export assets that are marked using the Mark for Export option. Selected: Export selected assets. All Artboards: Export all the artboards in your design. There's also a feature where you can publish design specs for your developer. Designers can provide developers key information such as object height, width, size, alignment, relative spacing between two icons (objects), colors, and typography. Design specs link being tailor-made for developers, designers don't have to specifically mark out the features in it which are of interest to developers. Hope this helps! (I copied and pasted some of the language from Adobe) ^^

[@TheSocialjerry]

Nice tutorial ... how would you get this same animation within the app development?

[@seyoungchang4517]

Thank you for understanding your lecture explanation. Can I know the background music when you explain?

[@rageitalic-t3c]

Cody, thank you so much for the quality content! I would love to see more of your videos and tutorials on building UI's in Sketch and XD. I get to learn a lot from you about design and it helps me out so much when I am working on my own projects! Thank you once again and keep making more!

[@CodyBrownDesign]

Thank you for the comment Parth, I appreciate the feedback. Stay tuned for more XD videos!

[@rageitalic-t3c]

Does that mean no more sketch videos? Looking at your videos is what made me decide to jump into sketch in the first place!

[@codinggirl7240]

Thank you so much 💓 All the content you create is very helpful and creative!!

[@CodyBrownDesign]

Thank you!

[@sriarts7938]

Thanks for the video. Neat and clear explanation. This is really really helpful for newcomers in prototyping

[@CodyBrownDesign]

Thanks for watching!

[@khn02]

Perfect video, no time wasted in long a@$ intros but straight to point and to good stuff which is really helpful.

[@CodyBrownDesign]

That's nice of you to say Khan! I really appreciate that. :D

[@rehan-ci1tk]

Simple design with high quality of animation. What a Great presentation of auto-animate feature!

[@CodyBrownDesign]

Thank you! I appreciate that.

[@gosiagregorczyk9690]

Awesome! Thx for such an easy display!

[@CodyBrownDesign]

No prob thanks for watching!

[@miguelsioco8939]

I was nerding out too when I saw those awesome interactions! This is banging content, as usual, Cody! All the way from the islands of the Philippines, you're awesome! Thank you for these videos!

[@ishworld1]

XD improved a lot. ! Thanks for the video. You have explored the power of XD.

[@CodyBrownDesign]

Thank you! I haven't even scraped the surface of this!

[@StephenBell_video]

Awesome tut!! Thx for such an easy display! Is there anyway to export it as a vid that automatically plays the effect? So one could post to social media channels?

[@trishaaidasyahputri1181]

Feeling so great after watching this video, thanks, it helps!

[@AerialLensVideo]

Really great explanation -- Thanks! By the way, Cody, you might want to consider hiring yourself out for some commercial voice-over work; You have a truly golden voice. Good job!

[@nikolaobradovic7325]

Awesome tutorial, and what a neat future ! I would like to ask you one thing tho, does XD have an option of exporting a video file of some kind at the end ? As in, you have finished the prorotype, and would like to present it on social media or whatever. Thanks in advance man !

[@Wirechoke]

smooth and buttery. good job.

[@CodyBrownDesign]

Why thank you! :D

[@zeeshanijazz]

Great Video, I was practicing prototype and didn't know about the auto-animate feature your video made me learn this feature. Thanks

[@CodyBrownDesign]

Glad I could help Zeeshan! Thanks for watching :D

[@guciayunda1614]

Waw! Nice. Can we make 3 drag?

[@kuttanpraveen]

thanks for the video. You've explained the features very nicely.. I would like to ask you how to make a long page move to its top on tap of a "go up" button?

[@CodyBrownDesign]

Thanks for the comment, and taking the time to watch my vid! I think you're referring to an anchored scroll? I don't think XD has that capability yet, but I could be wrong.

[@kuttanpraveen]

Thanks @@CodyBrownDesign I tried pointing to a duplicate art board with same page. It might not be a proper method, but worked for me. :) thanks... I have another doubt too.. I can scroll a long page up and down, but what if I have another horizontal strip in the same page which I want to scroll left and right? Is there a way? I tried overlay art board, but couldn't get the proper result. Please throw some light on this. Thanks..

[@Lachimbaa]

Hey Cody, what if it is a scroll down design and the animation is in the middle of it?

[@eduardospiano]

This was really helpful! THANKS!

[@CodyBrownDesign]

No prob!

[@matheuscardosogomes]

Great video man! Keep up the amazing work. I hope to see XD being a market leader in a few years.

[@CodyBrownDesign]

Thanks for watching! It's a great software, they're killing it lately with all these updates.

[@matheuscardosogomes]

@@CodyBrownDesign I have 8 years experience with graphic design so XD feels easier because of AI and PS for me. I'm starting with UX and UI now and it looks like mandatory to use Sketch unfortunately. Speaking with UX and UI designers in the market, all of them seem to use Sketch + Invision + Zeplin. Do you agree? Thanks for sharing all the content!

[@chabachu]

High quality video Cody, thx so much!

[@CodyBrownDesign]

Thanks for watching! :D

[@SonTran-dh9db]

Hey Cody, thanks for this. Love the pace of your tutorials. Was wondering if you could do one on how we would export the final out to like a behance page or a portfolio site. Much appreciated if so. ✌️

[@valentinalatella1294]

You are amazing! Thanks for this tutorial! It was very useful! Looking forward to more videos!

[@CodyBrownDesign]

Thanks Valentina, very nice of you to say. Just trying to share the knowledge. :D More to come soon

[@davidcarrillo693]

yeah buddy, killing it with all the content

[@CodyBrownDesign]

Thanks DC!

[@alienaroos707]

What a gamechanger.. so excited to try stuff with it! Nice Video :)

[@CodyBrownDesign]

Yeah it's a great feature! Thanks for watching :D

[@deafdogdesign]

Thank you so much Cody for this very instructive video. What if I want to make something similar for a website and I have like 30 plus images. I have been trying with grid repeat but messed up repeatedly. Do I have to make a new artboard for each photo?

[@spinningladder]

YEESS! Always uploading the best videos!!

[@CodyBrownDesign]

Thank you! Glad you enjoy :D

[@habuhassira]

Thank you This video is exactly what I was looking for.

[@samanthayoung3835]

Super helpful and straight to the point. Thank you so much!!! :)

[@NSEYA01]

Thats amazing! I've always wanted this & it looks easy to do. I thought I was going to have to learn After Effects to do this

[@priyankabhatia4832]

hey i need to know how hamburger menu would work? i understand how you use various art board animation but how does this work in a single home page artboard??

[@longtalliceman]

Cody, thank you so much for uploading great tutorial! My current concerning was gone by this tutorial! Thanks a lot !!!

[@CodyBrownDesign]

Thanks for watching! Glad you enjoy :D

[@joshjen1129]

Can I become a UI designer by learning this? I’m an architecture student but i really love this stuff

[@nicosnicholas432]

Thanks very simple to follow and well explained

[@CodyBrownDesign]

Thank you! Stoked you enjoyed :D

[@thamjee5572]

You are an awesome teacher. Thanks for sharing. Does sketch has this feature?? I am a beginner. And confused between sketch and XD. Please help!

[@CodyBrownDesign]

Thank you! I appreciate that. Just trying to spread the knowledge! I recommend Adobe XD, it's what Im using and I'm very happy with it. :D

[@rehanahmed1106]

Thank you so mush Cody, i found it really helpful.

[@DamianSwarlik]

really useful tutorial, many thanks :)

[@CodyBrownDesign]

Glad it was helpful!

[@sharifulbinjahir8260]

Awesome, I was looking something like this video.

[@CodyBrownDesign]

Thanks for watching! Glad you enjoy :D

[@Mehdi.Borousan]

That was Super useful, short and worthy! Thanks :)

[@e.k874]

I have a question, you cant drag back and froth though right?

[@erdemguner4829]

I really like it how easy it works. Is there a way to visualize hover animations so easy like in your video.

[@CodyBrownDesign]

Yeah it's super awesome. No hover effects at the moment, Im sure thats' coming soon

[@kinggouran]

Hi Cody, Thanks for the nice tutorial, I have two problem about that! May help me, please. 1. After the set wires, the drag work in one way, just to the left! Naturally must drag left to go next artboard and then drag right to back previous artboard but still I have to drag left to back the previous artboard. 😂😅😵 why? 2. How two color circle comes up in artboard? or any element(text , shape , ...) of out artboard to in? Thanks

[@kelvinnga295]

hi can ask, if we done all the mobile UI with animation effect, when we export the HTML, it all workable into real mobile app ?

[@khosytjandra2235]

Thanks for tutorial.. but if u click "view more" feature drag for choice bag not function.. Do u have solution?

[@karthimeena]

Thanks for explaining ina easy way.

[@jbenitez22]

Not sure if I missed this. Is there a reason you move elements (buttons, text, visuals) off the board that you don't need versus deleting them?

[@jbenitez22]

@Alison Williams Gotcha! Thanks for clearing that up.

[@desmonwilliam6369]

Hi Cody...just wondering how you make the second trigger animation on the same card for the first page 4:42 ...just tried many times but instead of making a new trigger it pulls out the previous trigger. Thanks alot

[@biscuit3835]

I also curious how to make it.

[@amalieandsager8162]

This is so great! Learned a lot! How did you add more than one string to the "bag"? to both doing the drag and the open productpage? I can only get it to make one :(

[@CodyBrownDesign]

You need to add an interaction to both cards, then it will appear as two!

[@amalieandsager8162]

Thanks for reply! Im having trouble adding multiple interactions to a single element/group. Sometimes it works, sometimes it doesnt. Will have to practice harder :) maybe you can include it in a later tutorial, I will be looking out for more. Great work!

[@CodyBrownDesign]

@@amalieandsager8162 hmm, that's a good question. I'll look into that more!

[@Anne-hz2fe]

Really helpful!

[@blackbird163]

Cody thank you this was great

[@Thelifeofro]

After you made your landing page and animation on XD. How do you get it over to Shopify? Can that even be done?

[@Gianavaro]

Thanks for this amazing video. It helped me so much. I have a question. I tried to do the same with 3 sliding cards, but didn't succeed. For example I have a bigger card in the middle and 2 smaller ones at sides. I can animate only 2 of them, as the bigger slides left and becomes smaller and the right small card slides to the center becoming bigger, and back. This was all about the center card and the right card. My problem is that I can't interact the left card. As my middle card's wire is already occupied I cannot draw a wire from the center to the left card. I hope I could explain properly :D

[@pokciktino2687]

May I ask how to work with "mouse over" instead of tap? TQ..

[@CodyBrownDesign]

I believe that's coming soon to XD

[@KINGOZYMANDIAS]

i have a doubt, everything works fine when you have 2 cards but what happen if you have 3 cards? the card in the middle has the trigger to slide back you can't use it to slide forward, i don't know if you know what i mean...

[@Foxylis12590]

How do you keep things in the artboard while they are outside of the workspace? whenever I move something out of the artboard with the intention to make it slide like in your case, the objects automatically move into the 'Pasteboard' and I can't proceed with the animation.

[@RealidadesInvisibles]

if I was looking to d this exact animation on Xcode? What would I search? Thank you in advance!

[@fareedkhan4854]

I am totally new to this XD, i just want to ask that at 4:40 how do you add two triggers with single image, I can't do that i hope you can answer, by the way your videos are easy to understand !

[@tomwatson1625]

Great vid! Was wondering how you would go about doing the tile affect if you had more than one tile?

[@CodyBrownDesign]

Thank you! I think you're referring to repeat grid? Select an object, then click repeat grid, you'll get a green selection with a handle that you can drag across to make duplicates.

[@hichk1991]

Thank you Cody!

[@naoufelmoallem3780]

Thnx very helpful tuto ❤ Wtching u from africs great job bro

[@CodyBrownDesign]

Thank you!

[@elayas9026]

Awesome video to learn auto animate

[@CodyBrownDesign]

Thank you!

[@amazingvideoscity]

Thanks very good lesson

[@cyclopsli1923]

Awesome video, love this new feature!!

[@CodyBrownDesign]

Thank you! Yeah, seriously such an awesome feature that is gonna allow us to do so much :D

[@dhyanimation]

great tutorial, thanks

[@CodyBrownDesign]

Thanks!

[@samueljaramillo7144]

awesome. thanks for setting this up. SUBSCRIBED!

[@CodyBrownDesign]

thank you! :D

[@vanesachristman7641]

Cody where do you get these cool fonts? Ruler, Seilec, Brown? Thanks!

[@CodyBrownDesign]

Good question Vanessa, it's a mix of finding inspiration from existing sites online, font websites, and I use the font "WhatFont" inspector chrome extension a lot. Thanks for watching!

[@liming5321]

wow your video is really easy to understand!! hope you make more videos in XD 👍👍👍

[@CodyBrownDesign]

Thank you Alex! I really appreciate the kind words. Oh and absolutely :D

[@behindthesween]

Hey Cody. So I tried this and the pages just snap to the other without any transitions, what am I doing wrong?

[@hellohyderabad3989]

How can achieve same effects in web using Javascript or Angular, if u know please make a video for us, micro interaction in code

[@idaferidev8461]

Great, but how can i do in swift ?

[@robertostringa9254]

So did you know how to replicate this with css and javascript for dev project part ? Or some code examples. Thxs.

[@robertostringa9254]

Ok i think you don't know.

[@lb5548]

I really want to be able to do this, but it doesn't really work on windows or on more than one artboard. It doesn't really give me a smooth drag like yours, it just make a fade transition between the photos.. it is so annoying. Is this only available for mac?? I have the drag option, but it doesn't drag it's a fade transition unfortunately.

[@Falv007]

Very slick

[@timothy790110]

a graphic designer with a mustache? Im chocked!

[@CodyBrownDesign]

There’s like none of them out there! ;)

[@ZOZOSAUDI]

Thank u man it was so useful Thanks again

[@CodyBrownDesign]

Thanks for watching!

[@Endless_Tails]

Thanks a lot for the video kudos..

[@MohamedAli-wz6tr]

Nice work

[@varunsuresh22]

You, sir made my day. Thank you.

[@jul1us_tv]

This is great!

[@stef3333v]

hello, i canot find the drag element inside the trigger!! where can I find it

[@CodyBrownDesign]

You may need to install the latest version of XD!

[@stef3333v]

@@CodyBrownDesign its already installed

[@stef3333v]

@@CodyBrownDesign version 13.0.12.14

[@CodyBrownDesign]

@@stef3333v So make sure you are in prototype mode in the top left, then select your desired element. You'll see that blue arrow attached to your element. Drag that arrow to your next duplicated artboard. There will then be a blue tab on the edge of the artboard, click on the blue tab and it should open a dialog box. Go up to the top where it says "Trigger". Drag should be one of the options. Hope this makes sense!

[@stef3333v]

@@CodyBrownDesign thank you Cody this is helped me ✌️😊

[@namastewebflow]

Thank you for the video, Freddie Mercury ;). It helped me a lot since I'm just starting out with XD.

[@jessaamordumagdag8525]

I'm subscribing because of this!!!

[@tanyaoistanya4291]

Nice (or glorious? ~ Lol) interaction design! I just subscribed because of it!

[@CodyBrownDesign]

Haha! Thanks for the sub! I appreciate the support

[@wayansusanto14]

Can we export the recorded animation to .gif?

[@Anujakanani]

Thanks a lot for this! Really helps :)

[@CodyBrownDesign]

anuja kanani thanks for watching!

[@illiavevo73]

How to make an infinite drag right and left like a carousel?

[@josepabloarbelaez7975]

awesome, thank you very much!!

[@CodyBrownDesign]

Thanks for watching!

[@sicfxmusic]

Nice but HOLDDD UPP... How to make it work in, say iOS app or HTML5?

[@reynardnehemia]

what if there is more than 2 slides.. how to make more slides?