Adobe XD Masterclass for Beginners (Updated 2023)

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 มิ.ย. 2024
  • Adobe XD is an awesome design tool for people who want to focus on UI Design, UX Design, Prototyping, Responsive Web Design and more. This master class will get you up and running with all basic and advanced features of Adobe XD... Remember to Subscribe goo.gl/6vCw64
    If you are just starting out with Adobe XD or UI Design/ Graphic Design Software in General, this tutorial should give you everything you need to design websites and apps in Adobe XD.
    🏆 //////////// Join my members community to get access to perks:
    You can get this starting and ending design file
    designchamps.io/
    👋 ////////// Join the Discord Server and meet other creatives
    / discord
    ------------------------------------------------------------------------------------
    🤝 //////////// My Courses, Templates, Free E-Books, & 1:1 Mentorship
    learn.jesseshowalter.com/
    👋 ////////// Follow me on Social
    Instagram: / iamjesseshow
    Twitter: / iamjesseshow
    📫 ////////// Sign up for my Monthly Newsletter
    www.jesseshowalter.com/newsletter
    ------------------------------------------------------------------------------------
    🖥️ ////////// I build most of my websites using Webflow
    webflow.grsm.io/1976712
    🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: fm.pxf.io/c/1372011/1347628/1...
    📸 ////////// The Equipment I use
    www.amazon.com/shop/jesseshow...
    00:00 Introduction
    00:35 UI Tour
    06:48 Artboards
    07:57 Pen Tool
    08:47 Shapes
    10:29 Pathfinder Tools
    10:54 Text Tools
    13:45 Styles & Assets
    18:04 Components
    20:04 Component States
    21:35 Responsive Resize
    24:52 Photos & Video
    27:22 Masks
    29:39 Repeat Grid
    32:01 Stacks & Padding
    34:43 Scroll Groups
    36:58 Prototyping
    41:28 Gestures & Actions
    42:42 Timed Triggers
    44:28 Plugins
    45:57 Sharing
    #adobexd #adobexdtutorial

