Adobe XD Multiple Interactions Prototype Tutorial

[@CalerEdwards]

Don't forget to give the video a thumbs up if you enjoyed it! Also what tutorial do you want to see next?

[@abboshonaslamov3947]

If I want to get into UX UI would you think flatiron school would be a good choice? Thank You

[@wierdkeyboard4271]

that transition at @ was crazy, how can one replicate that?

[@ada-dech]

A question.. what if I have 3 or more cards.. once I made drag transition from card2 to card3, how do I make a drag transition from card2 back to card1?

[@DaveB]

I've spent a long time today trying to find videos that show someone *actually* prototyping. Thanks for this!

[@usefsanjari7618]

can we just appreciate how GOOD your Voice and the way u talk is ?? so underrated !!! im going to learn a lot of things from you

[@nacholibre2129]

please make more of these kind of videos! all the videos on adobe xd is all basic and all the same. just a suggestion. thanks for all your great vids! you rock man!

[@rabs132]

it's been so long since i used xd, going back there was so confusing, but everything came back after I practiced with this, thank you!

[@yogi3658]

Good

[@roycaryyew9368]

Searched for design find awesome channel and video(I m new Columb)!

[@stephanieoparaku]

Best Tutorial I've seen on Interaction design. Thank you so much Caler.

[@IamUSER369]

This UI is so sick!!

[@Omnitrix8]

I don't know about you guys but I just.... SUBSCRIBED!

[@CalerEdwards]

thank you :D

[@mustafaemregultekin7683]

perfect! you continue to be my inspiration

[@nestorberrueta5785]

Great video, easy to follow!

[@NatanaelGarcia]

wow bro youre amazing!! Thanks so much could you also make a tutorial on how to make that spining phone with the content you jsut made??? plz! thanks again

[@uixmat]

Awesome tutorial Caler!

[@broberg.compositions]

Super clean and informative video! Thank you!

[@CalerEdwards]

Glad it was helpful!

[@maxbizley]

Awesome tutorial. Very slick result 👍

[@4988raja]

Amazing work bro

[@tarekmamoun936]

I would give an A for this it is very informative and the design is pretty appealing

[@kalpeshpatel040]

Thanks a lot for creating this video. It helps a lot

[@CalerEdwards]

Glad to hear that!

[@adrianyee2634]

That’s really impressive

[@chrisdavis2970]

That was awesome, thanks for showing how to make this!

[@idiartt]

Great tutorial! Awesome and inspiring Interactions design! Thanks

[@sanaahajji4665]

I love it. thank you so much for the video.

[@CalerEdwards]

Glad you enjoyed it :D

[@arshiaamirtaheri5887]

thats so cool . thank man . niceee .thanks soo much

[@funglam7395]

Great tutorial. Thanks. Really reminds me of Principle 🤔

[@skumaranand]

Hi, i have a question. Do you think XD can replace Principle in terms of micro interaction? I was thinking to purchase either Principle or Protopie. I would really appreciate if you could share your thoughts on this.

[@funglam7395]

@@skumaranand Hi, I've used Principle quite a lot but found it restrictive on certain projects and admittedly it felt a little hacky at times to achieve what I wanted. Protopie is the next prototyping tool I'm currently looking into as it helps with conditional statements much like code. I can't comment on XD but from what I have seen it looks very basic too

[@alfelfTV]

Nice work! Thank you

[@osks]

VERY nicely done!

[@CalerEdwards]

Thank you very much!

[@murilocassel]

Nice Caler, i Love your tutorials

[@Salmancreationbd]

Great Video - Enjoyed

[@jodorgu8640]

Wow I came in early. Thanks for your effort Caler

[@CalerEdwards]

:D

[@thomasc7992]

great works！ Thanks for all you did！

[@gianlucaredaelli139]

How can i do the step at 10:30 frame ? Show in my presentation the Iphone case? Thanks ;) 🤩

[@frontporchmedia]

Freaking Awesome Tutorials! Thank you

[@jayannang]

i absolutely love this

[@Brandaa377]

it's very helpfully :)

[@atilla9460]

Great tutorial. Is there also a way to use more than 2 "playlists" or boxes to drag? I'd appreciate an answer

[@lalalalalala8147]

thank you for your nice sharing, a quick question, how did you put your prototype process in that iPhone template?

