Creating a Style Guide with Adobe Xd - Tutorial

in today's video i'm going to show you guys how i use adobe xd to easily create style guides i even prototype these and send them via the share tab to clients so they can take a look at them and use them style guides are super easy to set up and really useful for the time you put into them so i'm going to show you guys how i do that today you can even take this and make a full-blown design system off of this or you can customize it and make it your own that's today's video let's go ahead and get started so before we get started like always the completed project file is available to members of the channel you guys can go to the community tab and download that if you remember so let's go ahead and get started setting up our guides so i'm using a regular 1920x1080 web sized artboard and we're gonna start by dragging out a guide over here on the left hand side that is 325 points from the left side of the artboard then from there we're going to drag one more that is a hundred points further to the right and then we'll drag one from the right side 100 from the right side of the artboard so we have 100 here 100 here and 325 there and the final guide i'm going to drag down is 120 from the top of the artboard so to start our wireframe for this i'm just going to drag out a rectangle and that's going to fill this 325 section so it's 325 by 1080. we'll just remove the border and fill that as a light gray color so the way i like to do my style guides is i like to add a simple logo for the company above this guide right here so we'll fill that out with a rectangle for now and then i like to have all of the different sections so maybe colors typography logos and spacing below it and then finally at the bottom i like to have a footer and this is the completed sidebar over here on the right i have a simple way i like to do my sections as well i like to have the heading up top so i'm going to put that right here and then below that i like to have some paragraph information about the section so this may say colors and then we have the paragraph and then below that we have everything we need for that section and then we rinse and repeat that all the way down through the artboard and that's pretty much how i create my style guides so let's go ahead and actually add some content and make one of these and i'll show you how i wireframe this and share it with clients developers and team members so today we're just going to be using regular hill vetica so i'm just going to delete this here in the corner and that's where the company's logo will go we'll just make that 36 and bold i'm going to position this right on this baseline for this guideline and 50 from the left and all of our navigation is going to be 50 from the left so let's just go ahead and add a guide there just to make things nice and simple it's up to you what you want to add based on the project you might have more sections like input fields cards shadows whatever you'd like in this tutorial we're going to be creating two sections and then you guys can feel free to create and modify this for client work so i'm just going to align this on the left and for our headings we'll just drag this down to about 20 points and let's position that about 80 below our logo and then i'll hit repeat grid on that drag it down and we'll bump that up to the 30. ungroup that grid and then i'll change the names and we can't forget about the footer where we're going to put some copyright info so i'll just grab one of these hold alt click and drag to make a duplicate change that to a text area and we'll just drag out a decent sized one and paste in some copyright so we have the company name style guidelines 2020 version number following that and we'll adjust that to a 17 point size and bump it down to a regular weight we also need to bump up the line height so i'm just going to set that to something like 25 just to give it a decent size line height and we'll put that 50 from the bottom of the artboard now to the important part of the style guide i'm gonna go ahead and delete this and we're gonna grab this logo and change that into our heading so here on this heading i'm just gonna make it a decent size nice and bold at 70 points and we're going to put that in this left hand corner on these guides so that's 120 from the top and 425 from the side of the artboard below that we're going to have some text just to give a little bit of information maybe you say why you chose the colors maybe your company's goals or mission and why these colors work well with that we're going to put that here so we're going to bump this up to 25 and we want the line height to be at 150 percent so i just did 25 times 1.5 or 37.5 it's going to drag out a decent sized area and put in some text and it's up to you how wide you want this you can do it all the way if you want i wouldn't recommend that too many characters looks really bad so we'll go with something around there that's 685 wide we want this focus to be on the style guide itself so to make this really simple i'm going to click and drag all of my text hold shift to unselect that rectangle that i'm grabbing there and we're just going to fill all of these to black for the footer and the body text we're going to drop the opacity down to 42 43 something really low and just so the logo stands out we'll add that in color so we'll just do that in a nice blue and let's also adjust this to a little bit of a lighter gray so one way you can lay out your colors here is in swatches so i'm going to grab a rectangle and just drag one out and we'll set that to 250 by 187 and then on our swatch i like to have a bit of text for the name of the color this could also be the color name in code later on so we're going to call that main blue bump that down to 25 and we'll just leave it bold and then we can stick it here in the corner and then below that i like to have at least the hex code if not the xcode and the rgb so we'll just put a hashtag and a six numbers just for the template then we'll scale that down to 17 and maybe medium font and then we'll just put that below it somewhere so let's select that rectangle remove the border and you can change this to whatever color you'd like i'm going to make it a blue and then i'm going to change the text colors to white and then we have a color swatch now one cool thing you can do here is you can just obviously grab this hit repeat grid drag it on over and it's up to you how many you would like to place in a row for me i think i'm going to do five so we have one two three four five so we'll just drag the spacing out until that card pretty much touches that guideline and then we'll ungroup the grid and you can also do that down bottom but down bottom i'm gonna do something a little bit different so i'm going to grab one of these hold alt and put the same spacing we have 37 and one cool thing that i like to do is when i have two colors that are the same color but different shades i like to group them together i think this is pretty cool so you put them in the same position and then to touch them together i just like to make a rectangle down below it and then i just like to drag this to the center of that rectangle and same with this one and maybe this is a darker shade so we have those touching and then the rest beside it would be normal like that so a completed style guide with some different colors may look like this and then obviously you can change all of the hex codes so if you guys have the completed project file you can just modify this yourself and then you don't even have to bother making this yourself but this is just a good start to show maybe the company's primary colors blue and then they have a secondary version of that and here's their alt colors then they like dark themes so they have all their dark theme options here and then down here they have two gradients they like to use so those are here as well now all we do to make another section is simply grab the artboard go up here to the height multiply that by two so it's 2160 and then i just grab this whole section hold alt drag down and then i just like to figure out how much space i want in between each section to keep it nice and consistent for this we'll go with 150 from the bottom of that last element there then we'll just change this to typography you can adjust this body text and then we rinse and repeat so there is an example of what i have to do with typography i've got the name of the type up top then i've got every character displayed in that heading itself or that body text and then just a little information below each one and maybe why we chose it again just copy that go down 150 change that to logos and this time we'll just drag this down and then you can position your logos in there so that's how i create a style guide now i'll show you how i wire frame this so clients can either take a look at it and how i send it off so we'll swap to the prototype tab and what we're going to use is the scroll tube so i'm going to select each one of these headings and just drag them to the corresponding area of the artboard so it's going to be a tap it's going to scroll 2 and we'll set that to a 0.6 with an ease out and then we'll do that for the rest of the headings so how many ever you have you can just do that and we just simply go to live preview and when we select colors it's going to scroll to the colors typography and you'll notice that this needs to be pinned so we'll just go ahead and do that as well so we'll grab that command g to group it and fix the position when scrolling to fix that problem and now we have this nice style guide for a company from here we can swap over to the share tab and you can select what you would like to share it for i usually just do design review to keep it nice and simple so they can view the prototype and then you name it and create your link that's how i quickly create style guides for projects someone can take a look at it and easily see these are the colors we got to use this is the type we got to use and it's real quick and easy to create and then from here you can even turn this into a full-blown design system so that's going to do it for today's tutorial i hope you guys found this helpful and useful make sure you guys subscribe for more adobe xd and design related content and i'll see you guys for tomorrow's video so as always have a great day and i'll see you guys in the next one [Music]

Channel: Caler Edwards

Views: 59,483

Keywords: Design & Prototype Style Guides with Adobe Xd - Tutorial, Design & Prototype with Adobe Xd, Create style guide in Adobe Xd, How to make a style guide, Setup brand guidelines, Scroll to in Adobe Xd, Adobe Xd Design & Prototype, Adobe Xd Tutorial, Adobe Xd Interactions, Auto Animate Tutorial, UI/UX, UI Design, UX Design, Adobe CC, Adobe Xd, Caler, Caler Edwards, CalerEdwards, Design & Prototype Tutorial, Creating a Style Guide with Adobe Xd - Tutorial

Id: STlSen330q0

Length: 10min 55sec (655 seconds)

Published: Wed Aug 19 2020