How to use components in Adobe Xd | tutorial with examples

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

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

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

    In my 5years of using RUclips i've never commented on anybody's video but if am going to comment am glad its your video
    This video is a life saver thank you so much

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

      Awh thank you!! That means a lot :)

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

    you're a lifesaver. I've been trying to make working components for an embarrassingly long time. you're fantastic. thank you

  • @Pndchris
    @Pndchris 2 года назад +7

    Simple, clear, nice examples and straight to the point. Great job Maddy

  • @kate-lynnseverino2442
    @kate-lynnseverino2442 Год назад +2

    Wow, I loved this. I am dipping my feet in the Adobe XD world and would love to learn more about it. Your videos are so easy to follow. Please make more using this design tool-so valuable. Thanks for sharing, Maddy!

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

    Thanks Maddy and to your soothing voice while teaching. This would really help me.

  • @TheUsworldwide
    @TheUsworldwide 2 месяца назад

    Dear Maddy
    i just discovered this channel
    you are amazing!
    thank you

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

    Refreshing to see a tutorial that gets straight to the point

  • @brnrmr_
    @brnrmr_ 3 года назад +6

    That's what I love about XD it's so smooth and easy when it comes to interactions!
    Good video as always Maddy, thank you for sharing!

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

    Probably the best channel for early-stage designers

    • @maddybeardUX
      @maddybeardUX  3 года назад +1

      Wow thank you so much! :)

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

      @@maddybeardUX Thank You!

  • @TheRocky2006
    @TheRocky2006 3 года назад +9

    very useful for the XD learners, really appreciate your effort on this!

  • @aleksandrawawrzyniak8979
    @aleksandrawawrzyniak8979 2 года назад +1

    Thank you Maddy! The tutorial is super clear and you are so pleasant to listen to :)

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

    You are very clear and calm. It's just what my learning mind needed. Thank you.

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

    Without you, my soft wouldn't be possible.

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

    Thank you Maddy. Love your energy! 💚🌻

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

    Thanks for making this! Loved watching it, keep it up

  • @abdulrahmanal-dubaili3873
    @abdulrahmanal-dubaili3873 2 года назад

    very beauty and very smoothly .. thanks

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

    Thank you so much for creating this video Maddy!

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

    super underrated tutorial. good stuffs!

  • @mingsirakowit3316
    @mingsirakowit3316 3 года назад +1

    Thank you for your tutorials :) very helpful and well explained

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

    Thanks. your videos are of great help to me as I am transitioning fron figma to XD as my organisation uses that.

  • @jameshofton
    @jameshofton 2 года назад +1

    Very good, thanks for making a great tutorial. So well explained

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

    Very very nice manner of telling. Thank you Maddy. Good luck.

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

    Thanks alot, I love the simplicity.. I subscribed

  • @sashad.9779
    @sashad.9779 2 года назад

    oh my god this was so helpfullll and easy to understand thanks

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

    love your tutorials

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

    Thank you so much! I'm new to XD and glad I found your channel! Great explanations!

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

    HI maddy Just started learning XD last week! This component feature is very cool, exactly what i need and you explained it very well!! Also I just learned from your video about a billion cool things all in one short and sweet video!!! This will keep me out of trouble ( or in trouble??) for some time!

    • @maddybeardUX
      @maddybeardUX  3 года назад +1

      Hi Dave! Thank you, I'm SO glad it was helpful!

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

    Very useful and well explained ! Thank you so much for creating this content.

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

    Great tutorial! Thanks a bunch!

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

    Thx so much for precisely explaining it to us in your way. Can't stress enough how good your precise style is for explaining. I'm looking forward to learn a lot from you

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

      Wow, thank you! That really means a lot :)

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

    Love your videos Maddy.. Thanks

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

    That was great! Thank you !

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

    Thank you so much you really help me :)

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

    Nice video, it works!

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

    Helped a lot! Thanks!

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

    This is a great informative vid with great explanations. Merging and subtracting shapes would have worked better for the scan button at 10:23. What font is "scan"?

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

    Thank you, it was very helpful!

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

    Please keep on making such good videos

  • @nishanthjeevanantham6671
    @nishanthjeevanantham6671 11 месяцев назад

    nice buddy ,very useful

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

    Great job Maddy

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

    Very helpful in definitely subscribing

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

    thank you. Really usefull

  • @arnegovaerts8822
    @arnegovaerts8822 10 месяцев назад

    Hi Maddy, thanks for your great videos! As a beginner I struggle with one thing, once I've created a component, how do I add text or other stuff in general to it afterwards? Thank you and best of luck 🖖

    • @maddybeardUX
      @maddybeardUX  9 месяцев назад

      You’ll have to do that on the main component level! And then if you want to disable anything on an instance, you can do that either by hiding it on the instance level or by creating an “on/off” Boolean variant which lets you show and hide different elements within a component using a toggle switch :)

    • @arnegovaerts8822
      @arnegovaerts8822 9 месяцев назад

      You are awesome for taking the time for this clear answer

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

    Great tutorial

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

    As always, everything is super. Waiting for new cheats from your side

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

    Thank you for this video! Such great information. What sort of website platforms do you use to make these designs? I never know if people are doing everything with coding or if there's a platform to easily transport these types of projects/website designs.

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

      Hey! So for websites I usually build them in Webflow, but when it comes to my app design work, I’m always working with developers who actually code them :)

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

      @@maddybeardUX You should check out Pinegrow!

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

    Thank u for this ❤❤

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

    Thanx...Really helpful....GBU

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

    Nice job!

  • @Wrk.s
    @Wrk.s 2 года назад

    So hopeful. Easily digestable.

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

    Well done.
    no judgment. :)

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

    thank you really much

  • @MM-jr5sr
    @MM-jr5sr Год назад

    Awsome!

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

    Thank you :)

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

    This was great,But i was waiting for the second part to know how to let all the components move up as well when the first item is deleted, even if it was second, 3rd or 4th.

  • @IT-cl2pd
    @IT-cl2pd 2 года назад

    Can we link any of these components (buttons, toggles..etc) hyperlinks like in designing a website scenario, or should we just link them in prototype mode, then export everything using Web Export plugin?
    Thank you so much, and keep it up 👍👍

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

    THIS IS COOL

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

    Thank you Maddy!

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

    Useful❤

  • @zoeroberts2991
    @zoeroberts2991 3 года назад +1

    So helpful! Thank you!!!

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

      just use enter between sentences

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

    Nice man ty

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

    amazing video , follow you from Palestine

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

    Thanks good vid

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

    Hi there, thanks for the video. I have a main component but am trying to insert a new element into one of the states - is this possible? I am really struggling to do this. Any help would be greatly apprecitaed! thanks!

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

    thanks for this girl!

  • @Martina-rc1vf
    @Martina-rc1vf 2 года назад

    thanks for the video! :) I have a question when I create a toggle: how can I link the two buttons with images that are activated depending on the button choice?

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

    This was a great video on helping me understand components and prototyping states, but how do you personally account for the notch in the screen of modern phones in Adobe XD? I made a test design and tried it on my phone, and the notch was actually in the way of the drop down menu I was creating.

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

      Yes, you should always account for the notch! Scroll to the end of this post to see the guides you can add to your artboards to make sure you’re staying within the safe area with your designs :) (TLDR it’s 44 px on top for the notch)
      instagram.com/p/CP5wS76gMji/?

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

    Thank you

  • @mywrath2421
    @mywrath2421 3 года назад +1

    nice cursor control

  • @AdarshSingh-gz2pf
    @AdarshSingh-gz2pf 3 года назад

    This is really helpful. Thank you so much for this tutorial.❤️🙏🏻🙏🏻

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

    SUBSCRIBED!!!!!

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

    ty

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

    Thank youuuuuuuuuuuuuuuuu

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

    is it possible you can do a video on MVP ? LOVE YOUR VIDEOS BTW

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

      I'll definitely consider that! Thanks!

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

    I tried doing some interactions in another design tool and it was just frustrating. Adobe XD all the way!

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

    i was looking for ux ui roles , most of them ask for adobe creative suite knowledge , i am good with ui design tools but not with adobe suite.. when and what do you amazing ui designers use suite for ? whats are your main tasks ui designers do on suite ...thanks a lot ..

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

      In my experience, as long as you know the basics of ANY ui design tool (Xd, Figma, sketch) then you’re totally fine when it comes to programs!! Don’t not apply just because the job posting says Adobe suite :) They’re all so similar, you’ll learn the company’s tool of choice as you go!

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

      But to answer your other question, I use Adobe suite because I do lots of things other than ui/ux. I edit photos, videos, design logos, etc etc. :)

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

      @@maddybeardUX thanks a lot Maddy

  • @dinnnnnnnnnnnn
    @dinnnnnnnnnnnn 10 месяцев назад

    XD is gone, and I spent a bunch of time learning it..
    trying Lunacy instead, but I still need some time to get used to it😶‍🌫

    • @maddybeardUX
      @maddybeardUX  10 месяцев назад

      Yeah, I use Figma now. Never heard of Lunacy! Might have to check it out!

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

    You can choose for one of the above gifts

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

    I just want to make projects just like you made on Behance. I just want to be like a UX designer like you're.

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

    Seems similar to a smart object in Photoshop.

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

    how did you add trash sign into component, I tried several times but didn't work

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

      First copy the trash icon, then click INTO the component. This may take a few clicks, or you can command/control click. THEN paste the icon in :) You can also use the layers panel to do this!

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

    My XD does not show “component master” option, what could it mean? Or what should I do? 🙊

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

      Command or control click on a component and then you should see an option that says "edit main component" :)

  • @k-r6465
    @k-r6465 Год назад

    great thank you beautiful

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

    Does Figma have something like this?

    • @maddybeardUX
      @maddybeardUX  2 года назад +1

      Yes!! Very very similar :)

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

      @@maddybeardUX Thank you

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

    +sub

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

    hey

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

    I hope everyone one else becos successful because I’m not

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

    Thank you this was very easy to follow and helped so much :)

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

    ty