[@itsphihere]

sorry may I ask how to activate the turquoise guard on xd like on 3:02 to make sure everything is on the same position? thank you

[@KohlHosein]

Amazing! So how do you get to preview it in an iPhone mockup?

[@tayloroqu3]

Amazing!

[@frontporchmedia]

So it seems that you cannot do the drag effect to the third card? You only dragged between the first two, and mine worked fine... but I couldn't add another drag effect to the third card. Am I doing something wrong?

[@thebirdhasbeencharged]

Man I unsubbed from all "XD" channels, with your new consistent schedule I'm gucci.

[@nowakjim]

Nice job!

[@Open6a-fx4qf]

Hohoho epic transition

[@Zzjul]

Is there a up-to-date version of this tutorial since a lot of new features are added

[@isiomaiyiegbuniwe8364]

Thanks a lot..How did you make the start up video from xd before using rotato

[@shtrier]

Hey Caler, what software do you use to create the presentation videos with the phone mockups surrounding your design. Do you have a tutorial for this? :)

[@CalerEdwards]

Rotato, here is my video on it: kzbin.info/www/bejne/eIe2qHegebRke5I

[@jchen4338]

Could I ask how to make the display animation at the beginning and the end?

[@JulianStiber]

Nice video, but what’s the reason you were not working with components in this case and e.g. give it the status 1 “full card” and 2 “collapsed card”. Wouldn’t that save you time on animating the whole thing, or rather cause problems?

[@mohamedirshad2775]

good animate nice work

[@mohamedel-esawy6451]

thanks bro U r sogood

[@koppanydesign3996]

Great tutorial! How do you put your prototype into a 3D rotated mobile phone? Do you use Adobe After Effect for it? Thank you!

[@fiveshorts]

Great video. Do you have an equivalent that talks about handing over to coders (who’ll create the finished article) who tend to view these tools with great cynicism...

[@vishwajeetraj11]

wow! thanks for this content !

[@YinkaAdeyeni-vg7ze]

This is gonna be fun, huff¿

[@gagan8977]

how do you get the status top bar with Time and stuff?

[@mukeshkannanmanokaran4145]

thanks 😉👍

[@abdelrhmanhammad2550]

great bro!

[@ralphkevinmalco4240]

hi can i used this video tutorial in my video presentation at school?

[@luizalosch9268]

awesome!

[@wetiot]

Thank you!

[@yi8634]

How did you make the intro 2d prototype animation??

[@yoyoz333]

I was hoping you were going to explain how you applied it to that 3D phone mockup. Can you give an idea how you did it, because thats what I need to do for a project. cheers.

[@CalerEdwards]

I used a program on Mac called Rotato for the mock-up.

[@silmynurafina7531]

can we make this kind of design on web?? and can we export it as html?

[@Youtube-Channel1]

Nice 👍 how did you do the intro?!? Tutorial please.

[@techwithfatima4083]

Sir your video is awesome 💓thanks... I love the background music😍😍kindly.. I need this music... Plzzzzzz

[@clermagic224]

Hey there, i saw on the XD document that ruler guides are used. Anyone knows whats the keyboard shortcut for it? Thanks!

[@Dejiko12]

I'm trying to figure it out too!

[@xoxodesign2999]

How do u play ur prototype in iphone artboard !

[@romanjafedcarrascodavila821]

How can I do the introduction animation? Do you have a course for animation? You’re amazing!

[@CalerEdwards]

Thank you! Here is the video showing exactly that: kzbin.info/www/bejne/eIe2qHegebRke5I

[@ameraibrahim9535]

Hi Caler, is there an alternative tool other than rotato plugin that can be used by Window users?

[@CalerEdwards]

Not that I know of unfortunately. If I find one I will probably make a video on it.

[@ameraibrahim9535]

@@CalerEdwards Thanks Caler! 😁

[@AJ-fj3js]

which mockup tool are you using

[@techwithfatima4083]

Plz tell me the name of background music.. 💓💓💓

[@kux_music]

nice!

[@fernandagioiosa987]

love your tutorials! I would love to see a tutorial also about how to make the first part of your video, I mean putting your prototype in a phone with the video interactions.. so cool that part :). Did you use rotato to make it?

[@CalerEdwards]

Yes I used Rotato :D

