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?
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!
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
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.
@@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
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?
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? :)
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?
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...
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?
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.
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?
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 )
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.
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.
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.
Don't forget to give the video a thumbs up if you enjoyed it! Also what tutorial do you want to see next?
If I want to get into UX UI would you think flatiron school would be a good choice? Thank You
that transition at @ was crazy, how can one replicate that?
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?
I've spent a long time today trying to find videos that show someone *actually* prototyping. Thanks for this!
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
Damn that starting animation is 🔥🔥. Great video and well explained.
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!
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!
Good
Best Tutorial I've seen on Interaction design. Thank you so much Caler.
Searched for design find awesome channel and video(I m new Columb)!
This UI is so sick!!
I don't know about you guys but I just.... SUBSCRIBED!
thank you :D
perfect! you continue to be my inspiration
Super clean and informative video! Thank you!
Glad it was helpful!
Awesome tutorial Caler!
Great video, easy to follow!
Awesome tutorial. Very slick result 👍
Thanks a lot for creating this video. It helps a lot
Glad to hear that!
Great tutorial! Awesome and inspiring Interactions design! Thanks
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
That was awesome, thanks for showing how to make this!
Great tutorial. Is there also a way to use more than 2 "playlists" or boxes to drag?
I'd appreciate an answer
I love it. thank you so much for the video.
Glad you enjoyed it :D
thank you for your nice sharing, a quick question, how did you put your prototype process in that iPhone template?
Great tutorial. Thanks. Really reminds me of Principle 🤔
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.
@@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
Amazing work bro
Nice Caler, i Love your tutorials
I would give an A for this it is very informative and the design is pretty appealing
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?
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? :)
Rotato, here is my video on it: th-cam.com/video/BVSwDjDO1E0/w-d-xo.html
VERY nicely done!
Thank you very much!
That’s really impressive
Great tutorial! How do you put your prototype into a 3D rotated mobile phone? Do you use Adobe After Effect for it? Thank you!
thats so cool . thank man . niceee .thanks soo much
Great Video - Enjoyed
Nice work! Thank you
Amazing! So how do you get to preview it in an iPhone mockup?
Wow I came in early. Thanks for your effort Caler
:D
Man I unsubbed from all "XD" channels, with your new consistent schedule I'm gucci.
great works！
Thanks for all you did！
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?
i absolutely love this
Freaking Awesome Tutorials! Thank you
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...
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?
Yes I used Rotato :D
hi can i used this video tutorial in my video presentation at school?
Thanks a lot..How did you make the start up video from xd before using rotato
Nice job!
it's very helpfully :)
Is there a up-to-date version of this tutorial since a lot of new features are added
Hohoho epic transition
Sir your video is awesome 💓thanks... I love the background music😍😍kindly.. I need this music... Plzzzzzz
Could I ask how to make the display animation at the beginning and the end?
wow! thanks for this content !
good animate nice work
Amazing!
thanks bro U r sogood
How can i do the step at 10:30 frame ? Show in my presentation the Iphone case? Thanks ;) 🤩
can we make this kind of design on web?? and can we export it as html?
This is gonna be fun, huff¿
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.
I used a program on Mac called Rotato for the mock-up.
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?
How can I do the introduction animation? Do you have a course for animation? You’re amazing!
Thank you! Here is the video showing exactly that: th-cam.com/video/BVSwDjDO1E0/w-d-xo.html
Hi Caler, is there an alternative tool other than rotato plugin that can be used by Window users?
Not that I know of unfortunately. If I find one I will probably make a video on it.
@@CalerEdwards Thanks Caler! 😁
How did you make the intro 2d prototype animation??
Curious how you created the intro animation with the rotating phone? NM, I saw your reply to another comment, nice! subbed.
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
Nice 👍 how did you do the intro?!? Tutorial please.
great bro!
how do you get the status top bar with Time and stuff?
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 )
Appreciate your efforts, that explanation, you made it really easy, thanks.
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.
Thank you!
thanks 😉👍
which mockup tool are you using
awesome!
I really like your voice
Thank you :D
Hey there, i saw on the XD document that ruler guides are used. Anyone knows whats the keyboard shortcut for it? Thanks!
I'm trying to figure it out too!
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.
thanks for amazing tuts calers and, can i ask u about ur mockup plz
Thank you! The mockup is done by using Rotato (mac only program). I have a video on it here: th-cam.com/video/BVSwDjDO1E0/w-d-xo.html
@@CalerEdwards thnx bro
Would you please tell me how the circle mouse pointer can be selected in the xd video???
when you record inside of Xd's live preview on Mac the cursor switches to the circle. Hope that helps :D
Is it possible to create this with react native?
TY Caler Edwards. You are my baby.
Plz tell me the name of background music.. 💓💓💓
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!
How do u play ur prototype in iphone artboard !
nice!
Could you do this W/ the new states tool?
loved it
No After Effects?
Awesome
Can this be done on Dugan
Nice
cool video
Very goooood
the final prototype was rotato ?
How do you create a rond mouse in the animation ?
Recording in the Adobe XD preview on Mac changes the cursor
Need more videos, in depth...
Was the animation made in AE!?
Rotato (search on google)
Cool thing
how can i drag down? tha page?
This was used in the North Island College educational video 2023-24
How you bring those blue lines to measure everything is on there right place at 2:52
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.
@@CalerEdwards wow that's working
All this i time i was making guidelines with pen tool
that transition at 0:24 was crazy, how can one replicate that?
He's literally showing us how to recreate that animation in the video...