ความคิดเห็น • 83

  • @davidelopezdiaz7580
    @davidelopezdiaz7580 ปีที่แล้ว +17

    thank you for remembering that adobe xd still exists and not just figma. thank you from the bottom of my heart.

    • @Six-px9ll
      @Six-px9ll 3 หลายเดือนก่อน

      oh how this comment dated fast 😅

    • @HareRamShahani
      @HareRamShahani 3 หลายเดือนก่อน

      Skk

  • @kadyultraviolet7042
    @kadyultraviolet7042 ปีที่แล้ว +9

    Great tutorial! I had some experiences in XD already, but your masterclass still taught me a lot. Would totally recommend to anyone who's interested in XD.

  • @sceptersax
    @sceptersax ปีที่แล้ว +23

    A very seamless explanation on several features that’s not boring or tedious. I managed to watch the whole thing when I wasn’t even intending to. Great class.

    • @jeanbbless5762
      @jeanbbless5762 7 หลายเดือนก่อน +1

      M BG r🎉🎉

  • @tim_longhurst
    @tim_longhurst ปีที่แล้ว +2

    Brill tutorial. I needed a reminder after having not used XD in a long while. This was perfect. Thanks.

  • @seanc9088
    @seanc9088 ปีที่แล้ว +3

    I learned on Figma, but the job I just landed uses XD. Thanks for this! Making the transition seems pretty simple now.

  • @kdbug379
    @kdbug379 6 หลายเดือนก่อน

    Great tutorial! Watching most tutorial videos on TH-cam, I get underwhelmed/overwhelmed within a matter of moments, but not here. Great pace that gives the basics we need to know in a logical order to solve a problem and create a product! No cognitive overload and no confusing explanations. 5 stars! haha

  • @garrhetsampson
    @garrhetsampson ปีที่แล้ว

    This was a great tutorial! Thank you!

  • @NeVdiii
    @NeVdiii ปีที่แล้ว +2

    I've had a lesson with my teacher a week ago about XD and your video came right after the lessons. I managed to watch it today and I can tell my teacher explained everything you did. I was really curious what would be the diffrences between you and my teacher but what I know now I can start really practicing. I prefer figma but knowing these 2 programs is always an advantage. Good video! :)

  • @user-sg8xs5ei6k
    @user-sg8xs5ei6k ปีที่แล้ว +2

    And this is what many are lacking, always some kind of a quick 1h overview tutorial after some 1-2 years is very important. Cause many dont understand that softwares get updated all the time but they still sticking to their old tutorials till these days.

  • @ladyj3474
    @ladyj3474 ปีที่แล้ว

    Thank you so much JS. Re: Responsive resize, I am converting a desktop size to mobile all text boxes must be converted to the auto width box, grouped then command shift option takes everything down, one piece at a time, quite a bit of work.

  • @tayloradams9320
    @tayloradams9320 ปีที่แล้ว

    Super helpful, thank you!

  • @jemsmoyo6339
    @jemsmoyo6339 ปีที่แล้ว

    Amazingly helpful video Jesse!

  • @colindante5164
    @colindante5164 ปีที่แล้ว

    An amazing tutorial. Thankyou so much ))))

  • @harrigkiouliver1223
    @harrigkiouliver1223 หลายเดือนก่อน

    Even though it is a bit fast for a beginner, this is a great tutorial!!!
    Thank you so much!
    Greetings from Greece!

  • @Maloempia
    @Maloempia ปีที่แล้ว

    Hi Jesse! Great video, thank you. Is there a more detailed video for the drag interaction? I can't figure out how to go back and forth..

  • @wvwnwwvnvwvnwvnw
    @wvwnwwvnvwvnwvnw ปีที่แล้ว +1

    AWESOME!!

  • @ketheesh5074
    @ketheesh5074 ปีที่แล้ว

    Greatttttttttt bro, thank you so much!

  • @changNoi1337
    @changNoi1337 ปีที่แล้ว

    Thanks a lot!!!

  • @unlovedrecords
    @unlovedrecords ปีที่แล้ว

    Dude! This tutorial is amazing. You just earned another Sub.

  • @suniljadhav1889
    @suniljadhav1889 ปีที่แล้ว

    Great update Tips...Bro....Hats off

  • @MoniqueMorel-dj7qj
    @MoniqueMorel-dj7qj หลายเดือนก่อน

    Very helpful, interesting and nice and quick!

  • @ModernGems_
    @ModernGems_ ปีที่แล้ว

    ❤ Thank you for the valuable advice on adobe xd!

  • @LeeLeeLoves
    @LeeLeeLoves ปีที่แล้ว +6

    Excellent video as always! Came at the perfect time for me, starting a new job next week and they use XD, not Figma! 😱
    Which do you find you use most and which do you prefer?

  • @blueviolin1
    @blueviolin1 7 หลายเดือนก่อน

    Hi Jesse, I like the way you emphasize at 12:27, I could concentrate better after that. Your tutorial is awesome :)

  • @mosesndombe2924
    @mosesndombe2924 7 หลายเดือนก่อน

    That was awesome explained it really simple and straight forward .was pretty much invested

  • @janinasaumer7695
    @janinasaumer7695 23 วันที่ผ่านมา

    Really great and helpful video :) Now it's easy to start prototyping!

  • @7r0u8l3
    @7r0u8l3 ปีที่แล้ว

    Great work sir. Thank you.

  • @qhairilsalim
    @qhairilsalim 9 หลายเดือนก่อน +2

    I know it's about a year already but I really like the way you explain things. I literally new to UIUX design and I wanna to get at least an exposure about adobe XD. turns out you did explain almost everything about the fundamental of adobe XD!!! thank you for this. I really learned a lot.

    • @JesseShowalter
      @JesseShowalter  8 หลายเดือนก่อน

      Thank you so so so much!!! 🔥💛

  • @mrtnuzzz
    @mrtnuzzz 10 หลายเดือนก่อน

    Great Video! Thanks!

  • @user-dd8bu6fe3b
    @user-dd8bu6fe3b ปีที่แล้ว

    thank you so much

  • @musvc
    @musvc หลายเดือนก่อน

    thank you for putting an effort to make this tutorial video, i wish you success in your life.

  • @patrikmedia
    @patrikmedia ปีที่แล้ว +18

    curious to know the relevance of XD in the coming future now that Adobe acquired Figma which has a much larger userbase.

    • @nataliegarner3164
      @nataliegarner3164 5 หลายเดือนก่อน

      The merger is no longer going ahead. But I think Adobe will still ditch XD which is sad. I don’t want to use Figma but I think we will all have to.

    • @patrikmedia
      @patrikmedia 5 หลายเดือนก่อน

      @@nataliegarner3164 competition is always better. either way, Figma is superior than XD in so many areas, so don't feel bad about it, you won't regret. no wonder why the vast majority of the industry uses Figma over Adobe.

  • @calvinlaughlin1429
    @calvinlaughlin1429 ปีที่แล้ว +1

    Hey Thanks Jesse for this video! It helped me out a lot. I'm trying to figure out when I should be using artboards and when I should use rectangles to create elements. Anybody have some advice?

  • @antfr1993
    @antfr1993 ปีที่แล้ว

    I'm practicing adobe xd recreating an instagram homepage for hw. I screenshot an art ig. Is there a way to select certain areas of an imported image? Maybe like how photoshop has the marquee tool or quick selection. If so, is there a way to select copy paste things that circular? Like profile pictures from a screenshot? I supposed I can just mask with the eclipse tool and use replicate. Hopefully my course is okay with that

  • @dddog9024
    @dddog9024 9 หลายเดือนก่อน +1

    Nice, Thank you

  • @jiva44
    @jiva44 ปีที่แล้ว

    Hi ! Thanks for the video. I have a problem in XD, can you help me ?
    In XD you can use design tokens especially for colors.
    For example I put for my button backround a color token called "blue-500". When I export my work, inspect my element on the web version I can find that my button backround have the value "blue-500" -> this is correct and normal.
    But when I'm working on my element directly in XD, I can't find the solution to display on my screen the information that the actual color of the element is linked with a color token.
    You can click-right and select "Show in active menu" but this is very terrible for my workflow. Do you know a XD plug-in or tips to do so ?
    Thanks for your answer and sorry for my bad english

  • @spencersindt6128
    @spencersindt6128 ปีที่แล้ว

    Great vid

  • @kavr
    @kavr ปีที่แล้ว +1

    Thanks Jesse, I wish I could keep using XD I love it, but I had to switch my gears to figma. Haven't looked back since

  • @Dogvibes1868
    @Dogvibes1868 26 วันที่ผ่านมา

    such a great tutorial, really awesome content and education! the poor sound quality made it very difficult for me to keep watching however. The plosives are so rough I feel like my ears are pounding. Wish you could have edited the sound more.

  • @stepchrist
    @stepchrist 8 หลายเดือนก่อน +1

    very good tutorial, thank you

    • @JesseShowalter
      @JesseShowalter  8 หลายเดือนก่อน

      Glad it was helpful!

  • @bariatricfood
    @bariatricfood 2 หลายเดือนก่อน

    Example files would be useful- if you have them in the group- its not obvious where they're located

  • @i_h.m.a.Rahman
    @i_h.m.a.Rahman 7 หลายเดือนก่อน

    great video

  • @senior-share
    @senior-share 9 หลายเดือนก่อน

    After completing the animation with xd, how do I deliver the image to the developer or convert the html, css, javascript, etc. for the image that the developer completed with xd to get the same animation made in xd?

  • @user-ct6tm2vq2m
    @user-ct6tm2vq2m 8 หลายเดือนก่อน

    really good

  • @RobertoVillaLobby
    @RobertoVillaLobby 9 วันที่ผ่านมา

    Hello, I've been a graphic designer for 10 years but trying to school myself into digital / UI designer. Would you say XD is as (or more) viable as Figma for UI design?

  • @Monkey85ft
    @Monkey85ft ปีที่แล้ว

    Can you also put in GIFs in XD?

  • @asdfg49515
    @asdfg49515 ปีที่แล้ว

    what to do if I can't see it on MacBook Air with M2 cheep 2023, and I need it for work?

  • @DocumentsForever
    @DocumentsForever 10 หลายเดือนก่อน

    LERGENDARY

  • @tylerknowles6128
    @tylerknowles6128 ปีที่แล้ว

    Fonts used for web or app development, I assume those fonts should be in web format??

  • @jazneo150
    @jazneo150 8 หลายเดือนก่อน +1

    Very Useful Video

  • @falkomatzler271
    @falkomatzler271 8 หลายเดือนก่อน +1

    Can you actually publish XD generated websites on private servers? Or is this just a layout and design tool and lacks the technical steps to upload the designed website?

  • @eloisabelchior2615
    @eloisabelchior2615 9 หลายเดือนก่อน +1

    You're a god.

    • @JesseShowalter
      @JesseShowalter  9 หลายเดือนก่อน

      If you want more in depth check out my new 30 day UI course 30dayui.com/

  • @floriantenerife
    @floriantenerife 8 หลายเดือนก่อน +1

    Very nice video, for me personally the background music is to much. I was taking my headphones of like 5 times to check if the radio is on or something else because I didn't knew where the music was coming from 😅

    • @JesseShowalter
      @JesseShowalter  8 หลายเดือนก่อน

      😂 so sorry friend!! Thanks for watching anyway!

  • @Tara-iu9ft
    @Tara-iu9ft 11 หลายเดือนก่อน

    would have been nice if you covered the library, good video though.

  • @SergeyGuslyar
    @SergeyGuslyar ปีที่แล้ว

    So, adobe bought figma and that next step? Wouldn't close adobe xd?

  • @hanenbouzoumita7374
    @hanenbouzoumita7374 ปีที่แล้ว

    please how to cut a web model in adobe XD?

  • @Shanavas80
    @Shanavas80 ปีที่แล้ว

    Great tutorial..... 13:00 Here is watching a Malayalam boy ;p (font name)...

  • @21bravemindset
    @21bravemindset 7 หลายเดือนก่อน

    So curious to be a professional i have little experience in html and CSS

  • @KMHasan
    @KMHasan 10 หลายเดือนก่อน

    Anything coming up for advanced level 🤔🤔

  • @user-xv3fs6lr9q
    @user-xv3fs6lr9q 9 หลายเดือนก่อน

    please how to download

  • @dariob.2547
    @dariob.2547 ปีที่แล้ว

    How do I do this with Adobe XD?
    th-cam.com/video/OQwstzYc0-Q/w-d-xo.html

  • @tuhinhossain9915
    @tuhinhossain9915 8 หลายเดือนก่อน

    Need Adobe XD Software. Please help me.

  • @lucindagoosen9373
    @lucindagoosen9373 8 หลายเดือนก่อน +1

    Watching that image warp like that , it was painful 🤣

  • @livegamist
    @livegamist 11 หลายเดือนก่อน +1

    Figma is more better than xd But I still learning it

  • @stuffrider8736
    @stuffrider8736 หลายเดือนก่อน

    What is malayalam MN
    MALAYALAM is an language

  • @user-gt7kb9kp3j
    @user-gt7kb9kp3j 19 วันที่ผ่านมา

    Eisai ligo baklavas

  • @escanorgod
    @escanorgod ปีที่แล้ว

    wait adobe bought figma so adobe xd gonna be dead or other way around

  • @gokhunyayla
    @gokhunyayla ปีที่แล้ว

    its not interactive, I don't find this kind of trainings useful. Also remove your face from the training video, its also annoying.