[@karl3201]

Is it possible to create this with react native?

[@designdrops2778]

I got a question in regards to designing a mobile app and then sending it to developers. So when your designing an app, do you design all resolution types or just one for both android and iOS?

[@vasu9760]

Amazing video but can you make the same thing same animation in real application? ( There's so many amazing ui concepts but I've never seen any of those in action in real application )

[@vasu9760]

Appreciate your efforts, that explanation, you made it really easy, thanks.

[@secession77]

These ui concepts are usually too fancy for casual user. I’ve seen many apps which implemented this kind of animated fluent stuff by first release and switched it to more static design with later updates.

[@chrisserrano78]

Could you do this W/ the new states tool?

[@janecash6282]

Can this be done on Dugan

[@sakura8090]

I really like your voice

[@CalerEdwards]

Thank you :D

[@Buddies1106]

TY Caler Edwards. You are my baby.

[@TyrantTitan.]

Curious how you created the intro animation with the rotating phone? NM, I saw your reply to another comment, nice! subbed.

[@walidhisham7241]

thanks for amazing tuts calers and, can i ask u about ur mockup plz

[@CalerEdwards]

Thank you! The mockup is done by using Rotato (mac only program). I have a video on it here: kzbin.info/www/bejne/eIe2qHegebRke5I

[@walidhisham7241]

@@CalerEdwards thnx bro

[@streetdancerwar]

loved it

[@TheRedjinator]

The video clips in an out without mentioning things your doing in the background. Very professional looking, but maybe it was a rush job? You obviously have the skills, but overlooked some important details for this particular video.

[@lananhngo2729]

Would you please tell me how the circle mouse pointer can be selected in the xd video???

[@CalerEdwards]

when you record inside of Xd's live preview on Mac the cursor switches to the circle. Hope that helps :D

[@cabhi1804]

how did the card 3 not come out of the first artboard when u dragged it out? u said something wired in....I didnt get that!

[@robertto1ify]

No After Effects?

[@Ajn97]

How you bring those blue lines to measure everything is on there right place at 2:52

[@CalerEdwards]

The guides are on the top and left side of the artboard. Just hover over it and your cursor will change from there just click and drag to bring one out. To remove one click and drag it back to either the left or top of the arboard. Hope that helped :D let me know if you have any other questions.

[@Ajn97]

@@CalerEdwards wow that's working All this i time i was making guidelines with pen tool

[@marwanhafez178]

how can i drag down? tha page?

[@saulescala]

the final prototype was rotato ?

[@evanmanni2723]

Awesome

[@whimsicalcellbooster]

Nice

[@ihajo]

cool video

[@elya_rose]

How do you create a rond mouse in the animation ?

[@CalerEdwards]

Recording in the Adobe XD preview on Mac changes the cursor

[@mrabintom]

This was used in the North Island College educational video 2023-24

[@spybooth1235]

Very goooood

[@junlv4350]

Cool thing

[@wierdkeyboard4271]

that transition at 0:24 was crazy, how can one replicate that?

[@atilla9460]

He's literally showing us how to recreate that animation in the video...

[@Izavincy]

Need more videos, in depth...

[@ajautrey1825]

Was the animation made in AE!?

[@DaviRoutner]

Rotato (search on google)

[@weatheredoakmedia]

I'm sorry, but I struggled to follow this video. I'm new to all of this and am following this for school work. First of all I'm a windows user, so there are differences in the key commands. Secondly, it seems like the starter files I downloaded have some of the things already done, like components and groups. The aspect ratio is already unlocked on the card. You go through a lot of things very quickly without actually showing us what you're doing. I struggled with dragging the text over because I didn't see that you ungrouped things. I had to rewind and replay the video several times. I can hear mouse clicks, but I don't know what you're doing. It should not take almost 2 hours to go through an 11 minute video.

[@saatvikthukral133]

You can actually watch this from his older videos to get started from scratch: kzbin.info/www/bejne/ZnzKhqJtobKilck If you're just beginning, I'd recommend this video too: kzbin.info/www/bejne/eZ_JiX1ops-pa6s Just follow what these guys are doing in these videos and the rest of the fast paced videos will start making sense to you. Also, most of the commands in windows and MacOS are same. Just replace Control with Command, Alt with Option and Enter with Return.