Navigation using Components in Adobe XD | Design & Prototype Tutorial

Поделиться
HTML-код
  • Опубликовано: 29 сен 2024

Комментарии • 70

  • @CalerEdwards
    @CalerEdwards  4 года назад +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.

  • @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

  • @ms.a4455
    @ms.a4455 3 года назад

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

  • @streetdancerwar
    @streetdancerwar 4 года назад

    I always waiting for your video. :D

  • @hattorizen
    @hattorizen 2 года назад +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!

  • @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

  • @daedae515
    @daedae515 2 года назад

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

  • @manuelaltieri5402
    @manuelaltieri5402 Год назад

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

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

  • @itsmeqq
    @itsmeqq 3 месяца назад

    This is amazing! Thank you so much

  • @DavinSane
    @DavinSane 2 года назад

    good tutorial bro thank u

  • @luman1109
    @luman1109 4 года назад +1

    Can you make a tutorial on sideways cards sliding?

  • @justinstraver24
    @justinstraver24 4 года назад +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.

  • @FirdavsiWebDev
    @FirdavsiWebDev 4 года назад +2

    Looks so hot in terms of design!

  • @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

  • @cssmonkey6193
    @cssmonkey6193 4 года назад +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* 👍

  • @nahidzaman8218
    @nahidzaman8218 3 года назад

    Hy Caler, you are excellent.....

  • @SandipKumar-og6xm
    @SandipKumar-og6xm 4 года назад +1

    impressive

  • @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?

  • @marcovalentini84
    @marcovalentini84 4 года назад +1

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

  • @ruthpadilla6945
    @ruthpadilla6945 4 года назад +1

    I learned a lot. Thank you so much!

  • @timb9360
    @timb9360 4 года назад

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

  • @zashee
    @zashee 3 года назад

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

  • @shakibuxd
    @shakibuxd 4 года назад +1

    Amazing tutorial. You saved a lot of time for me

  • @marwanhafez178
    @marwanhafez178 3 года назад

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

  • @ameereeo
    @ameereeo 3 года назад

    Love you bro

  • @douglashb
    @douglashb 4 года назад

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

  • @anshuaspirant1370
    @anshuaspirant1370 4 года назад

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

  • @fernandagioiosa987
    @fernandagioiosa987 4 года назад

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

  • @karenghazaryan1
    @karenghazaryan1 4 года назад +1

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

    • @CalerEdwards
      @CalerEdwards  4 года назад +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 4 года назад

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

    • @annisanovita1101
      @annisanovita1101 3 года назад

      @@CalerEdwards 3

  • @mohammadkhosrotabar8764
    @mohammadkhosrotabar8764 4 года назад

    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 ;)

  • @asadmehmood408
    @asadmehmood408 4 года назад

    Good Teaching Method Sir Great

  • @rajusam5
    @rajusam5 4 года назад

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

  • @shecar1
    @shecar1 4 года назад

    What tool is used to make this video

  • @sadiyamakrani3412
    @sadiyamakrani3412 2 года назад

    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

  • @kumarsamir1929
    @kumarsamir1929 4 года назад

    Great

  • @fabriciomachado1394
    @fabriciomachado1394 4 года назад

    Very good!

  • @RANA-ug5sm
    @RANA-ug5sm 4 года назад

    wow

  • @c-magi3147
    @c-magi3147 4 года назад

    that was very helpfull

  • @airbigj2323
    @airbigj2323 4 года назад

    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  4 года назад +1

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

  • @rickdegamer
    @rickdegamer 4 года назад +2

    Make a code video of this!

    • @CalerEdwards
      @CalerEdwards  4 года назад +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

  • @nazimbelli937
    @nazimbelli937 4 года назад

    Great job bro keep up the good work, thanks

  • @psybitcoin
    @psybitcoin 4 года назад

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

  • @arthurhovh9
    @arthurhovh9 4 года назад

    Thank you very much!

  • @over.9334
    @over.9334 4 года назад

    Great work!)

  • @AlbertoRodriguez-mw1jy
    @AlbertoRodriguez-mw1jy 4 года назад

    Great tutorial!! ✨

  • @Braden_Buchanan
    @Braden_Buchanan 4 года назад

    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  4 года назад

      At the moment Dribbble is probably it :D