Adobe XD Tutorials

Sobre este curso

oh hey why don't I tell you how your life just got a lot easier with the new Adobe XD UI kits alright so Slayer aside Adobe just

released an update for experienced design or XD that includes UI kits for Apple iOS Microsoft Windows and also Google's material design so what are these uija kits and why should you care

well if you're an app developer or designer or whatever and you have to design a mock-up or a prototype of the app in question you know then that there are specific UI elements and layouts

that accompany each platform that you're developing for and it can be a pain to have to scour the internet for these UI kits or god forbid create them from scratch yourself so no longer do you

have to do that and I'm going to show you how to use these UI kits by creating a very simple gallery prototype so before we begin make sure you check out corset row comm

we have a lot of different courses both free and paid and also subscribe here if you like the channel alright let's get started okay so with a new fresh document open up here in Adobe XD

let's go ahead to the hamburger menu over here open UI kit and we'll choose Google material okay as you can see based on the current resolution everything's really tiny but to zoom up

all we have to do is hold the ctrl key and just use our mouse scroll wheel to zoom up and out okay so in order to use these and make sense of them we have to have some type of purpose so let's say

for example that we have an app that has a gallery and we want to show what happens when you click on one of the thumbnails and create some type of prototype interaction with it and we

know that this app is going to be based on Android so to use the kit instead of doing everything from scratch what we can do is first let's come down here and we can see we have

this these two rows these are just based on the different device types so we have a desktop a tablet right here and then a mobile so let's say for instance we want to use the mobile dark all I have to do

is click on let me zoom up real quick the artboard title and that selects the artboard and everything within it automatically so control seed copy and we're going to create a new document get

control end for that if you wish get this up here and then ctrl V to paste very very simple okay so we have these guys here that kind of show up these pink sort of guides I'm going to select

it and then choose this little lock here to unlock it and then delete I don't really care about those we don't need them okay so the next step that we want to do is see if there is some sort of

gallery components that are available here in the uikit document so just look around you can see right there we have just some sort of gallery right here so if we select that copy it and then go

back to our other document well paste it in position it right there you'll see the guides that show up to let you know that you're perfectly in center and we could pay us right there

very very simple now this would probably be used more for a white background and so I don't like this white background container there kind it looks not good so to do this we could right-click and

ungroup everything or we can just double click right on it down here and you'll see it'll automatically select that layer for us because we could see we have a fill color of white now I have to

do is you could change it to a different color if you wanted to or just hit delete which is what I'm going to do so now with that selected we can see this is a grid because we have these

little handles to the right and left so let's pull down all the way and this automatically repeats the content inside of it which is very handy all right and now let's go ahead and select the

artboard control ste and then control B okay so let's take this gallery I'm going to right click we're gonna choose ungroup and then also ungroup grid so now we can have access to all these

individual thumbnails now I want to leave everything with exception or I want to get rid of everything rather with exception to this bear right here so I'm just going to take all these

holding shifts left clicking and deleting there we go now we'll take this I'm going to hold shift and scale this up we'll scale this all the way up to the very edge as well and you can use

your keyboard arrow keys to position as' as needed and it looks very pixelated because it's just meant to be a small thumbnail over here so I'm gonna change them and so changing the content here

especially when it comes to photographs and XD is very easy so if you follow the link that's provided in the written tutorial for this video you'll see that we have this bear picture right here I'm

going to use this you don't have to I you can just download this put it on your desktop and after you do that we'll go ahead and take it from your desktop and drag it over on top also do the same

thing with this right here very easy okay now this is taking up too much space so I just want to drag this up to around 50% right around there alright so now let's add some type so maybe a

heading and a little paragraph of content right here so let's go back to our XD uikit and we'll find a typography section this is on the upper left

alright so notice it gives us some specs here this is based on material design specs for light and dark backgrounds and we'll just notice down here you know for secondary colors you leave it at white

except you change the opacity here to 70% we'll do that for the paragraph text but just for now I'm just gonna take this whole group right here and copy it we'll go back I'm gonna paste it it's a

group so let's go ahead and right click ungroup and I'm gonna delete all of these with exception to just two of them oops we'll leave title but we'll get rid of

sub the subtitle right there so I'm gonna take both of them holding shift I'm gonna put the title right around there let's make them also white so the fill color over here and this one is

really just for reference we want to see the size it's currently 14 alright so the way this current type layer is set up if we type in or paste in something from say for example lips some calm let

me go ahead and get that out real quick this just gives us that lorem ipsum generated text right here i'm gonna copy just this those two sentences now if i just paste that in it's going to go

off-screen so let's create our own type layer so we'll take the type tool just around here left click and drag I'm gonna make sure we have good even margin on the right and left the bottom we

don't have to worry about we're gonna be moving it and adjusting it afterwards and then simply paste it in you'll notice it's also about the Roboto font and fourteen size for the font size also

change the opacity to 70% alright that looks good well delete this one now we'll drag this up and also if we hold shift while dragging we'll see that we have these guides that kind of let us

know that we have even distance between the top and bottom of the title and that looks pretty good so we can always drag this down and everything is situated and laid out very

nice awesome okay so let's say for example we're satisfied with this DC design so what do we do now well we can go to the prototype tool or tab rather and right here I we can notice this

entire thing is a group but we don't want that so let's right-click we'll choose ungroup now you can see it's yet another group so right click ungroup again so now we have access to just the

individual thumbnails so let's go ahead and take this we'll see this little blue selector a dragger right here we can drag that over till it connects and highlights or outlines rather the other

one this artboard here in blue and you can specify whatever you want for the transition easing all that stuff iteration I'm not going to worry about that I'm just going to leave it at

default settings and then also let's say for example we want to simulate going back to the gallery view page so if I just try to select this right here individually it's not going to let me

although if I do double click it we don't necessarily have to ungroup so I'll go ahead and drag it right back alright so now if we hit play we'll see let me just get this to the

right so it's not kind of cluttered over here we click on it and there we go we have a very quick prototype based on using the UI kits alright so that's how you create very quick rapid prototypes

using the Adobe XD UI kits all right so if you enjoyed that make sure you subscribe here at YouTube and also check out course cetera com where we have a bunch of free courses and very cheap

courses that show you how to design and develop apps for all different types of platforms alright see you very soon