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
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?
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? :)
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
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...
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?
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.
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.
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 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?
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.
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.
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.
You can actually watch this from his older videos to get started from scratch: ua-cam.com/video/0KgUo7lMo_g/v-deo.html If you're just beginning, I'd recommend this video too: ua-cam.com/video/CnfXJ2qjv5I/v-deo.html 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.
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
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
This UI is so sick!!
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)!
perfect! you continue to be my inspiration
Great video, easy to follow!
Awesome tutorial Caler!
Amazing work bro
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
Awesome tutorial. Very slick result 👍
Super clean and informative video! Thank you!
Glad it was helpful!
That was awesome, thanks for showing how to make this!
I don't know about you guys but I just.... SUBSCRIBED!
thank you :D
Thanks a lot for creating this video. It helps a lot
Glad to hear that!
Great tutorial! Awesome and inspiring Interactions design! Thanks
That’s really impressive
Nice Caler, i Love your tutorials
VERY nicely done!
Thank you very much!
Great Video - Enjoyed
thats so cool . thank man . niceee .thanks soo much
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?
Nice work! Thank you
I would give an A for this it is very informative and the design is pretty appealing
i absolutely love 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 tutorial. Is there also a way to use more than 2 "playlists" or boxes to drag?
I'd appreciate an answer
Is there a up-to-date version of this tutorial since a lot of new features are added
it's very helpfully :)
Wow I came in early. Thanks for your effort Caler
:D
Amazing! So how do you get to preview it in an iPhone mockup?
How can i do the step at 10:30 frame ? Show in my presentation the Iphone case? Thanks ;) 🤩
Could I ask how to make the display animation at the beginning and the end?
Freaking Awesome Tutorials! Thank you
great works！
Thanks for all you did！
how do you get the status top bar with Time and stuff?
Man I unsubbed from all "XD" channels, with your new consistent schedule I'm gucci.
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: ua-cam.com/video/BVSwDjDO1E0/v-deo.html
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
Hohoho epic transition
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
How did you make the intro 2d prototype animation??
Great tutorial! How do you put your prototype into a 3D rotated mobile phone? Do you use Adobe After Effect for it? 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...
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?
Nice job!
This is gonna be fun, huff¿
good animate nice work
Amazing!
Thanks a lot..How did you make the start up video from xd before using rotato
thanks bro U r sogood
can we make this kind of design on web?? and can we export it as html?
wow! thanks for this content !
hi can i used this video tutorial in my video presentation at school?
How do u play ur prototype in iphone artboard !
Is it possible to create this with react native?
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.
Can this be done on Dugan
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: ua-cam.com/video/BVSwDjDO1E0/v-deo.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! 😁
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.
thanks 😉👍
No After Effects?
which mockup tool are you using
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
Curious how you created the intro animation with the rotating phone? NM, I saw your reply to another comment, nice! subbed.
great bro!
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!
Sir your video is awesome 💓thanks... I love the background music😍😍kindly.. I need this music... Plzzzzzz
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!
how can i drag down? tha page?
Nice 👍 how did you do the intro?!? Tutorial please.
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
Thank you!
the final prototype was rotato ?
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?
awesome!
Could you do this W/ the new states tool?
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: ua-cam.com/video/BVSwDjDO1E0/v-deo.html
@@CalerEdwards thnx bro
Plz tell me the name of background music.. 💓💓💓
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
I really like your voice
Thank you :D
How do you create a rond mouse in the animation ?
Recording in the Adobe XD preview on Mac changes the cursor
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.
loved it
TY Caler Edwards. You are my baby.
nice!
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...
Was the animation made in AE!?
Rotato (search on google)
This was used in the North Island College educational video 2023-24
Awesome
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.
You can actually watch this from his older videos to get started from scratch:
ua-cam.com/video/0KgUo7lMo_g/v-deo.html
If you're just beginning, I'd recommend this video too:
ua-cam.com/video/CnfXJ2qjv5I/v-deo.html
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.
Nice
Need more videos, in depth...
dashboard design
cool video
Cool thing