Adobe XD Masterclass for Beginners (Updated 2023)
Вставка
- Опубліковано 12 чер 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
thank you for remembering that adobe xd still exists and not just figma. thank you from the bottom of my heart.
oh how this comment dated fast 😅
Skk
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.
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.
M BG r🎉🎉
Brill tutorial. I needed a reminder after having not used XD in a long while. This was perfect. Thanks.
I learned on Figma, but the job I just landed uses XD. Thanks for this! Making the transition seems pretty simple now.
Great tutorial! Watching most tutorial videos on UA-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
This was a great tutorial! Thank you!
Really great and helpful video :) Now it's easy to start prototyping!
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! :)
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.
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.
Super helpful, thank you!
thank you for putting an effort to make this tutorial video, i wish you success in your life.
Amazingly helpful video Jesse!
An amazing tutorial. Thankyou so much ))))
Even though it is a bit fast for a beginner, this is a great tutorial!!!
Thank you so much!
Greetings from Greece!
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..
AWESOME!!
Greatttttttttt bro, thank you so much!
Thanks a lot!!!
Dude! This tutorial is amazing. You just earned another Sub.
Great update Tips...Bro....Hats off
❤ Thank you for the valuable advice on adobe xd!
Very helpful, interesting and nice and quick!
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?
Hi Jesse, I like the way you emphasize at 12:27, I could concentrate better after that. Your tutorial is awesome :)
That was awesome explained it really simple and straight forward .was pretty much invested
Great work sir. Thank you.
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.
Thank you so so so much!!! 🔥💛
Great Video! Thanks!
thank you so much
curious to know the relevance of XD in the coming future now that Adobe acquired Figma which has a much larger userbase.
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.
@@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.
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?
You use rectangle inside an artboard
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
Nice, Thank you
Thank you too!
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
Great vid
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
Why did you switch?
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.
very good tutorial, thank you
Glad it was helpful!
Example files would be useful- if you have them in the group- its not obvious where they're located
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?
great video
really good
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?
Can you also put in GIFs in XD?
what to do if I can't see it on MacBook Air with M2 cheep 2023, and I need it for work?
LERGENDARY
Fonts used for web or app development, I assume those fonts should be in web format??
Very Useful Video
Thanks 😊😊
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?
You're a god.
If you want more in depth check out my new 30 day UI course 30dayui.com/
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 😅
😂 so sorry friend!! Thanks for watching anyway!
would have been nice if you covered the library, good video though.
So, adobe bought figma and that next step? Wouldn't close adobe xd?
please how to cut a web model in adobe XD?
Great tutorial..... 13:00 Here is watching a Malayalam boy ;p (font name)...
So curious to be a professional i have little experience in html and CSS
Anything coming up for advanced level 🤔🤔
please how to download
How do I do this with Adobe XD?
ua-cam.com/video/OQwstzYc0-Q/v-deo.html
Need Adobe XD Software. Please help me.
Watching that image warp like that , it was painful 🤣
😬😂
Figma is more better than xd But I still learning it
What is malayalam MN
MALAYALAM is an language
Eisai ligo baklavas
wait adobe bought figma so adobe xd gonna be dead or other way around
its not interactive, I don't find this kind of trainings useful. Also remove your face from the training video, its also annoying.