Navigation using Components in Adobe XD | Design & Prototype Tutorial

Поділитися
Вставка

КОМЕНТАРІ • 70

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

    Don't forget to leave a like if you enjoyed the video! Also what tutorial should I make next?

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

    U are a great teacher I search your course from Udemy but just only 1 course i find. Thanks for this amazing tutorial.I spend my stay home with your tutorial.

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

    Great stuff, visually very appealing and strong tutorial content - because of the general design theme I would mention that your hover state is a bit short on contrast

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

    I am happy to be a subscriber to your channel. Love each and every tutorial of yours. A learner like me will be perfect in no time with the method you teach. Perfect with measure, spacing, colour, layers and everything. God bless u have a good day. Love from India

  • @itsmeqq
    @itsmeqq 7 місяців тому

    This is amazing! Thank you so much

  • @ms.a4455
    @ms.a4455 4 роки тому

    Thank you for this tutorial, Caleb😊 could you help with how your animated the circular cursor in XD?

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

    I learned a lot. Thank you so much!

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

    Awesome tutorial as always. One of the best Adobe XD Channels out there

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

    Thanks for the tutorial. However, I am super stumped on how to create the drop down navigation for the rest (Resources, Blog, FAQs). Because this Nav Full has been turned into a component, I CANNOT add more things under the layer. Any pointers? Or did I miss anything? Thanks!

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

      That'a true. I've been doing the same thing on my current project but to no avail. Overlapping components in Adobe XD won't let me hove or toggle another drop down for the next tab. I The workaround that I fount out is to trigger an overlay instead. Any solution for this Caler? Thank you!

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

    I hope that I have time to actually do prototypes in my current job :( Your tutorials are awesome.

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

    Great content, amazing carisma, perfect format and above par teaching skills. And, of course, very nice design taste. I'm a big fan!

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

    Duuuuddeee, I love you! lol Thank you for this! Was trying to find a tutorial for this. new to XD. **Subbed**

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

      Same here, really a great course that desearved a *Sub* 👍

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

    Love you bro

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

    Great job bro keep up the good work, thanks

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

    What is your opinion on the workflow for these states and animations? To me it feels repetitive for most of the time. Changing the text, shape or other element for every state. I haven't tried doing the same in other programs. So my only reference is XD.

  • @g30rg3-c5
    @g30rg3-c5 3 роки тому

    Awesome tutorial! Not sure about going to this extent in Xd. Unless you are part of a big agency I would say this part of the website dev should be done in the actual platform... or am I wrong?

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

    If the nav link is a component whit his hover state can it trigger the animation with the tap?

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

    Looks so hot in terms of design!

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

    Love your tutorial's great work. Your voice is so freaking awesome!

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

    Great video as always👌 Waiting for design and code series.

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

    Amazing tutorial. You saved a lot of time for me

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

    Can you make a tutorial on sideways cards sliding?

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

    good tutorial bro thank u

  • @algertp.3197
    @algertp.3197 Рік тому

    Great work and beautyfull animation, But can you make a video on how to apply this in Wordpress with elementor.. Thnx

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

    Thumbs up! Thanks for the great video. Like watching your videos on XD. Gives me some new inspirations and you're very good in explanations. Keep up your hard work! ;)

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

    I always waiting for your video. :D

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

    Very good!

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

    Great tutorial. One thing I’ve been struggling to achieve is doing this same effect but with a hover nav instead of a tap. So essentially a hover within a hover. Any ideas?

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

      hmmm. I have not tried it to see if its possible to pull off. I will have to test and thank you:D

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

    how do u make the animation on the begging of video?

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

    Please help after setting up cards to courses only the first card's hover effect works

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

    Good Teaching Method Sir Great

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

    What tool is used to make this video

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

    Hy Caler, you are excellent.....

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

    Love the video Caler. Where do you draw your design inspiration from? Just from browsing sites like Dribbble or do you have another method? cheers!

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

      At the moment Dribbble is probably it :D

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

    Thank you very much!

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

    How do I leave the project ready, active with web functions?

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

    Great tutorial!! ✨

  • @over.9334
    @over.9334 5 років тому

    Great work!)

  • @SandipKumar-og6xm
    @SandipKumar-og6xm 4 роки тому +1

    impressive

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

    that was very helpfull

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

    thank you so much to share your knowledge with us . i have learned a lot in web designing with your courses. 2^1000 like for you ;)

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

    mine says there was an error opening the file. error code:86

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

    Great, but how the heck do you convert this to an actual website? Will coders be able to replicate this? If not, what's the use of having a fancy prototype and no website? We will be setting up the client for disappointment.

    • @g30rg3-c5
      @g30rg3-c5 3 роки тому

      My exact thought! Adobe seem to focus on big agencies not the micro teams - Frustrating!

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

    I think you could change icons by simply dragging new one over another.

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

      Yes that is another way to do it. I had my icons inside of a hidden square that I usually use for spacing. That was causing issues for the tutorial, so i just replaced them :D

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

      Thank you for these nice and useful tutorials, especially for the prepared project files. This makes easy to follow.

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

      @@CalerEdwards 3

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

    Great

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

    Make a code video of this!

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

      I don't have a code video planned for it, but I have had a lot of people asking for code tutorials lately. I will have some videos coming up soon that you might like ;D

  • @RANA-ug5sm
    @RANA-ug5sm 4 роки тому

    wow

  • @mohammedsajid-
    @mohammedsajid- 2 роки тому +1

    So your telling me that i should change the text content in all the states in all the instances whats point of it being a component then we could just make different variations with all the possible states if we literally have to change even the text in all the states
    XD is absolute sh*t
    Figma is so much better you don't have to do all this extra stuff