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

[@CalerEdwards]

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

[@GriNAME]

Absolutely!

[@fahimaakter4082]

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

[@ayaageeba7550]

yesssssssssssss

[@racereview1679]

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

[@aminexpert]

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

[@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!!

[@OwenModamwen]

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.

[@pietropiga1079]

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]

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!

[@4988raja]

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

[@FreshGuava161]

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

[@ganeshnagarkar8574]

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

[@mirhasyed4518]

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

[@chandershekharluhaniwal2686]

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.

[@srikanthgubba]

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..

[@manojsharmamanish2040]

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

[@dans1522]

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

[@CalerEdwards]

Wow, thanks!

[@amirtharakul587]

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

[@quynhanhnguyen2135]

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

[@Mr-xo3id]

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

[@meghanakankara2883]

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

[@richtechzone3614]

Worth every like and share. 💯💯💯

[@nafun123]

Exactly what I needed. Thanks!

[@Dezart]

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

[@CalerEdwards]

Thank you :D

[@GriNAME]

It's wonderful! Thanks man!

[@MohammedShoaib7890]

Thanks, Keep up the good work

[@byibrahimbozan8286]

Thank you so much! That was perfect

[@NOPerative]

Beautiful work. Excellent treatment too.

[@3dviveks]

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

[@billenmedia]

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

[@iamthemranonymous]

That twas freaking awesome! Thank you so much!

[@kux_music]

liebe deine Videos!

[@IsZambada]

That helps a lot, thank you very much

[@rajsubramaniam7973]

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

[@AL3XO-1865]

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

[@achillemeyvis7890]

Yeah exactly was wondering this too!

[@photoshopmania6613]

thank you its very helpful thanks again 😍😍

[@CalerEdwards]

Happy to help!

[@walidhisham7241]

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

[@Tim--3573]

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

[@ameraibrahim9535]

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

[@CalerEdwards]

Glad to hear it :D

[@PiyalKundu]

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

[@AhmedAdel-fj2un]

thx man i love you and continue

[@Droidates]

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

[@cultofcrypto6724]

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

[@CalerEdwards]

Here you go: kzbin.info/www/bejne/eIe2qHegebRke5I :D

[@Mrcabletwitch]

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

[@sarahghazi5539]

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

[@shyamalchty]

Great Tutorial

[@polopatrick9042]

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

[@uxwithrobin]

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

[@iffiest.]

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

[@u.x.i.e2194]

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

[@SemageNamalSurendra]

Excellent explanation sir 😘👌

[@CalerEdwards]

Thank you :D

[@vivekvaghasiya2750]

Very helpful tutorial. Thanks.

[@chamalpriyankara8023]

Thank you bro❤️🤜

[@3dviveks]

Thanks, Caler!

[@CalerEdwards]

You bet!

[@3dviveks]

@@CalerEdwards just tried it's awesome 😍

[@elijahmbang2728]

Thanks alot for your help🙏🙏

[@snowphiakim2965]

definitely thumbs up!!! THX

[@ADahmed]

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

[@robinjansam9161]

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

[@Naseem328]

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]

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

[@Zer01-f6s]

@@filthefil Could you please explain further? :(

[@the_slidemaster]

Amazing.. 👌👏

[@t14168]

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.

[@viviaenc8828]

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!!!

[@siddharthmalpath1817]

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?

[@andreatriani]

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?

[@MrJoker-ze6bb]

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

[@fluffymaverick]

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 .

[@pz9910]

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

[@jeanthewebmachine]

How did you make your video intro ?

[@MrConway007]

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

[@siddheshdas756]

hey hi can u explain how you added that blankcards

[@siddhantkumar105]

Yes , can anyone tell ? How he implemented because I cant

[@igoralmeida8603]

yea, that's what i needed

[@mkbfhd]

Thanks, it's really helping me!

[@Ammad.nadeem]

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

[@tutastefan1806]

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]

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 ?

[@rebekas9808]

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

[@simonschleicher8857]

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?

[@eyejacker]

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

[@armm8919]

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

[@tressC]

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.

[@bartek_rybinski]

Great vid, as always! :)

[@CalerEdwards]

Thank you 😀

[@calvinschmidt2715]

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.

[@emilricardo728]

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?

[@hassanhamdy4698]

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

[@alejandramaldonadopena8460]

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.

[@md.anikulislam4844]

which software do you use for video animation?

[@fractalelement857]

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

[@kurtcameron7562]

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?

[@jehadalsammak7406]

Great but how do I navigate between pages?

[@nuralifmustofa1428]

great tutorial 👍

[@CalerEdwards]

Thanks :D

[@kapilgholap8735]

Love it!

[@jer-]

Really helpful, thank you!

[@CalerEdwards]

😃

[@raymondmichael4987]

This is amazing bro, just wow!!! How about developing it more, into destop view also with some dummy content. And one thing, can you code this or just invite some other channel to code it!? So far, thanks for the good explanation, you showed the power of XD for us who didn't explore it. Greetings from Tanzania 🇹🇿

[@CalerEdwards]

Thank you! probably wont code this one but I might have some stuff similar coming out. stay tuned :D

[@raymondmichael4987]

Caler Edwards, don't sweet it. Whatever you decide I'm always tuned to your channel, your my inspiration to keep my dreams always high. Greetings from Tanzania 🇹🇿

[@harshadkamble9730]

hello kindly please tell how we can fit this componet in mockup Mobile It would help me please

[@4988raja]

so beautiful

[@Lzalxndr]

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

[@CalerEdwards]

It is a program called Rotato. Here is a video I have showcasing it: kzbin.info/www/bejne/eIe2qHegebRke5I

[@nitrotech9701]

useful content. Thank you.

[@Youtube-Channel1]

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

[@CalerEdwards]

I have a video on the tool here: kzbin.info/www/bejne/eIe2qHegebRke5I It is a mac only program unfortunately.

[@MACH_SDQ]

This very gooooood and tricky !!!!!

[@cb9585]

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.

[@ChristopherShawnPike]

Huge huge huge thumbs UP!!!

[@mohamedayman5240]

I have a question.. how can i use it to move between pages .? Answer please

[@davidchriss9618]

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?

[@vivekpolara585]

very nice animation

[@sevnty8228]

does this workflow already work with the latest XD update? I think the way that component states works have changed...🤔

[@ganeshnagarkar8574]

Just superb

[@tosinezekiel8]

Cool tutorial..learn something Caler, how do you make your product intro video ?. What software, also Adobe XD? Expects your comment..

[@IRUSN4F]

What version of adobe xd is this? Why there's no components tab in my XD?

[@arvindnv1795]

yeah... tricked us lol