Adobe XD Basics | Top 10 Things to know when getting started with Adobe XD
ฝัง
- เผยแพร่เมื่อ 31 พ.ค. 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. These are the 10 most basics tasks you will need to know about when you get started.
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 get you up and running.
0:00 What's Up
1:20 Intro
2:00 Art boards
3:05 UI Tour
4:50 Pen tool
6:25 Symbols and styles
9:18 Repeat grid
10:55 Responsive Resizing
13:55 Preview design
14:45 Images
15:55 Prototyping
18:00 Sharing
Adobe XD is pretty awesome. It's still a fairly new tool at this point but has tons of potential.
------------------------------------------------------------------------------------
////////// Want to support my content and get extra goodies? Become a member and get perks like member-only content, behind the scenes, design files, and more...
designchamps.io/hip
////////// Connect with me here 👍🏼
Instagram: / imjesseshow
Twitter: / imjesseshow
Anchor: anchor.fm/imjesseshow
Medium: / imjesseshow
////////// Sign up for my Monthly Newsletter 📫
jesseshowalter.com/newsletter
////////// Music is from Musicbed click below for a free trial 👇🏼
share.mscbd.fm/imjesseshow
////////// Equipment 📸
www.amazon.com/shop/jesseshow...
What are your thoughts on XD? Whatya love and whatya... not love?
Just started messing with XD for the first time this weekend and it might already be my new favorite program! I especially got excited when I realized I could open PSDs directly in XD, so I didn't have to waste time converting or transferring works I already had in progress in Photoshop over to XD. I just opened them directly in XD, picked up where I left off and plugged away. Also, the 'Repeat Grid' function is effin' awesome!
I love XD! I don’t know if I should upgrade to Sketch !
Jesse, I love the repeat grid function
Free Insurance App Animated Template
www.behance.net/gallery/76784089/Swissfund-App-Adobe-XDAuto-animation-XD-DOWNLOAD
The music is annoying, may you talk without it?
My college professor showed us this video instead of teaching us how to use the software himself. Thank you, professor Showalter.
Hahaha, that is epic!! So glad I was able to help out! 🤘
those who can't do...show videos of those who can.
The teacher probably wanted you to have as much simple basic information as possible so that they could progress with projects you would use the basic info on. It would take 3 class periods to get the average college class through the same tutorial in person.
Everytime I see 'Adobe XD' it looks like a meme or a joke, am I the only one? I cannot unsee XD being a face.
it's not for everyone.
@@JesseShowalter I'm just talking about the program's name haha.
Indeed I have used XD as a text emoji exclusively so far.
omg same!!! i thought i was the only one. I used to use that face a lot when i was younger LOL
@@JesseShowalter you are too sensitive
your level of excitement scares the hell out of us non Muricans... chill man, you are able enough to make me see your tuts without being yelled at thank you cheers
Sorry, David- I’m just get sooo excited, it’s hard to contain. Thanks for the feedback, have a good one!
@@JesseShowalter haha, you did convince me that its sincere :) stay healthy
You as well, my friend!
1:20 intro
2:00 art board
3:05 the UI
4:50 the pen tool
6:25 symbols and styles
9:18 reapeat grid
10:55 Responsive Resizing
13:55 preview design
14:45 images
15:55 prototyping
18:00 sharing
Thanks for these time stamps, I've added them to the video
Thank You! I needed a quick refresher in Adobe XD and this helped a lot.
Awesome to hear
XD will always be a smiling laugh face for me but XD is pretty good.
Ahahahaah!! Yes!! 🤣🤣🤣
Hi Jesse I am speechless, you have done an amazing job demonstrating Adobe Xd essential tools and covered most of it in just short video. I am an illustrator guy and have extensive graphic design experience in illustrator and photoshop. But want to try mobile application design so I want to use Xd for that and your video really made my day. Thank you so much.
XD is a solid program and has tons of potential. Especially great if you are dialed into the Adobe eco system 👍🏼
Jesus man - cool your boots - I almost felt out of my chair with the level of excitment in the intro!
I can’t, I’m actually that excited
*cough-cough-Hater-cough-cough*
Nearly put me off watching altogether. I do this sort of thing for my 6 year old... :)
Jesse, Thanks for this awesome walk-thru. EXACTLY what I needed to get my startup off the ground!!!
Yah!! i love to hear that.
Sarcastic, "you gotta figure out in your own machine" haha.
Thank you so much, just got introduxed to XD and was excited but also very lost. I will definitely be back to see this video atleast a dozen times in the next month alone :)
I'm considering jumping over to XD for web and app mockups. I've been using InDesign for years and it's pretty much my go-to visual tool for just about everything print and web - just a bit worried that XD will feel limited in comparison as far as design flexibility.
At the end of the day, I want to give the client the best understanding of the mockup as possible, rather just presenting static images and supporting notes so XD definitely fills a useful role. Gotta stay with the times I guess!
Wow, thank you so much for the tutorial! It's so much helpful for my new job! I just have a little suggestion that I wish I could see what the keyboard button or shortcut you were using when you were creating things on Adobe XD as I watched it as a super beginner and also even new to the Mac. But overall, it was such a brilliant video and thank you so much for sharing!
you are awesome! quick but juicy tutorial! :) such a good omen. I just installed the free XD directly from the Adobe website and this is the first video I found for me to learn this stuff. Who knows, I could be good at this in the future. tnx man! :)
Your so welcome 👍🏼
I am learning UX Design, and this is an easy and clear beginner's tour of XD. Thanks!
Perfect video. The background sound was just the right volume, not distracting. You were on point. The way XD handle rasters is fantastic. Thanks!
"Figure out the commands yourself because I can't be bothered to explain differences between mac & pc commands" :) Helpful thanks! (they are pretty much the same)
Yup, just swap Cmd and Ctrl most of the time. At least he's honest though.
@@jordanzish Or he could have provided a link in the description to the documentation page with all the windows commands for adobe XD. "Figure out the commands yourself" Fantastic presentation skills.
@@Bushmaster17 talking like he owe you shit. 😒
Lol this was disrespectful 😂😂
Adobe XD is free again. No more subscription needed.
What!!! awsome
@@JesseShowalter It is because they lost ground to Figma, and InVision Studio, pretty much like Sketch will loose as well.
As of now I can recommend only Figma and InVision Studio. Adobe XD and Sketch are obsolete....
@@theretroman3862 adobe xd and sketch are not obsolete at all.... im using XD and im loving it. Just because you dont use specific program that doesnt make it obsolete.
@@theretroman3862 This is a subjective response. Neither Adobe XD nor Sketch are obsolete. The world doesn't revolve around the tools you are using today.
It's free "again"? I knew XD is free, but not that it's free "again".
So was it free, then it wasn't and now it's free again? 🤔
super helpful! Watched the whole video and not only do I know what XD is now but I can't stop thinking of all the possibilities! Keep it up!
I'm just getting started with XD - your video was very good, I'm sure I'll watch it a couple more times as I get going.
So glad it helped you
Great Tutorial - Subscribed - thanks for sharing knowledge :)
Images automatically dropping into a mask is so awesome. Its such a pain to always create mask and additional work. XD seems really cool and much more user friendly for someoen who is using sketch.
That's cool that you enjoy XD, what else do you like about it?
I’m in the middle of learning this software and this was an incredibly helpful video!!! Seriously one of the best explanation/instructional design videos I’ve seen.
Thank you so much for such a comprehensive tutorial! Lots of love!! ❤
Thanks so much for the support, Sakina!!
This video was amazing and a great introduction. thank you! exactly what i was looking for.
So so glad you enjoyed it, Susie!
You said, "The automatic curve thing is weird." This is a normal function across all Adobe products. After making a curve, you can bring the leading handle back to you last node (by holding ALT on windows). You will now draw a straight line after the curve you just drew
Jesse! Thank you for making this video. This was the easiest to get the idea on getting start using XD. Love it!
I’m so glad 👍🏼
Hate it xD
Wayne Grudem - Systematic Theology in the background. Nice!
Grudem All Day baby!
Thank you so much for this helpful tutorial!
You're very welcomed
Would be nice to cover the process once you're done with XD. Someone needs to program the site so it looks like the one you've schemed and then the real trouble starts - or are the any features to make it easier for programmers to implement the XD design?
Best Tutorial. Just someone who explains where everything is,. I don't need more. Got me up-and-running in 20 minutes. Great stuff.
So stoked I could help you out! Go make rad things!
Very clear, love the tutorial (and the sponsor time, fast, cool, and not boring)
As a longtime Sketch user, this helped a lot! Got me hyped to use XD. k thx
It’s only getting better
The perfect intro to XD, thanks alot, really helpful!
So glad it helped you out 🤘
@@JesseShowalter After using XD for a while, I found it much easier to use than Sketch.
Just started using XD loving it so far!
Awesome keep at it.
I was searching for the XD tutorial ..and your 20min video made it simple.. thank you @jesse showalter
Awesome!!
how to use the icons and form fill material , I means is any plugin available to drag drop rather than creating each part? Photoshop having lot of effects ..
Not that im aware of
I've been using xD since it was in beta version, I'm glad it's more stable now. Adobe team update xd every month making it easier to work with. It's not as powerful the sketch tool but they are doing great so far. Glad to see your video on XD!
I think I do some more, it's a pretty decent program
Hi Hassam! I saw your message about using adobe XD since the beta version. And I can't find one thing I want to know about Adobe XD. Maybe you can help me? I was wondering if it is possible to make a contact form or login screen. And with the prototyping tool that we can let users fill in the form?
It ain't stable on the PC version, let me tell ya that.
My university provided a LinkedIn course on InDesign and your video answered all of the questions I had in less time and in a more understandable manner. Thank you, Jesse!
Thanks a lot, I've always wanted to learn XD just needed a little tour around the environment and this was it for me, really great and simple
Thanks so much for watching, stoke you enjoyed it!
Great video! Screw photoshop mock-ups, this is insane 🤯
Pretty awesome right!
Thank you v much for this tutorial..really concise and well presented and is helping me in preparing me for a part of my new job next week.
That's amazing. Congrats on the new role
Oh I love this! I'm new to these programs and I like this better than figma from what I see. The way it handles assets is awesome :)
Thanks so much, Amber! Get out there and be rad!! 🤘
This tutorial helped loads, thank you. Subscribed.
Your support is awesome! Thanks for the feedback! 🤘
If 😏 isn’t this guy’s fave meme I’ll be disappointed 😂
Btw: Thank you so much for this video ! It really helped a lot! 🙏🙏🙏
Hahah, so true! 😏 glad I could help!!
he is a very smart and cool guy, why you don't give him your PN?!?
@@JulioSalazar-xw7np give him what ??
Bahaha! Totally. I wish I could type this 😏😏😏😏 facing both directions. Helpful vid though.
Hey Jesse! I do really enjoy your lessons - yes, I call your videos LESSONS. Because they are like lessons to me. Thanx for sharing your experience and advice. I do really appreciate that. Keep on making new videos! By the way, can you share new videos about complex technics in XD please? or maybe you can recommend some channel about Adobe XD lessons. BEcause there are lots of channels, but I do warry about the quality of the education...
I’m transitioning from print to digital and your videos are sooooooo informative. Thank you
Yes!!! Go get em, Joe!
THANK YOU MY BROTHER FROM ANOTHER COUNTRY AND ANOTHER FAMILY!!!
Thank you!
I am already using Sketch and Figma, but I just wanted to learn XD as well because sometimes some clients have preference towards design tools. You are my go-to tutor. So thanks once again.
Oh wow, thank you so much for your kind words and continual support! Go get em!!
im just starting and tNice tutorials video was perfect.Well explained and easy to follow for a beginner.I never understood soft soft till i watched tNice tutorials.
Thanks for the basics! When I'm designing for desktop though, if my website is long then it shows the whole thing but won't let me zoom in/zoom out to see the components. On Figma, the play button would load another tab and you can fit to width to make sure everything looks appropriately sized. Any tips?
Hey Jesse, nice vid! As a XD begginer - thank you :-)
Your so welcome
2:15 Anybody seen the movie "The green mile" with Tom Hanks?
Well this dude looks and acts EXACTLY like the character named "Percy Wetmore".
Too funny! ^^
This is a new one.
I just started using XD these days, Thank you for sharing
Your so welcome
XD makes memes more easy to catch xd
That repeat grid is so cool.
This was a great overview thanks! I'm amazed people are getting paid more to do this kind of thing than to do print work. This is so much easier! Also, do people really dive into UX design without having experience with a pen tool? 😂
So glad you liked it!! It truly is sooo much easier!! 🤙
i mean, print work is just grabbing a pen and doing some shit, this takes like, knowledge
Thank you for the video. I would like to know what tool did you use to record the video showing your desktop and your face on the side. Thank you in advance :)
I use screenflow to record my screen and premiere pro to edit
Quick and precise. Thank you. Learned so much.
best tutorial on the internet. you have no idea how much easier you made my life
iPhone: 60% market share
Adobe XD: Yeah, you're going to design for the iPhone from now on.
🤣
60% of market share but 90% of the 60% are too poor to pay you lol
6:23 - quote "but that automatic curve thing, it's a little bit bullshit"
By far my fav UX tutor in this space 👏🏻
Thank you so, so much for this! Love your energy man
Thank you so so much for the support!
Damn you got a nice skin !!! xD Thanks for the tutorial btw haha
Thank you, friend! Haha!
Once you've designed the app on XD, what's the next step to actually create the app?
exactly
XD is just for prototyping, and sharing the idea with clients or suppliers. Helps you to envision what you are going to build and get approval. You then need an app/software developer to build it as a mobile app, or whatever it is you are prototyping, and as you have already prototyped it everyone knows what they are going to get.
XD is just for design, then you gotta have the app or website deveoped
@@SaqibKhaliq what if you are the software engineer/developer but you have no Idea
great software. im a developer, never have I done design. but since im now getting into the freelancer market I will need to do some mockups myself. im loving it so far
Yes! You’ve got this!
Thank you, Jesse! I liked the explanation about responsiveness, it seems very convenient.
Very similar to Figma :}
Need install Windows10 and test this :E
You might like it
FIGMA BALLS LMAOO
@@gio9527 XD
Thanks man really helped me alot with my school project! God Bless u!
You’re so welcome! Thank you! God bless, man!
Sweet video brother, thank you very much! Very helpful intro :)
No problem!
Is it just me or when you stare at the XD logo in the beginning for 10 seconds, and then look at Jesse, do you guys see a green box?
You see a green box?
When gamers see Adobe XD they probably keep laughing because XD is an emote. So yeah, LOL.
Haha, I get that one a lot!
@@JesseShowalter LOL
😆
Thank you saved me a lot of time trying to browse videos for an actual working one
Thank you! This is very helpful for a new piece of work that I am doing. Zero XD experience, only used Sketch and Figma.
i prefer Adobe "😂" instead. Same basic concept. Pretty fun to use.
It’s pretty good
LOL - A UX instructor of a company that purports to spit out its UX bootcamp students 'career ready' who says "how about you just figure it out for yourselves"....???
OR You could just place a link or a list of equivalent commands below (I would have added them to the video in 'post' so that they would have flashed up on the screen)
Should I go through the numbers of Mac to PC users...(even in development)?
In case you're wondering I 'use' a Mac but i'm an old-school multimedia developer who started out when Jesse Showalter (the instructor) was probably a wink in his father's eye
Bro, I'm a Dev and Designer and this channel is the one thing that was missing in my life. Thumbs up, awesome content. Wish I found it earlier.
Thank you so much for this tutorial.. Its really really useful for me. Appreciate it.
Thank you so much, Selvarajan!! I appreciate your support 🤘
Advice to talk absolut when necessary, and show as much as possible.
Please make tutorial slicing .xd to html :))
Interesting idea
YES, PLEASE
Thanks! Straight foward and really usefull for me going 0 to 1 in XD
Learnt a few things from this video. Great stuff man!
So glad I was able to help out, thanks so much for the encouragement!!
You immediately created a poor user experience by not making an effort for windows users. And in quite an arrogant way as well. Thanks for creating the content nonetheless because it is a damn good video.
I am not a windows user and am trying to get better at showcasing windows commands and views... thanks for the feedback 👍🏼
Substitute cmd for ctrl and option for alt and you're good to go. Honestly I find it annoying when tutorials feel they have to repeat themselves. The windows version of the shortcuts are obvious. Likewise for mac if the tutorial is in windows.
@@dragonwhimsy6696 I agree. I don't think they need to be mentioned. It was just the way it came across that surprised me.
Don’t be lazy and googling windows shortcuts. If you wanna succeed in your life you have to get things by yourself.
@@lucascraveiro8508 I already knew what they were buddy.. you totally missed my point.
Awesome video for someone that is just starting to know this designs app! Great job keep up with the good work
Man, you're rocks! Thank You for your course !!! I've learned so much!!!
So I'm just learning about this program. Clarify this for me please, you design the UI visually, and the program creates the code automatically in the background? Or how is the code created for your designs such as the sign up buttons, etc.
"I don't know if it's a good thing or a bad thing...it's just a thing" this
Haha, I’m a designer not a wordsmith obvi. Lol thanks friend!
Clean and clear. Thanks for the great tutorial. Subscribed
Hey, Thanks so much! i'm so happy you enjoyed it.
Thanks for this video! Bought me over to the Adobe suite :D
This video was super helpful for me as I'm just stating to learn and use XD! Thank You!
Thanks man the video was very helpful!!
Glad you got value out of it
Right I'm giving it a thumbs up as they guy actually got back to me for some honest feedback!
Super helpful! Thanks for making this one.
Thanks so much, Mark! Have a good one!
This video was actually more helpful than I expected 😂 thank you 😁
Haha, thanks! 🤣🤙
@6:14 Bezier curves are acting normally. It's following the curve instructions you gave it exiting the previous node, just like in all the other Adobe tools (and, I assume, most other vector-based illustration software).
Thanks for the feedback
amazing..you have covered small and big details here and i think i am kinda ready to work on xd. Thank you for making this video. New Subscriber :)
You are so welcome 👍🏼
Amazing vid man. Simple and easy to understand. Keep it going.
Thanks, Shiva! Get out there and make amazing things!! 🤘
As a total beginner, that's super helpful!! Subscribed right away!
Thank you so much and welcome aboard!! 🤙🤙🤙