Using Component States in Adobe XD | App Menu Design & Prototype Tutorial

Поділитися
Вставка
  • Опубліковано 24 гру 2024

КОМЕНТАРІ • 222

  • @CalerEdwards
    @CalerEdwards  5 років тому +81

    Leave a like if you enjoyed the video! Want more Component Tutorials?

    • @GriNAME
      @GriNAME 5 років тому +1

      Absolutely!

    • @fahimaakter4082
      @fahimaakter4082 4 роки тому

      yesssssssssssssss....!!!!!!!!

    • @ayaageeba7550
      @ayaageeba7550 4 роки тому

      yesssssssssssss

    • @racereview1679
      @racereview1679 4 роки тому +1

      Bro. How did you make that intro with the UI project onto an iphone??!! so sick!

    • @aminexpert
      @aminexpert 4 роки тому

      Sure, already did good one. Waiting for more amazing work

  • @OwenModamwen
    @OwenModamwen 5 років тому +3

    I got started in design watching your tutorials two years ago. I’m really happy to see you’re still at it and still consistent.

  • @4988raja
    @4988raja 3 роки тому

    Booommmm!!! This is heaven on earth… made my understanding so much easier as I was cracking a though method earlier!

  • @NadaAlsibahi
    @NadaAlsibahi Рік тому

    I was browsing for the past couple of days to animate similar stats for tab components and was frustrated by not finding a solution. Finally, found it here (Wohooo) This is BRILLIANT!!! and easy demonstration to follow. Thank you so much!!

  • @pietropiga1079
    @pietropiga1079 4 роки тому +14

    Just a word, when there are no other words needed: INSPIRING. You are INSPIRING. Thank you, Caler. Really, your works require a very low level of expertise to be executed. Thanks to you I'm not just approaching XD, but I'm definitely learning it.

  • @Michael-Martell
    @Michael-Martell 4 роки тому

    This was the video I needed! I watched about a dozen videos and the step by step nature of your video in regards to the component states just gave me the biggest sigh of joy and relief! a lot of the other videos skipped over it. Thank you!

  • @ganeshnagarkar8574
    @ganeshnagarkar8574 4 роки тому +3

    Will love to see how you build the entire website ,how you define components and all

  • @FreshGuava161
    @FreshGuava161 3 роки тому

    Amazing Video! Your voice and comments are so refreshing. It was such an enjoyable experience to follow. It's is so refreshing. I really got a thing for XD after this video. Thanks

  • @Mr-xo3id
    @Mr-xo3id 2 роки тому

    Love the video i made it had fun making it and seeing the majic while playing animation

  • @nafun123
    @nafun123 2 роки тому

    Exactly what I needed. Thanks!

  • @mirhasyed4518
    @mirhasyed4518 2 роки тому

    i usually don' t comment but this video was just amazing thanks!

  • @chandershekharluhaniwal2686
    @chandershekharluhaniwal2686 4 роки тому +1

    Hey Caler, Thanks for the video on component state it really did help me understand the concept and it's reduces copy of my art boards for showing animations and size of a file. I Really appreciate it.

  • @quynhanhnguyen2135
    @quynhanhnguyen2135 4 роки тому

    your videos helped me a lot in my mobile app project, thanks!

  • @dans1522
    @dans1522 4 роки тому

    Amazing! Best XD vids I've seen on youtube.

  • @amirtharakul587
    @amirtharakul587 4 роки тому

    Awesome... I really love ... This idea...
    pls Make more with components...

  • @robinjansam9161
    @robinjansam9161 3 роки тому

    How do you calculate the spacing in pixels between text/icons?

  • @byibrahimbozan8286
    @byibrahimbozan8286 3 роки тому

    Thank you so much! That was perfect

  • @srikanthgubba
    @srikanthgubba 3 роки тому

    Hello Caler,
    It is a very good explanation example with each one point, thank you very much for your tutorials. very helpful to starter Xders... next time i will watch every Tuesday and Thursday from this channel..

  • @MohammedShoaib7890
    @MohammedShoaib7890 3 роки тому

    Thanks, Keep up the good work

  • @manojsharmamanish2040
    @manojsharmamanish2040 4 роки тому

    Your Video Helped me to create the first ever component of mine ....... A great learning from that ...... Thanks for the videos mate

  • @kux_music
    @kux_music Рік тому

    liebe deine Videos!

  • @GriNAME
    @GriNAME 5 років тому +5

    It's wonderful! Thanks man!

  • @richtechzone3614
    @richtechzone3614 2 роки тому

    Worth every like and share. 💯💯💯

  • @NOPerative
    @NOPerative 4 роки тому

    Beautiful work.
    Excellent treatment too.

  • @IsZambada
    @IsZambada 4 роки тому +1

    That helps a lot, thank you very much

  • @AhmedAdel-fj2un
    @AhmedAdel-fj2un 3 роки тому

    thx man i love you and continue

  • @iamthemranonymous
    @iamthemranonymous 4 роки тому

    That twas freaking awesome! Thank you so much!

  • @PiyalKundu
    @PiyalKundu 3 роки тому

    Great tutorial. Is it possible to get same effect on hover. Same thing on hover not working.

  • @Dezart
    @Dezart 5 років тому

    This is really dope Caler. I am really impressed. Awesome work.

  • @rajsubramaniam7973
    @rajsubramaniam7973 4 роки тому

    This is a great tutorial! Please share how you made the introduction animation of the mobile moving in 3D motion. It’s awesome.

  • @meghanakankara2883
    @meghanakankara2883 4 роки тому

    Thank you so much for making this tutorial I can only imagine how hard it must be to make such awesome videos😊😊😊

  • @t14168
    @t14168 4 роки тому +1

    how you added the cards at the end. I can't find any other videos in the playlist explaining it, do a video on how you did that. BTW this video is awesome.

  • @eyejacker
    @eyejacker 4 роки тому

    Thanks for a great video!! Wondering how you made the cards pop out with the feed button at the end of the video.

  • @MrJoker-ze6bb
    @MrJoker-ze6bb 3 роки тому

    How did you make that demo video for the design?btw nice video

  • @sarahghazi5539
    @sarahghazi5539 3 роки тому

    Can you please show how you did that blank card sliding in? Can't find it anywhere

  • @shyamalchty
    @shyamalchty 2 роки тому

    Great Tutorial

  • @Tim--3573
    @Tim--3573 4 роки тому +1

    Can you please add page transitions as well?
    Awesome and different tutorial as always

  • @Ammad.nadeem
    @Ammad.nadeem 2 роки тому

    how did you showcase this prototype in an animated mockup? Looks amazing!

  • @snowphiakim2965
    @snowphiakim2965 3 роки тому

    definitely thumbs up!!! THX

  • @tutastefan1806
    @tutastefan1806 3 роки тому +2

    Nice tutorial! I have a question. How can you go to another artboard/page if "tap" interaction is already set on component state? Thank you!

    • @certifiedmadman7818
      @certifiedmadman7818 Рік тому

      that's what I'm looking for, tapping on each on of this component is supposed to take u to another page, is it doable ?

  • @polopatrick9042
    @polopatrick9042 4 роки тому +3

    Can you do a tutorial please for 11:22 (the animation) 🥺🥺🥺

    • @uxwithrobin
      @uxwithrobin 3 роки тому +1

      You can make that animation using prototype and then place that video (screen record ) in mockup in any video editing tools ❤️

    • @iffiest.
      @iffiest. 3 роки тому

      @@uxwithrobin thats not what he meant, you probably referencing to the outro with phone mockup

  • @u.x.i.e2194
    @u.x.i.e2194 4 роки тому +1

    Thanks your video!!! its helpful to me
    but i have a question:
    How can i know what distance should i catch

  • @siddheshdas756
    @siddheshdas756 5 років тому +4

    hey hi can u explain how you added that blankcards

  • @vivekvaghasiya2750
    @vivekvaghasiya2750 5 років тому

    Very helpful tutorial. Thanks.

  • @Naseem328
    @Naseem328 4 роки тому +2

    Awesome tutorial man! just a quick question, how did you get the animation for the part @11:50mins where the components show inside the animated phone? Any feed back would be greatly appreciated, thank you and keep up the great content!

    • @filthefil
      @filthefil 2 роки тому

      In case you still havent figured it out, it's done in AE

    • @Zer01-f6s
      @Zer01-f6s 2 роки тому

      @@filthefil Could you please explain further? :(

  • @3dviveks
    @3dviveks 3 роки тому

    Thanks, Caler!

    • @CalerEdwards
      @CalerEdwards  3 роки тому

      You bet!

    • @3dviveks
      @3dviveks 3 роки тому

      @@CalerEdwards just tried it's awesome 😍

  • @AL3XO-1865
    @AL3XO-1865 4 роки тому +1

    How do you produce this visual stuff in 0:00-0:30? I would like learn it. It looks so fancy. Please let me know @Caler Edwards

  • @3dviveks
    @3dviveks 3 роки тому

    @11:22 Hi Caler, Please create a tutorial on how to do that. I tried that but failed.

  • @chamalpriyankara8023
    @chamalpriyankara8023 3 роки тому

    Thank you bro❤️🤜

  • @elijahmbang2728
    @elijahmbang2728 3 роки тому

    Thanks alot for your help🙏🙏

  • @MrConway007
    @MrConway007 4 роки тому +2

    Hey Caler, How do you get micro nested hover states to work inside bigger parent hover states?

  • @cultofcrypto6724
    @cultofcrypto6724 5 років тому +2

    I'd love to see a tutorial on your presentation renders. These are incredible.

    • @CalerEdwards
      @CalerEdwards  5 років тому +1

      Here you go: ua-cam.com/video/BVSwDjDO1E0/v-deo.html :D

  • @tressC
    @tressC 4 роки тому

    Hi Caler! This may sound silly, but I'm trying to figure out how you added the cards at the end. I can't find any other videos in the playlist explaining the same. Please guide me on how to add cards as an additional component. BTW, this video was very helpful and easy to follow..thank you.

  • @viviaenc8828
    @viviaenc8828 4 роки тому

    Can you make a video that shows how u take it even further to add in autoanimation like the blank cards sliding in with the menu moving? thank u!!!

  • @alejandramaldonadopena8460
    @alejandramaldonadopena8460 3 роки тому +2

    Thanks Caler, this is so helpful!! I really enjoyed, but i have a problem... i tried to animate the states following your instructions but it doesn't give me the option to select the state, only the layer.

  • @photoshopmania6613
    @photoshopmania6613 3 роки тому

    thank you its very helpful thanks again 😍😍

  • @pz9910
    @pz9910 5 років тому +1

    it's so helpful! thank you! and i want to know how to do the opening animation which's going to be different angles.

  • @calvinschmidt2715
    @calvinschmidt2715 4 роки тому

    Working on a similar interaction, too bad you have to do the links for each state. Hope they make this easier in the further, by letting you keep the same links when you make a new state.

  • @ameraibrahim9535
    @ameraibrahim9535 5 років тому

    Thanks for the tutorial Caler! Really appreciate it. :D

  • @Droidates
    @Droidates 4 роки тому +1

    How to show card on tap on one item you do at 11:23

  • @ryanburch6308
    @ryanburch6308 4 роки тому

    Great video. What software are you using in your video’s intro?
    I need this for my portfolio. The phone is dancing around & really adds to the effect?

  • @Mrcabletwitch
    @Mrcabletwitch 4 роки тому +1

    can you make a video on how to do that @11:28 or anyone can show me? TY!

  • @walidhisham7241
    @walidhisham7241 5 років тому

    First thanks you for your help to learn more .... and plz plz do more tutorials about component

  • @mubsharamin
    @mubsharamin 5 років тому

    Nice informative video! Please tell me how you added the mobile animation with a rounded corners screen?

    • @CalerEdwards
      @CalerEdwards  5 років тому

      Thanks! If you are talking about the intro with the phone mockup there is a tutorial here: ua-cam.com/video/BVSwDjDO1E0/v-deo.html
      If you are referring to something else let me know and I will do what I can to help :D

  • @mkbfhd
    @mkbfhd 5 років тому

    Thanks, it's really helping me!

  • @Youtube-Channel1
    @Youtube-Channel1 5 років тому +2

    How did you make the intro video animation? Can you please make a tutorial?

    • @CalerEdwards
      @CalerEdwards  5 років тому +1

      I have a video on the tool here: ua-cam.com/video/BVSwDjDO1E0/v-deo.html
      It is a mac only program unfortunately.

  • @hassanhamdy4698
    @hassanhamdy4698 4 роки тому

    great work ❤ wanna ask about the intro
    what is the software you made it with??!

  • @andreatriani
    @andreatriani 4 роки тому

    How can I present my app as you do at the beginning of the video with the iPhone frame and the round as the finger?

  • @ADahmed
    @ADahmed 5 років тому +3

    How do you convert the prototype to Android Studio XML/Java files?

  • @fluffymaverick
    @fluffymaverick 2 роки тому

    Hi is there any way in which prototyping from default state, all other state will automatically inherit from it? Like I like much having to connect each artboard in every component state. Thanks .

  • @billenmedia
    @billenmedia 4 роки тому

    Thanks for the amazing tutorial Caler Edwards. Still waiting how to prototype the cards you showed around 11:29 minute.

  • @hasnainkhalid261
    @hasnainkhalid261 5 років тому

    I appreciate your efforts.was curious to know have you stop doing design to code video?

    • @CalerEdwards
      @CalerEdwards  5 років тому +1

      I put them on hold for a bit there, but I am working on some stuff I will share soon :D

  • @SemageNamalSurendra
    @SemageNamalSurendra 5 років тому

    Excellent explanation sir 😘👌

  • @jeanthewebmachine
    @jeanthewebmachine 3 роки тому

    How did you make your video intro ?

  • @nitrotech9701
    @nitrotech9701 4 роки тому

    useful content. Thank you.

  • @jehadalsammak7406
    @jehadalsammak7406 3 роки тому

    Great but how do I navigate between pages?

  • @kapilgholap8735
    @kapilgholap8735 3 роки тому

    Love it!

  • @simonschleicher8857
    @simonschleicher8857 4 роки тому

    Is it possible that these navigation buttons could pull and display the information of another text field, lets say a number that is written somewhere else on the artboard?

  • @rebekas9808
    @rebekas9808 2 роки тому

    Does anyone know how I would get it to transition to another board while the menu has this effect?

  • @ChristopherShawnPike
    @ChristopherShawnPike 4 роки тому

    Huge huge huge thumbs UP!!!

  • @bartek_rybinski
    @bartek_rybinski 5 років тому

    Great vid, as always! :)

  • @armm8919
    @armm8919 3 роки тому

    What's that 3D phone Mockup website you used for this video? I had it bookmarked but somehow lost it :/

  • @vivekpolara585
    @vivekpolara585 4 роки тому

    very nice animation

  • @the_slidemaster
    @the_slidemaster 3 роки тому

    Amazing.. 👌👏

  • @fractalelement857
    @fractalelement857 4 роки тому

    Where did you animate that 3d phone mockup? AE ,c4d?

  • @Lzalxndr
    @Lzalxndr 4 роки тому +1

    Hi guys, anyone here can tell me how Caler makes that video intro? Which program is used to make that presentation?

    • @CalerEdwards
      @CalerEdwards  4 роки тому

      It is a program called Rotato. Here is a video I have showcasing it: ua-cam.com/video/BVSwDjDO1E0/v-deo.html

  • @MACH_SDQ
    @MACH_SDQ 5 років тому

    This very gooooood and tricky !!!!!

  • @md.anikulislam4844
    @md.anikulislam4844 4 роки тому

    which software do you use for video animation?

  • @emilricardo728
    @emilricardo728 4 роки тому

    I have a problem with the buttons that are resized, in the hover state they not only take the background color, but also take the width of the parent component, this does not work for me because I must resize the width of the buttons in all their states. I explain?

  • @cb9585
    @cb9585 3 роки тому

    Am I missing something? I have downloaded a couple of your project files, in order to follow along, and neither of them seems to include components, colours, etc. Please advise.

  • @4988raja
    @4988raja 3 роки тому

    so beautiful

  • @cyberhrc
    @cyberhrc 2 роки тому

    Nice! Tho link to this project is not working. Its 33 kb empty artboard :(

  • @kurtcameron7562
    @kurtcameron7562 3 роки тому

    If i'm trying to move an image on the artboard for a new component state, and it's also affecting the default state, what am I doing wrong?

  • @davidchriss9618
    @davidchriss9618 4 роки тому +1

    I Have a question bro can you help me if you don mind?
    I have a video WordPress site where I post videos but most video are embeded not uploaded from the site I would like to create an App with Adobe XD and connect to my site and when I post a video I would like a video to be posted too in the App with the App format not the Web format.
    Is that Possible brother?

  • @shubhamgoel3318
    @shubhamgoel3318 3 роки тому

    Is this feature ain't available in windows?

  • @AI3Dorinte
    @AI3Dorinte 3 роки тому

    thank you!

  • @jer-
    @jer- 5 років тому

    Really helpful, thank you!

  • @krishnakabra1662
    @krishnakabra1662 4 роки тому +1

    Hi, any reference on how can these type of prototypes be implemented to actul design. I have been looking for the same over the internet, but couldn't find proper solution. Thank you.

  • @siddharthmalpath1817
    @siddharthmalpath1817 4 роки тому

    Hey caler, firstly I love your channel. The best channel coz is the channel where all our doubts are cleared. But im struggling with the concepts of components; it seems a bit tricky and out of mind-stuff. Could you please help me?

  • @AllanLeonardJr
    @AllanLeonardJr 4 роки тому

    Wow, that's sweet!