The Figma 2021 Crash Course by Example

today i'm going to show you how to create this website prototype using figma and it's fully equipped with micro interactions and even animations between different pages hello everybody gary simon here it is the new year 2021 so i like to refresh a lot of my courses and it really makes sense to do that for figma because figma has released a lot of updates in the last year and so what is figma so first of all before we get there who is this crash course for well it's somebody who's an absolute beginner and also maybe somebody who is more seasoned and maybe you're going to learn a thing or two in terms of the workflow and the approaches all right so figma is a ui ux design and prototyping tool what that basically means is before a website or an app can go live and work in the browser on different devices you really need to come up with an idea of how it's going to look and also function and that's the purpose of figma and other tools like it so if you go to figma.com we'll see that there is a pricing option but it's free to start you can have up to three projects i 30 day version history yada yada um and then if you want to get more professional about it which you don't have to it's 12 dollars per editor uh per month so the very low cheaping low cheaping did i say low cheaping very low pricing i and i'm going to show you real quickly just again uh the i basically the fictional website that we're going to create here um using figma and so if you click here i we have like our work section so we're going to do a subpage design we're going to do hover based interactions i'll show you exactly how to set that up also using smart animate i we can create really cool page transition animations and so i'm going to be talking about two things primarily i'm going to be talking about number one is how to use the app how how how to use the tools that are in the app of figma and then number two ui design principles and fundamentals of those two it's an it's a 10 90 battle what i mean by that is understanding how to use the app and the features is only 10 of the battle knowing how to apply them and developing an eye for ui design is 90 of the battle so if that's something that you really interested in you want to be able to produce great designs that look and function well definitely check out my site which right now at the moment is up and coming designcourse.com uh enter your email to be notified when i release this service it's going to be awesome um it's basically going to be a monthly subscription service where you learn ui ux design through ui tests live workshops challenges full courses and more so that's gonna be releasing here sometime soon in 2021 all right so with that said let's go ahead and get started now before we begin you should definitely check out this video's sponsor which is scrimba.com now while you're about to watch my figma crash course you can learn ui design by taking my ui design bootcamp at scrimba which is an interactive code based platform at scroomba you don't just watch videos no no you're actually able to modify code in the browser while you learn my course on ui design features over 100 lessons that are specifically tailored to help you become an awesome ui designer and they're packed with interactive challenges so click the very first link here in the youtube description to access my course along with many others for a very low monthly fee all right so we're going to start here go to figma.com of course create an account and um the first thing i'm going to do is click this little plus icon at the top and that will create a new document as you'll see in a second once it gets all loaded up all right so this part could be a little bit confusing for anybody who's brand new to figma because what's going on i can't design what is happening um that's because we want to come up here we're going to click uh on this frame and you're going to see under design on this right section and let me see if i can get things a little bit bigger so you can see what i'm doing depending on what you're trying to design for uh you can create and start off with these artboards that are pre-defined in terms of width and height and you know your dimensions essentially um for me with it's like a website i prefer to start with the website first in desktop that way i know exactly what i want it to look like on the largest experience that people can view the website on and then i can kind of go work in reverse go down to tablet size if i want to design and prototype for a tablet and then also for a phone you don't always have to do that you could work opposite if you want i will say this for front-end development when it comes to html css and responsive design um you want to work always from mobile for mobile first but i'm not going to get into that because that's a different respect um but because obviously we're just focusing on ui design here so for me i'm just going to choose i will choose this desktop right here all right so once we click it we'll see now we have this area in which i we have this frame named as desktop hyphen one you can double click that by the way uh right here and you can adjust the name if you wish we can call this home page because that's what we're going to start off with and so at this stage if you want you can i would you know you can select it and you can adjust the width over here so for me i kind of like to go like the 1920 and then do 1080 for my height so it's even a bigger desktop size you may even want to go larger than that because with 4k monitors which are you know pretty prevalent now i you can get quite a bit larger so that's up to you entirely so now at this point i i will just very briefly go over the ui here of figma but you really there's not a lot to i'm not going to spend a lot of time going over bells and whistles i want to give things context by covering the actual project but nonetheless uh when you select an object for instance if i take this rectangle tool you can see that in the right panel right here we have properties that are specific to the element that you selected same thing with the canvas artboard like you could change the background by changing the fill color here you can also i do a lot of other things like auto layout which we'll get into alignment all that we'll get into prototyping as well and over here on the left portion is your layers and your assets depending on which tab you've selected so you'll see uh once we start to add more elements this is going to get filled up and you'll see how the layers panel works and i will get into that briefly outside of that we have a few tools that you can draw things with basic shapes we have the dreaded pen tool um we also have the type tool um we can make comments all that good stuff so what we're going to do now is just start designing this homepage and in doing so you'll start to learn how to use the app so i'm trying to remember to tell myself at the beginning i of this uh this video you know crash course i wanted to i need to reiterate it's 10 tools and knowledge of the app and it's 90 everything else so when it comes to ui ux design it that that 90 is understanding ui design fundamentals uh and and how to make things look good you can be the you can know every single feature of this tool of figma or any other app but be a horrible designer it's a just knowing the tool and of itself isn't enough so let's go ahead and sometimes when i'm designing a new site i might start with the navigation at the top because it's the top it's a very first thing that's seen sometimes i'll start with the background um i think i'm going to start with a background so if you go to uigoodies.com here in a different tab you have all these different categories and there's basically just linking to other resources if we come down to like patterns and backgrounds if you want to have a an interesting pattern or background for your website perhaps one of these resources would be good for you and we're going to use one of these i'm going to use what are called subtle patterns this site's really cool i've it's been around for quite a while but they have all these cool sort of patterns so you click preview it's going to show you what it looks like on the actual website as well um and so you can go through these and you can experiment with so many i believe the one i wanted is somewhere on page three yeah this one i like this one it's very subtle um there's not a lot of contrast so you can still put text and stuff on top of it i like it so if we click download it's going to download as you can see i already downloaded it once before in preparation and here's winrar so if we get in there we want to take this graphic right here and you can just kind of just drag it over to your desktop and i'll replace it because it's already there and so we're going to use that as a background here so we select the artboard here or the canvas whatever you want to call it and we're going to change uh the the fill from a solid to an image so we cl choose i choose image and we're going to go as we see oh there it is greek vase or vos and we could just choose tile and we can increase the size of course right around here that looks pretty good around 400 by 400 and we can click off of this and there we go we now have a repeating background of course you saw some other options there you could change the exposure contrast saturation so that's really cool as well i'm happy with what it looks like right here so we're going to assume that the the the project we're designing for is going to be for kind of like um i guess a design service of some sort i know a lot of you are aspiring ui ux designers perhaps you're going to have your own portfolio or something so we'll just take that as the approach we're going to go with so let's start with the navigation um i'm going to take the type tool and i'm just going to click up over here and i'm going to just type in my channel name design course this could be your business name or whatever whatever you want it to be i'm going to use a font called poppins i like it a lot of course we're really small here so we're going to take the size so if we click down here we have some preset sizes or if you wish you can use your keyboard up and down arrow keys after selecting into this value where it's highly highlighted blue and we can just you know very in a finite sense increase the size as such i also want it to be bold so it really stands out well and we're also just going to choose a primary color so when it comes to color and contrast and ui ux design you're going to find that you want to have a primary color one that you use the most throughout and you can have secondary colors as well but generally speaking you want to keep them to a minimal and you really want to reinforce a primary color and your primary color should be something that works well with you know the predominant background on your site and all that um so there's many different colors we could choose at this point um i think i'm just going to choose this blue right here so the hex color code is zero zero seven eight e7 i and you can enter that if you want to follow in you could choose your own primary color like this this would work just as well as a primary color um this would work there's a lot so many different shades and obviously colors that you can use so i'm just going to use this one right here and what we're going to do is just say that's our logo because it's simple enough usually you can have an icon or not this is just a word mark type logo now let's talk about alignment and position and so now we're going to get into like ui design fundamentals uh considerations um would this make sense to put this all the way up here i'm gonna say absolutely not you wanna have white space as it's called you want to push things around in in such a way that they have enough room uh and they're not kind of scrammed like pushed up against edges and that could be the edge of your actual um like against the browser edge on the top of it or to the left you want it to be pushed you want it to have enough room to breathe as i like to say and that's all about white space and white space becomes more important once we start to add in other elements like a navigation so let's go ahead and add a navigation uh with this as well so i could start over you know click here and then just type in like a navigation name like home or whatever or we could just do uh ctrl d and then it that automatically will replicate that line and that duplicates it so if i double click right here i'm just going to type in home and in terms of navigations and where your navigation resides in the nav bar or the header up here a lot of times people will kind of put the like the first link of the navigation right here and then i have another one here here and here so the logo is usually can be left aligned and then the navigation is right aligned over here i'm going to take a little bit different approach sometimes you can have navigation right next to the logo but you still need to have good white space between it and we also have to reinforce another ui design fundamental called visual hierarchy right now these are styled exactly the same right so if i were to you know duplicate this and create like our work or something another link by the way you don't have to follow along i'm gonna back up in a second um in our work and then maybe services there's a lack of what's called visual hierarchy here the only thing that separates this from these is there's a little bit more white space in between here but you really want to reinforce that hierarchy more so in order to differentiate differentiate the items between each other so you do that in a visual sense um and so one thing we could do we could change this to black all right now they're quite a bit different from each other so we're reinforcing that visual hierarchy even more we could also change it from font weight bold to regular all right there we go now these are drastically different we could even make it a smaller font size and put this center aligned like right around here so you could do all these things to reinforce the visual hierarchy and it's very important to get those things right all right so i'm going to delete those two and i will say like around 20 will be good for the size there and what we want to do now is i we want to create um we want to use a feature called auto layout so what i'm going to i'm going to do is click on this frame right here i'm just going to kind of left click and drag an area out right around here it doesn't really matter we can always uh adjust things further and i'm going to take also our home so the home is inside of our frame and then what i'm going to do is hit shift a all right so first i for auto layout we can see we have this auto layout section that has been added right here um so we can the first option here are these two arrows vertical direction or horizontal direction you'll see that what that means here in a second once we create a secondary item next up we have right here and this is the spacing between items again we have to give this more context because there's only one item uh but that creates white space between um the the child elements inside of the frame so as you can see we have a frame and then inside of here we have home and let's just go ahead and duplicate one right here so now we have two link our menu items i'm planning on having three so let's just like hit ctrl d to replicate those and now i if i adjust this for instance um using the keyboard you'll see that they're spread out evenly now same thing right here if we click down it's just going to make it a vertical list which is great for something like a mobile layout all right so at this point if we expand this these don't fill up and take the space right that's what we want we want to be able to just quickly have a way to move this this container in and out and these will respond appropriately uh inside so the way we do that is we click on this and then in this little section right here where it comes to aligning it we could first align things to the center but then we want to choose space between all right so now if we pull that out guess what we have space between we can also then come in let's make this second link our work this one will be services or something like that and it maintains the correct amount of white space between all of these if we didn't use auto layout we would have had more work to do to try to create the the right amount of white space between each one of these elements we would have to manually adjust the space between each other so use auto layout in these component based aspects as much as possible and we're going to do it a few more times as well so i think we're pretty i'm pretty happy with this a simple little layout right here and then to really complete the uh the top nav bar because i when it comes to to ui design and the fundamentals uh having a good layout should really feel complete and what i mean by that is we have basically a container defined right here and there's a certain amount of white space that occurs between the between the first element and this let the left side of the browser or the device or whatever and so we want to have that same symmetry created over here the same amount of white space so over here we could put a small call to action um like get a quote all right for design services or something like that so to do that let's go ahead and create an actual button not just a link like these these aren't really i wouldn't really call these buttons uh because they're not encased in anything like a pill shaped container or whatever um so let's do that what i'm gonna do is take this tool right here and so if we can always click down we can change these to you know an ellipse or polygon or whatever i want a rectangle and let's just drag out a container we're going to make it white and of course we won't be able to see it then because the background is almost already white now to zoom in and out by the way i didn't go over that control in your mouse scroll will by the way if you want a pan uh use the space bar and left click all right so inside of here we're going to go ahead and um i'm just going to put some type get a quote all right so now i if i zoom up we'll see these little radius buttons we're going to take those and drag them all the way in to create that pill shape container and we're going to take this and this so i'm going to hold shift select both of them and then we're going to hit shift a to do auto layout all right so now if i left click this it's not behaving like i wanted to because we want this to say in the center of this element so again we come up over here space between now it works and we can even adjust this size as well so it stays vertical center and horizontal now just so we could see this this button background a little bit more make sure we get into our frame here and we want to adjust this so that we can add an effect so most anything you select has this effects options down here we click the plus icon and now by default it's adding a drop shadow which is what we want but there's our other other things you can add like layer blurs and background blurs and inner shadows and all of that i i don't like exactly how this is styled this soft sort of eye i mean it would work but i said and it does help us see that overall container but i'd rather make adjustments to it so the effect settings is that little icon and now we can change the x position which is at zero like if we want to offset it on the x-axis uh the y-axis we have is four so let's just do like one one and a blur of two so now it's really subtle if you get in there and that's what i like when it comes to shadows i don't like to overdo it that's something that used to be a thing long time ago so now let's go ahead and get this adjusted we want to make sure it's it's it's centered where it needs to be you want to make sure you can and you can eyeball it's okay uh if you have an even amount of white space here as you do here and the one thing i would change about this call to action is that make it stick out a little bit more you could do a couple things in order to achieve that you could take the background for instance and we can make it our primary color and then we can make text white and bold so now this button really stands out like a proper call to action or you can make it less subtle less settle less subtle i or more subtle what am i doing i what i would do because i'm already planning on having a big call to action here and i don't want these two to compete with each other but i do want this to stand out more than the other elements up here really what i will do is change this back to white but i'm going to take the text and we'll make it we'll keep the text bold but also our primary color so now it stands out a little bit more by making that text bold and that blue color all right so at this point we're going to consider this navigation done or this header really or the nav bar what i want to do now is focus on the headline and the sub-headline so being that this is uh a design for a home page of like a of a sas like a software as a service or whatever i i really want to stress that you should have a really good ad copy and that's achieved through a strong headline all right let's create the headline right now so i i talk about this a lot in my live streams when it comes to choosing good ad copy so now that now we're kind of in into the marketing territory uh because ad copy is so important it's the first thing people read within you know a second when people get to your your site a lot of people uh especially those who are starting out like for their portfolios or whatever they'll put like front-end developer ux designer or something like that and they'll be literal about what it is but when it comes to ad copy and marketing 101 you need to stress benefits over features a feature is a ux designer or a ui designer that's a feature of you i what how are you going to benefit people so choosing good ad copy is thinking in terms of benefits and not features especially when it concerns at least the the headline um so i'm going to choose i'm going to specify um expert design services uh for cheap now this is still not a great headline because it's kind of still descriptive right it's it's kind of like a feature um let's let's change that up but first let's let's let's improve the appearance of this headline right now as it stands this is really small yeah it's a really bold but we're in the realm of visual hierarchy again um this line this this headline is way more important for this page than the navigation all right because we want this to be the thing that really catches people's eyes it's something to read something to help sell the service um so we're gonna we're going the main way you do that is through size so we'll take this and we'll boost this up big time like up to there um i'd say that's actually a pretty good size 70 or so we can also adjust other things about either your type like the line height like if that if i think it's spaced out a little bit too far i might just bring that up a little bit um and again i may extend this down and right around there looks pretty good in my opinion um so expert design services for cheap that's not bad it's certainly better than ui ux design services um expert design services for cheap but you could definitely improve this um like we we make your business oops if i can type look great all right now that is a lot better in my opinion all right so i at this point this is a good headline everything is solid so far about our design in terms of uh the composition and the layout color and contrast alignment uh again like i when we're talking alignment i haven't talked about yet but alignment would be you know where how are these items aligned in respect to one another like if i push this down a little bit and this over here look how it throws off the flow of the layout you want things to be uh laid out in a way that is consistent and accurate and makes sense all right let me back up there just just backing up you can see how much better it is like if i took this and offset it a little bit here a little bit strange because we have a column defined by the little left part of the d where this starts and then this is offset over here now sometimes you can go in and you can push this in way over there and it would still work but to keep things simple and definite you want to make sure that where this starts is where that starts so now they start on exact same column or line right here all right so let's have a sub-headline you don't always have to have a sub-headline your sub-headline can be beneath it in smaller and again we need to reinforce the visual hierarchy make this quite a bit smaller maybe even make it regular and maybe even change the color maybe make it like gray all right of course you want to use different ad copy um we could say award winning design services this could work um we could also put on top all right so award winning design let's just go with that and i what we can do is change the letter case to uppercase let's make it bold and let us also change the spacing uh the letter spacing between each other let's also make it smaller there we go and maybe even decrease the contrast a little bit but not too much so this is a a sub-headline approach where it goes above the main headline and this is something you see often it's a certain aesthetic um and i like it we can even go a little bit smaller if you wanted to but i think this looks pretty solid right there the thing that we want to catch people's eye of course is this big bold text so we can do other small things uh just to introduce some other tools like the pen tool i'm not gonna do anything crazy you can do an entire video tutorial series on the pen tool and learning how to use it the pen tool of course has been around in many different apps like photoshop illustrator and they all pretty much are operated in the same way for the most part but what's how do we underline this i create a cool sort of underline well let's left click once so now we have an anchor point here and then let's say we want it to end right here we could just end it right there hit escape i and then make it bold and blue but let's give it a little bit of what's called a bezier curve so if i back up a couple times with ctrl z we can left click and drag this time now we can escape that and then we can make it our primary color and then of course we want to make it a lot thicker oh that looks good all right so notice what are called the end caps so if i exit out of there we could see that the end caps there's no it has like a flat end caps right here if we want to make those rounded we can go ahead and click on this and then for the join we can just click this round or cap let's see where i'm at there we go round right there so now we can have a nice round sort of underline all right so that doesn't look too bad and again you can come in afterwards and you can you know scale it and all that good stuff all right so i like this so far for the headline now let's talk about a call to action when it comes to the landing page of your service or your site or whatever it is you should always have a call to action as it's called so a call to action could be as simple as clicking a button telling like to click here or whatever although that's bad ad copy don't ever put click here um or filling out a form like you know to get them started like putting their email or something uh it could be a search bar it could be a up and down animated little scroll indicator letting people know that you want them to scroll down whatever the case may be you want to have some sort of call to action um so for us we're just going to have a button-based call to action on where any this is this comes in the ux design you have to really determine and and find out what your users want the most what is it that they want to see the most what's the first thing they want to see and that's done through you know testing and and getting feedback from your your your visitors but ultimately you can make you start off by you can make making an educated guess at least for the purpose of prototyping and design and i'm going to say they probably want to see a work first right they don't want to hire somebody whose work looks like crap so they want to see their work what are you capable of and so what i'm going to do is create a another button so we'll have a button here and our button we want when it comes to your call to action you really want to draw attention to it so it needs to stan stick out well so you have a couple things at a play here um if you really want it to stand out a lot then we're talking about something of visual hierarchy right and also you achieve that visual hierarchy and you you give it prominence and importance or i real estate whatever you want to call about call it you do that through ui design fundamentals such as i your color your contrast your scale like the size of things and all of that so we are going to make it our primary color right here you could have a secondary color like an accent color or a highlight color and m you know make it that color so for instance what's a what would be a complementary color that works well with this blue um that works pretty good actually i like that and now this evening stands out more because this color doesn't exist anywhere else in this document personally though i think i might revert back to the blue but we'll see how it looks after we complete the button itself so we created we used auto layout for a very simple button where it has text in a button container let's also add text yeah in an icon uh in the button container so let's talk about before we get to that part plugins so a very you know integral aspect of figma and also similar design software like adobe xd is are the plugins that they've introduced in the past couple years so there's a plug-in ecosystem where third-party developers can create awesome plug-ins that do a ton of things i'm a huge fan of plug-ins mods if we're even talking about gaming like the gaming community on pcs by the way used to be so much better than what it is today because you're able to mod everything they allowed people to mod stuff so it's almost like the same concept except this is for design software and they're called plugins so if you go to manage plugins right here you can search for plugins up here you can click on community i there's a lot of and you can see files and then plugins there's a lot of different plugins that you can use obviously you've seen that i have a few that are installed already and a whole course could be just done on showing and demonstrating awesome plugins for figma in an xd um so we're going to use a plugin that i already have installed you want to if you want to install as well to follow along you can search like i icon i think it's called iconify there we go so i haven't installed already just click install and then go back to your document and we will click on plugins and iconify it'll take a little bit of a second to load and just type in like magnify right here and then find icons and they'll show up down here just as they have it remembered my last search and so you could choose you know so you don't have to design this stuff from scratch uh and you could you could completely design a magnifying glass with the tools up here but why do that when people have already created them so we're gonna use this one and we're just going to place it right around here and what's great is because these are svg based we can change the color and all that stuff so let's click out of there we'll make it white and then we'll also type here and we're going to put in our work all right so now uh let's scale this down it's probably going to be more like 24 or so and we want these to be consistent these two elements in here consistently colored so both are going to be white and not white and black because that just doesn't look good because it's not consistent um and so now we have our work right here in this button we're going to take all three and we're going to hit shift a and as you can see auto layout has been added let's also double click into here and we want to change right here uh the cor the corner radius as it's called uh we're gonna make this a pill so i'm just typing 50 and now it changes all the sides although if you wanted to control top left right and bottom you can do that right here by clicking that icon and so after that we need to make sure everything is centered here uh we could do space between if you wanted to um let's see how that looks right here so if we change this that's not working at all so we have some work in order to get this to to react how we want it to so what we can do is we can come in here and we can make adjustments to uh the resizing portion of the individual element inside of the frame so where it says auto um we can adjust this and just like put 20 for now um and adjust this right here so let's say like the space between the magnifying glass and our work title like right here it looks pretty good also under mixed you can see if we just change this to zero it's going to take all of our padding away by default let's go ahead and make sure this is centered here first and then let's adjust the padding all right so for the padding has an equal amount of padding all across here so now if we adjust this it's going to work how we want it to that way for if for whatever reason uh we want to resize this it's going to be a lot easier for us to resize in the future all right so do i like this button the color that is i kind of don't i think this looks a little bit less busy because there's less colors i think this could really be a subjective preference but ultimately to decide whether or not which color to use you should engage in usability testing split testing in order to find out how your actual real users want to interact with it because uh we can make all the assumptions in the role as designers and many times we're wrong all right so i would say that's pretty good right here uh so far so now we have this big empty space right here what are we gonna put in this empty space there's a lot of different things what's common a common design pattern uh for what this is by the way this whole section right here sometimes referred to as the hero section um is an illustration of some sort it could be animated um there's a lot of things that you can do when it comes to design in general you know there's so many subjective preferences you know subjective things that we could do that aren't considered necessarily right or wrong um and very few objective things uh that you can do so with that said let's go back to that ui goodies and we can come to illustrations and we can choose i to go you know any of these illustration sites some of them are paid resources for me i'm going to choose let's see here let's check out this one free illustrations right here so these are pretty cool illustrations um i think i want to use this one like a storefront illustration so if we click download storefront i should pay for this winrar it's been like only about 20 years and we choose svg we'll take this asset one i'm just going to put it onto my desktop all right and we are now going to go back and we're going to take that asset one graphic if it's somewhere there it is and we're gonna put it just right here now of course we have scale and all that stuff to worry about so hold shift scale it down a bit and now where you place this is really important um like if we put it here that'd be kind of strange if we put it up too high we have not enough white space so where this is positioned has a strong consideration with where this is positioned as well so if i put it right here and notice how we inset it from this kind of invisible column right here we could probably inset this one as well and bring it close that way there's not a lot of white space between it so we could do that or we could just increase the white space on the left and right and take these two elements and put them right there like that so this works right here pretty well it's very simple it looks great i like it so now our hero section up here is done we can always increase the space that we have we're going to create one more section underneath although in a real world scenario you would want to create probably you know a lot more content but i don't want to get redundant here so i'm going to break up the flow between this whole top section like right here and the next section down here and you can do that by changing up the background that's one such way you don't have to but i'm going to choose to do that so we're going to take the rectangle tool put it down there and we're going to give this a color we can make it completely white so now our background stops along this edge for me i'm going to actually do something a tad bit different and make it just barely gray or just barely white it's off-white and the reason i'm going to do that is because i'm going to use cards and the cards are going to be white the background of the cards are going to be white themselves so you'll see what i mean in a second um i also want to kind of create a split layout here a 50 50 column layout so i'm going to duplicate this ctrl d move the one that i just uh the new duplicate here in the center it's hoping i would get a guide but we'll leave it there for now and we'll use our primary color right here for the background now one thing i would probably adjust there's not a lot of white space between the bottom of this element and this right here so we'll take those two hold shift select both of them and just scale them down because you want to have a lot of white space and you want your your design to be able to breathe so i may even pull this down more and then pull this all right so now we're looking a little bit less cluttered and things have more room to breathe here and so over here i think i'm going to have you could have like the hour work section like where you have your portfolio um you could do a lot of different things for me i'm just going gonna assume i'm like a two-person team myself and then somebody else and so i'm gonna put two cards right here and then i'm gonna have like a weird kind of just interesting 3d element that's in the middle here and then maybe just some lorem ipsum text on this side you'll see what i mean in a second so let's create these cards over here so to do that i'm going to create the background form first and again to zoom up control your mouse scroll wheel to pan spacebar and left click we're going to make this white we're going to pull the edges in all right and we'll also give it a drop shadow and we'll adjust it again and the opacity you can adjust right here so i would never go that much opacity with a uh or full-on you know contrast with a with a drop shadow you wanted to be very minimal so i kind of like that all right i next up let's go ahead and get some type going here so for the type i'm just going to left click drag out the width of the container and we will center it and i'll put in gary simon now why is that happening well let's go over here and make sure that that is selected there we go so we hit the minus here to take that off and also for our letter spacing i'm just going to put back to 0 for default and then we'll use our primary color i believe for that all right and then we're going to have like a title so my name and then title underneath so we'll duplicate that with control d and again when it comes to visual hierarchy in your type they should be separate from each other so let's first put in the actual description i'm going to say award winning ui ux designer and educator whatever all right so this looks bad because there's no separation between these two in terms of their design they're exact they're styled exactly the same so let's go ahead and make it like a dark not a black but a like a dark gray 3c3 c3c let's use like let's do like 15 for the size and then regular all right that looks pretty good there now let's take all three of these shift a to auto layout it and let's also go ahead and just change everything to zero here now the reason there's like more on the bottom because the width or the height of that text container so now it's just like this so now what we can do is just increase the padding all around and here's a good example where i maybe i don't want equal padding all the way around maybe just on the top and bottom i want to have equal padding and then maybe a little bit less on the left and right excuse me all right so we'll have nine there and nine there all right so this is kind of uh oh also let's go ahead and make sure that this is uh we just click here in the center all right so now it's all centered up as we want it now i'm going to show you kind of a little bit more of an advanced trick that i learned for using auto layout and trying to get um items that don't necessarily fit inside of the container so let me just show you what i'm talking about probably hard to understand what i'm talking about so let's take an ellipse and we're going to put a um a circle-based avatar or like a picture of myself all right so shift alt and then left-click and drag and we'll say it's going to go right around there we're going to have a frame as well so for the frame we're going to put it make a frame like around this size make sure clip content is not ticked because here's what happens if i take this element and put it like right here like slightly on top of it as you can see and then over here in the layers i push this into the frame you'll see how we can't see it so that's why we want to make sure clip content is off now we can see it even though it's inside of the frame at this point just in order to see because for this frame is invisible by default if we give it a fill and just make it a color we can see we will now i get this positioned in here and we'll move it to the top and we want to make sure that the the um horizontal or x alignment is uh center here in the middle so now this little icon changes or the little dashed lines and then top as well so it's it's it's positioned to the top and in in the center so now we can move this around and we know it's going to work so now if we take this frame and we drag it inside of the frame 4 and we go ahead and move it inside of here and we come out here to the height we could either change it i make it larger and by the way we don't need to see it now so we'll just make it white or just completely get rid of the fill which would be the better option there we go um you could see that we can now kind of create the spacing here for this so that it will behave how we want it to i but we need to get the spacing right first so i would say there's probably a little bit too much space between there now that's looking pretty good we could always adjust this push this down and now if we adjust this position what we don't want like if we change the height of this we don't want this to push down we want it to stay up there so what we can do instead is come out here and for the white space at the bottom we can increase this right around there and then we can either adjust this down or adjust the size of this container in which case that was a little bit too much or so something like that all right so now what we can do is we can take our plugins and another one that we can use is unsplash and we can we can just get an avatar i i think there's specific plugins for just avatars but this will work just fine as well i'm just going to put man or you could put mail whatever i will use this person click on it and there we go all right so that works ctrl d to duplicate it so we'll have a secondary person jane doe we'll go ahead and you know go back to our unsplash female search these are all like models and stuff um [Music] okay she looks like she could be like a computer designer person all right jane doe all right so i think that works pretty well uh right there of course you probably want to change up the type here but i'm not going to worry about that for now um so now i let's go ahead i want to show you another aspect here of figma if we go to plugins manage plugins we can go to community and files under files so there's some cool things happening here um these are things that are resources people created that you can use and download and all that good stuff 3d shapes for your design this is actually pretty cool and i used this so i already have it um if i go back here to uh let's see here so if i go back to recent here we can see i already have this so um if i open this in a new tab you'll see how this 3d sort of asset document is structured um examples and symbols so we want to go to symbols and if there's one that you kind of like that you want to use i like this one we could double click into it just copy it ctrl c and then just paste it in what purpose does it serve i mean i don't really know but i think it looks cool and then perhaps as a part of your branding you know you're using these simple 3d primitive shapes throughout your design i mean it makes you know perfect sense for you know a design related site you can do something cool like this all right so i like that just out of the box i'm not even going to change any other aspects of it and then maybe over here we'll have some type again we'll just take a block we'll left click drag out all right i'm just going to click it's an initial text and we're going to left aligned it and let's go ahead and use another plugin called lorem ipsum i've installed that one you can do a search and install it too and then you know you can have it generate five sentences five words paragraphs uh we're just gonna generate the five sentence option and we're gonna make this um white we're not gonna make it bold we'll make it regular we'll increase the line height right around there and maybe i will take this extend it out just a bit so that i can stand extend this you know right around the same area and then again i'll take everything and we'll get it re-centered up here all right so this right here is pretty good in my opinion um for you know just getting started on a home page of some sort of course you would want to extend this down if this is a real business and add more information down here and maybe show some feature case studies or projects um a way to contact you at the bottom of footer as well um but you know this isn't just for creating this isn't a real project i just wanted to demonstrate some of the basic ideas but we're not done yet so um we've been working within a single canvas or an artboard whatever you want to call it um let's create a second page here um that way we can show some prototyping so for our second page i let's just do what it would look like if i for like our work or whatever so let's go ahead and um we will duplicate that artboard ctrl d so now we have two artboards right here by the way something i did not cover at all yet let's back up components so components are reusable elements so like for instance buttons buttons are elements that are used throughout a design multiple times right um and if you simply duplicate a button without making it a component first and you want to make changes then you'll make have to make those changes to every single one so like if you decide oh i don't want my buttons anymore to be white then we just take this and maybe we'll make it our you know this color and we make the text white well guess what i have to do that to this one as well that's a lot of manual work right so instead we right click and choose create component we duplicate it just like we did before but notice how it's also purple outline and they're also purple over here if we make a change to say for instance the background color for one it's now going to change it for the other ones look at that isn't that awesome now what you can also do is i you can override things as well in the child instances of the button so if i double click this and i change this color you could also do that but if you go back to the main instance and you make adjustments to that it's going to affect the child see very very cool all right so now let's just back all the way up you can do this for multiple elements as well like your whole header uh we can make that a component so where is my create component there we are all right so that now that is a component so let's go ahead and duplicate this and then now we we have like a nav element that's going to show up on pretty much every page i if we had to make a change we can just come here to the main you know the main instance of the element um or the parent of the element and you'd be able to do so and make changes and it will affect all of your artboards because when you're working on a real project you might have 10 20 30 different art boards so you want to make use of your components just like you want to make use of auto layout as much as possible so let's assume that this is going to be the our work page where we showcase work so i'm going to get rid of all this stuff down here i'm going to create a container with a rectangle that goes all the way from there or so and we're going to make it white we're also going to position it to the bottom by the way good idea to change this and make it our work all right so now we've created uh this like kind of like a sub page container you want might want to make sure this is equal white space from the top and the bottom there and now we can start we can put something like our work done right and then maybe we'll take the underlying thing we'll put it over here um and underneath and then we could still uh keep the same idea with the headline or sub-headline all right so that looks nice all right so these would be like the basis of our subpage we'd still have this background up here but just for the navbar at this point you can completely do that if you want and then let's uh let's use another tool we haven't used like the line tool very simple you could use the other tool as well um the pen tool to do this if you wanted to with two anchor points not a big deal um and instead of making this black we'll just go real light or mid light or so mig gray just to separate two different columns that we're gonna have here and the other one let's make sure we're using let's use this text so we'll paste that in here and this time we'll make it something we can see because it's already on white and extend that out here so we have some lorem ipsum text maybe there's just some description text right here or something like that all right so that looks good and then um inside of here perhaps we'll have um a thumbnail gallery of projects there's many different ways to do this many different layouts there's masonry layouts you can um you can have card layouts where it has like a thumbnail along with like a project title or case study title whatever you want um i'm going to keep it pretty simple and we're just going to use a rectangle like right here perhaps and then maybe we'll do another one maybe we'll make it smaller and we'll push this like right here and then maybe we'll have a second row let's just take these and duplicate them and then maybe we'll push this one over here and this one will be longer yeah something like that okay so now let's get in some pictures here um let's go to unsplash i'm just going to type in web design all right so maybe that one will be this this one will be that one this one will be here uh what else maybe this one will be this one obviously i'm not being too specific on what i want to use obviously these would be some type of pictures that would relate to the projects you've created and that look how solid that looks very good and we we knocked this out so quickly and if if you're in the position where you you know you've tried to design things in the past and you just have a hard time making them look good that's because you lack the ui design fundamentals and that's why you need to go to designcourse.com and enter your email for once that is released because we're working on it very hard um but anyhow i digress so now what if we wanted to how do we transition like if somebody clicks on our work or our work right here how would we make it go to this page right so that's what the prototype tab's over here for so when we switch to the prototype tab when we click on an element we don't have all the normal visual properties we can change over here anymore we have the prototyping properties that show up so whenever you click an element you'll see you have a little arrow right there or not an arrow a circle where you can drag it to another artboard i or canvas so if we drag it over there now the interaction details stay okay we'll transfer to this new artboard uh on click on drag while hovering over this while pressing mouse enter mouse leave mouse down mouse up on click is what would make sense here in this case so we'll leave it on click and then navigate to here do you want any an animation um you could do dissolve uh a smart animate you can move in move out push or whatever let's just do a push for the heck of it and you can then control the easings of this which is how the animation is applied and how it flows during the uh pre the the defined duration and right here is by default it's 300 milliseconds so now if we go ahead and hit play we're going to get a new window that's opened up and let it load because sometimes it takes time and now if we click on our work there we go so that's based on the animations that we've specified and also sometimes it will it will take a little time for other photographs and all that stuff to load up as well so now we can also tie up our our work button to the same area and it will remember what you had before you know previously and then over here how do people get back to the home page well they would click on the logo that's a usual that's that's a common pattern as well and get a quote so obviously we don't have some of these other pages made already like services you know we'd have to duplicate this board and design the services page and um then connect you know everything up like we did before so we can also do a smart animate and that's really cool and powerful feature i let's say for instance that we wanted whenever somebody hovers over uh one of these thumbnails it will change the appearance of the graphic or the photograph and then uh maybe it'll show some text on top of it which is a common thing that we see um let's go ahead and do that so what we'll do is we'll take um this artboard we'll duplicate it let's go back to the design tab and let's go ahead and for the image let's adjust something about it um like what is tint all right so it's tinning it a certain way temperature saturation contrast so what we could do is we could right click and create component out of this and then i can give it a um an actual color so for the for the fill we're just going to use this right here and then we're going to double click into the image and we're going to take the pass through down so as we decrease it we give it basically this blue tinted effect so now we'll go ahead and we'll just put um we're going to reuse an element oops um where's our magnifying glass there it is so we cop copied that uh this part the magnifying gla glass and we're gonna push it or paste it ctrl v right here shift and alt and there we go so maybe that's what we want to show up maybe not text but a little magnify glass icon so now if we go back to prototype we can take this drag it over here and then this is going to be uh while hovering and we will change it um from push to smart animate and we can just leave it right there so now if we go play allow it to load and we hover over this look at that look how good that works so again we can start navigating click our work hover over it and it just works look how cool that is all right so we'll do one more thing here because i know i've really given you a lot to consider here um let's design a page for what happens when somebody clicks on like one of those thumbnails so we'll design like a product page so now let's duplicate this we're going to put it right here all right and so we'll say um we're going to use smart animate for this again so what i'll do is we will simply take these um and we'll take this as well all those items we just selected and we're going to take paths through and put zero all right so they just kind of hide um this is going to change here to um some company whatever and get rid of this right there and then um we'll put like client case study right here and then we'll expand this out this one so we'll push it all the way from here to there and then push it up and maybe make it a little bit larger and then underneath it we'll have some type we'll copy this one up there we'll paste this right here we'll expand this out and maybe make this a little bit larger and increase that line height respectively all right so we can imagine you know in reality this would be a much longer page because you have a lot more information but for now just for our purposes this is good so just a very quick subpage design um so now let's go back to prototype mode and we'll click on this and we'll drag another one so you can drag multiple uh these multiple handles based on the interaction type so um this one is while hovering as it's showing but we we can't use while hovering again obviously um this one's going to be on click we're going to navigate to our work down here and it's going to be smart animate so it's all ready to go uh so let's go ahead and hit play let's click our work we can hover we know we can see that this is working i can guarantee you though this probably is not going to work it's not going to work because why when we hover over it it's activating the other artboard but we didn't create the connections from that artboard so for instance we're going to take this one and push it over here and it's going to remember our last selection we hit play and now i forgot there's a different setting in order to make this uh correct so let me get that uh situated correctly it's this one right here while hovering we uh we don't want that on here there we go so let's do this again and let's go back to home our work hover hover works click on this and there we go now it's working exactly as we wanted to so our work look at that awesome awesome stuff all right so hopefully i've ignited a fire in motivation in you and inspired you to keep on learning ui ux design now if you really want to take this seriously definitely go to designcourse.com i and enter your email to be notified when i release this service all right it's going to help you learn ui ux design from scratch through ui tests live workshops challenges and full courses all in this single service all right so hopefully you enjoyed that again if you haven't yet make sure to subscribe and i'll see you soon goodbye [Music] you

Channel: DesignCourse

Views: 345,244

Rating: 4.9639082 out of 5

Keywords: figma, figma 2021, figma tutorial, figma tutorial 2021, figma tutorial for beginners, figma course, figma prototype, figma prototyping tutorial, figma website design, figma web design, figma smart animate, gary simon, designcourse

Id: Gu1so3pz4bA

Length: 72min 5sec (4325 seconds)

Published: Mon Jan 04 2021