Learn How to Use New Auto-Animate Feature in Adobe XD (Prototyping, Tap & Drag Effects)
Вставка
- Опубліковано 20 січ 2025
- In this tutorial I explore the very new auto-animate feature that was released at Adobe MAX 2018. Such an awesome feature that will change the game of screen design!
Check out Rove Adventure Shop Here: bit.ly/2CwGgyZ
MUSIC
Tired
• Lofi x Frank Ocean Typ...
william.bands12@gmail.com
/ junkiewill
/ . .
Caress
• Video
william.bands12@gmail.com
/ junkiewill
/ yuseiworld
She is Gone Like Summer
• [FREE] She is Gone Lik...
CONTACT: montydatta235@gmail.com
IG: / montydatta
SOUNDCLOUD: / montydatta
Let Me Do Nothing In Peace
• [FREE] Chill Lofi Hip ...
CONTACT: montydatta235@gmail.com
SOUNDCLOUD: / montydatta
IG: / montydatta
UA-cam: / montydatta
Hold me
• (FREE) Lofi Type Beat ...
Email: william.bands12@gmail.com
/ junkiewill
/ . .
WHAT TO EXPECT FROM THIS CHANNEL:
I publish meaningful & concise content that provides insight into the field of graphic design, web design, illustration, branding, app design, & other creative areas I find important in my field as a commercial artist. This media includes software tutorials, lifestyle vlogs, and other useful videos to help and inspire anyone looking to improve their skills as a creative badass and take their creativity to new heights.
ABOUT ME:
Hey there, I’m Cody. A craft-beer drinking Designer living in San Diego, Ca.
I’ve been designing professionally for the last 7 years and have learned quite a bit along the way. Throughout my career as a creative I’ve had the pleasure of designing for a number of incredible brands & creative agencies.
From working with a variety of clients and organizations, my style can been seen as eclectic and constantly evolving, much like a chameleon. In the world of commercial arts I’ve had to get out of my comfort zone and adapt to the brands and tasks at hand. I like to think that my personal aesthetic is contemporary and minimal combing modern techniques with classic design elements.
SKILLS
Some of the skills I’ve acquired throughout my journey as a creative:
Art & Creative Direction
Styling
Graphic Design
Branding & Identity Design
Web Site Design (optimized for mobile & tablet)
App Design
Photography
Illustration
Image Manipulation
Typography & Lettering
Motion Graphics
Video Production & Editing
Animation
MY STUFF
Website: www.codybrownde...
Dribble: dribbble.com/c...
Behance: www.behance.ne...
Instagram: / mistercodybrown
High quality learning in 10 mins. Thank you!
Thank you Raj! I appreciate that :D
That is sick. Now, all that is left is the option to select multiple layers on different groups & artboards, and I'm sold.
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!
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
I also curious how to make it.
This was really helpful! THANKS!
No prob!
Hey Cody, I’ve been watching your videos for a while now. Thank you for making these demos easy to understand. Great job!
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 !
Great video bro and you have a really good voice
Nice tutorial ... how would you get this same animation within the app development?
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!
Thank you for the comment Parth, I appreciate the feedback. Stay tuned for more XD videos!
Does that mean no more sketch videos? Looking at your videos is what made me decide to jump into sketch in the first place!
Thank you for understanding your lecture explanation. Can I know the background music when you explain?
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!
Thank you so much 💓 All the content you create is very helpful and creative!!
Thank you!
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 !
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?
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??
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!
Sarah C. Thanks Sarah! I’m glad this video was able to help you :) stay tuned for more
This video is really helpful
Great video man! Keep up the amazing work.
I hope to see XD being a market leader in a few years.
Thanks for watching! It's a great software, they're killing it lately with all these updates.
@@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!
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.
Hey Cody, what if it is a scroll down design and the animation is in the middle of it?
Perfect video, no time wasted in long a@$ intros but straight to point and to good stuff which is really helpful.
That's nice of you to say Khan! I really appreciate that. :D
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....
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) ^^
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?
YEESS! Always uploading the best videos!!
Thank you! Glad you enjoy :D
please please do more of these, i really eant to learn.
and thank you so much for teaching us🙏🏼🙏🏼🙌🏻✨
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?
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.
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..
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 ?
YES thank you, this is exactly the animation feature i was searching for
Feeling so great after watching this video, thanks, it helps!
Thanks for tutorial.. but if u click "view more" feature drag for choice bag not function..
Do u have solution?
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
Simple design with high quality of animation. What a Great presentation of auto-animate feature!
Thank you! I appreciate that.
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...
What a gamechanger.. so excited to try stuff with it! Nice Video :)
Yeah it's a great feature! Thanks for watching :D
XD improved a lot. ! Thanks for the video. You have explored the power of XD.
Thank you! I haven't even scraped the surface of this!
You are amazing! Thanks for this tutorial! It was very useful! Looking forward to more videos!
Thanks Valentina, very nice of you to say. Just trying to share the knowledge. :D More to come soon
Hey Cody. So I tried this and the pages just snap to the other without any transitions, what am I doing wrong?
Thanks for the video. Neat and clear explanation. This is really really helpful for newcomers in prototyping
Thanks for watching!
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 !
After you made your landing page and animation on XD. How do you get it over to Shopify? Can that even be done?
Awesome! Thx for such an easy display!
No prob thanks for watching!
yeah buddy, killing it with all the content
Thanks DC!
if I was looking to d this exact animation on Xcode? What would I search? Thank you in advance!
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?
@Alison Williams Gotcha! Thanks for clearing that up.
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 :(
You need to add an interaction to both cards, then it will appear as two!
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!
@@amalieandsager8162 hmm, that's a good question. I'll look into that more!
I really like it how easy it works. Is there a way to visualize hover animations so easy like in your video.
Yeah it's super awesome. No hover effects at the moment, Im sure thats' coming soon
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
I have a question, you cant drag back and froth though right?
Great Video, I was practicing prototype and didn't know about the auto-animate feature your video made me learn this feature. Thanks
Glad I could help Zeeshan! Thanks for watching :D
May I ask how to work with "mouse over" instead of tap? TQ..
I believe that's coming soon to XD
how do you drag to previuos artboard?
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!
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
Thanks very simple to follow and well explained
Thank you! Stoked you enjoyed :D
Thank you so mush Cody, i found it really helpful.
That was Super useful, short and worthy! Thanks :)
Super helpful and straight to the point. Thank you so much!!! :)
Cody, thank you so much for uploading great tutorial! My current concerning was gone by this tutorial! Thanks a lot !!!
Thanks for watching! Glad you enjoy :D
High quality video Cody, thx so much!
Thanks for watching! :D
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. ✌️
smooth and buttery. good job.
Why thank you! :D
really useful tutorial, many thanks :)
Glad it was helpful!
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
hello, i canot find the drag element inside the trigger!! where can I find it
You may need to install the latest version of XD!
@@CodyBrownDesign its already installed
@@CodyBrownDesign version 13.0.12.14
@@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!
@@CodyBrownDesign thank you Cody this is helped me ✌️😊
Great vid! Was wondering how you would go about doing the tile affect if you had more than one tile?
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.
Thank you
This video is exactly what I was looking for.
How can achieve same effects in web using Javascript or Angular, if u know please make a video for us, micro interaction in code
Awesome, I was looking something like this video.
Thanks for watching! Glad you enjoy :D
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!
Cody where do you get these cool fonts? Ruler, Seilec, Brown? Thanks!
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!
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.
Can we export the recorded animation to .gif?
Thanks for explaining ina easy way.
what if there is more than 2 slides.. how to make more slides?
Cody thank you this was great
Waw! Nice.
Can we make 3 drag?
So did you know how to replicate this with css and javascript for dev project part ? Or some code examples. Thxs.
Ok i think you don't know.
Does it not work on the Windows version? I did the exact thing shown in the video but the animations do not work at all
I believe it should? I'm not 100% certain but I feel like they wouldn't limit features based on operating systems..
@@CodyBrownDesign My bad. I had missed something in the video. Thanks for your help
man i face same problem let me know how i can do it
Thank you Cody!
Really helpful!
Awesome video, love this new feature!!
Thank you! Yeah, seriously such an awesome feature that is gonna allow us to do so much :D
great tutorial, thanks
Thanks!
Thanks very good lesson
Thank u man it was so useful
Thanks again
Thanks for watching!
Thnx very helpful tuto ❤
Wtching u from africs great job bro
Thank you!
awesome. thanks for setting this up. SUBSCRIBED!
thank you! :D
Great, but how can i do in swift ?
Can I become a UI designer by learning this? I’m an architecture student but i really love this stuff
You, sir made my day. Thank you.
Awesome video to learn auto animate
Thank you!
wow your video is really easy to understand!! hope you make more videos in XD 👍👍👍
Thank you Alex! I really appreciate the kind words. Oh and absolutely :D
Thanks a lot for this! Really helps :)
anuja kanani thanks for watching!
Thanks Hope for more.
Thanks for watching Saddam, hoping to get some more made soon!
How to make an infinite drag right and left like a carousel?
I'm subscribing because of this!!!
awesome, thank you very much!!
Thanks for watching!
Super awesome tutorial
Thank you Sania! Very much appreciate it :D
@@CodyBrownDesign Thank you. One question, Will you make more videos in XD? or just sketch?
I have never used XD. But after watching your video, I'd love to see more videos from you in XD. :D
@@rabiak7496 Expect more XD videos real soon. I also have the Illustrator itch lately.
Super awesome. I have seen a lot of videos but can't understand anything. :D Only your video give me Courage. Thank you
This is great!
Thanks a lot for the video kudos..
Thanks was helpful
Thanks for watching! I appreciate it a lot
love your content