Adobe XD Basics | Top 10 Things to know when getting started with Adobe XD
Вставка
- Опубліковано 11 чер 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
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 👍🏼
Jesse, Thanks for this awesome walk-thru. EXACTLY what I needed to get my startup off the ground!!!
Yah!! i love to hear that.
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!
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... :)
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!
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
Perfect video. The background sound was just the right volume, not distracting. You were on point. The way XD handle rasters is fantastic. Thanks!
I am learning UX Design, and this is an easy and clear beginner's tour of XD. Thanks!
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
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 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 :)
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 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!
Thank you so much for this helpful tutorial!
You're very welcomed
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!
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!
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
Very clear, love the tutorial (and the sponsor time, fast, cool, and not boring)
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!
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 👍🏼
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?
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.
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
As a longtime Sketch user, this helped a lot! Got me hyped to use XD. k thx
It’s only getting better
Sarcastic, "you gotta figure out in your own machine" haha.
best tutorial on the internet. you have no idea how much easier you made my life
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!
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?
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
Thank you saved me a lot of time trying to browse videos for an actual working one
Quick and precise. Thank you. Learned so much.
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? 🤔
Great Tutorial - Subscribed - thanks for sharing knowledge :)
Great work mate, excellent tutorial. Thank you
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.
"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 😂😂
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.
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?
Wayne Grudem - Systematic Theology in the background. Nice!
Grudem All Day baby!
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
Thank you!
This tutorial helped loads, thank you. Subscribed.
Your support is awesome! Thanks for the feedback! 🤘
I was searching for the XD tutorial ..and your 20min video made it simple.. thank you @jesse showalter
Awesome!!
Great video! Screw photoshop mock-ups, this is insane 🤯
Pretty awesome right!
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...
THANK YOU MY BROTHER FROM ANOTHER COUNTRY AND ANOTHER FAMILY!!!
Thank you so much for this tutorial.. Its really really useful for me. Appreciate it.
Thank you so much, Selvarajan!! I appreciate your support 🤘
Hey Jesse, nice vid! As a XD begginer - thank you :-)
Your so welcome
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
That repeat grid is so cool.
Thanks man really helped me alot with my school project! God Bless u!
You’re so welcome! Thank you! God bless, man!
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.
Thank you, Jesse! I liked the explanation about responsiveness, it seems very convenient.
Just started using XD loving it so far!
Awesome keep at it.
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!!
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
Right I'm giving it a thumbs up as they guy actually got back to me for some honest feedback!
By far my fav UX tutor in this space 👏🏻
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.
6:23 - quote "but that automatic curve thing, it's a little bit bullshit"
Thank you so, so much for this! Love your energy man
Thank you so so much for the support!
Awesome video for someone that is just starting to know this designs app! Great job keep up with the good work
Damn you got a nice skin !!! xD Thanks for the tutorial btw haha
Thank you, friend! Haha!
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.
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!! 🤘
Man, you're rocks! Thank You for your course !!! I've learned so much!!!
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
Very similar to Figma :}
Need install Windows10 and test this :E
You might like it
FIGMA BALLS LMAOO
@@gio9527 XD
Thanks for all the details!!! Best channel !!
Wow thanks so much!!!
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?
i prefer Adobe "😂" instead. Same basic concept. Pretty fun to use.
It’s pretty good
This video was super helpful for me as I'm just stating to learn and use XD! Thank You!
Thank you! This is very helpful for a new piece of work that I am doing. Zero XD experience, only used Sketch and Figma.
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
😆
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
thanks it helped me a lot for my game dev journey
Thanks for this video! Bought me over to the Adobe suite :D
Please make tutorial slicing .xd to html :))
Interesting idea
YES, PLEASE
Advice to talk absolut when necessary, and show as much as possible.
How do you grab the screen to move it? I keep having to zoom out then back in on what I want look at.
Thanks! Straight foward and really usefull for me going 0 to 1 in XD
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.
yr awesome, thank you for making this thorough demonstration of the basics a breeze
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’m transitioning from print to digital and your videos are sooooooo informative. Thank you
Yes!!! Go get em, Joe!
Super helpful! Thanks for making this one.
Thanks so much, Mark! Have a good one!
Learnt a few things from this video. Great stuff man!
So glad I was able to help out, thanks so much for the encouragement!!
Still working as of today! Thank you!
Great video, also this is the best background music I've heard for a tutorial.
This is the best free software Ive seen. Respect.
I can't thank you enough... hands down the best video for beginnners
This video was actually more helpful than I expected 😂 thank you 😁
Haha, thanks! 🤣🤙
Amazing tutorial. Very clear and fast. Love it thanks
Glad it was helpful!
Clean and clear. Thanks for the great tutorial. Subscribed
Hey, Thanks so much! i'm so happy you enjoyed it.