Figma Masterclass for Beginners (2023 Updated)

hey designers my name is jesse showwalter and in this video i want to show you everything that you need to know to start designing mobile applications and websites using figma all right here we are at fitment.com that's where you can go to learn more about figma you can find out about the products and pricing and the community and you can log in and sign up for a free account now i will say about pricing you can use figma for free it just limits the amount of pages and documents and layers and s

ome other things like that but as long as you keep everything in your drafts folder which we'll talk about later it's great for people who have personal projects or just working on their own you can use figma for free as you scale up into teams and organizations you might need a little bit more i think it's worthwhile still figma's a great investment so you can go to figma and you can either log in and use it in the browser or you could download the local version which i have running right here

on my machine now once you open up figma for the very first time you're going to be presented with the dashboard that's what we're looking at right here the dashboard my dashboard might look a little bit more busy and filled than yours if you're opening it up for the first time but that's because i use figma constantly have a lot going on in there but a few things that are going to be very similar is going to be this center area is where all your projects kind of fill out now right here we have

some different templates that are available to you and if you don't want to see those you can just x those out make them go away no problem you're always able to start a new design file or what's called a new fig jam file or you can import files a sketch file a figma file or image files here down below that we're going to be seeing all of the projects that pertain to which folder we're in now let's talk about folders because up at the very top left-hand edge we are currently in the recents folde

r this is everything we've recently viewed it's just going to aggregate everything into this folder so if you're just kind of opening figma back up and you're going i want to work on that file i recently touched that's probably the place to go drafts is a little bit different that's going to be anything that's not organized into a folder so again all of you free figma users this is where you're going to want to probably keep all of your work inside the drafts folder and just name things really r

eally good so you can keep things organized but the draft folder is where you keep everything that's not organized into what are called projects now the projects are listed down the left-hand edge and they're organized by the organization i have a few organizations that i'm working in here if i wanted to take this draft this messenger app design and move it into a project all i have to do is grab it drag it and drop it into whichever one makes the most sense like youtube designs boom i'm going t

o drop it right in there and it no longer shows up in drafts it shows up in youtube designs the last thing i want to talk about here on this dashboard is the difference between seeing your dashboard and actually jumping into the community you can explore the community by clicking here and when you jump into the community it is an amazing place to be it's actually the only design tool on the market that has the community baked right into the tool so no longer do i have to google and find figma re

sources they're most likely all right here in the community so when i come into the community i can search for anything i want i can find plugins and widgets and design systems and typography and i can search for anything i can search for buttons inside of here and i might get some different options files plugins creators widgets everything that i might need that relates to buttons so just search for things here it's pretty stinking awesome i'm going to go into mobile design and i'm going to fin

d a design that i want to use for the rest of this video like this nft app design we're going to double click on it what we really want to do is duplicate to our drafts folder so i'm going to hit duplicate and pop it inside of my drafts folder before we get to specific features let's just do a quick tour of the interface if you've used any sort of design software a lot of this is going to be very very familiar but let's glaze over it briefly in the center of the stage here we have the canvas and

this is where you're going to do the majority of your design work you can zoom in and out with the minus and plus key you can also use z and highlight and kind of zoom in that way you can always use spacebar to move around and find elements the v key on your toolbar or excuse me on your keyboard is the way for you to click and actually drag things around and if you double click on groups you'll be able to drill down into those groups and find all the different elements like so to the left of th

is canvas you have the pages and the layers panel but each one of these pages has layers inside of it if you've ever used something like photoshop some standard kind of layers panel stuff you can twirl open and select and it'll show it on the uh on the actual canvas on the actual frame or artboard above that you actually have the assets panel where we can actually open up and find any assets for this project so this has some components and some different things built into this project we can dra

g those out like this little bell notification icon and you can see we have a new version of it right there it's interesting to note that inside of figma you can create pattern libraries design systems any file in figma can become a design system and so you can see when i open up my little team libraries panel we have a couple of different um you know libraries that are available to us and if i turn it on i now have that library available to me inside of this figma project so it might be a good

idea to create one design system or pattern library out of a file and then reuse that for brand or project or company throughout so everything stays really really consistent that's a way that you can do that and so you'll see any updates to those files or those libraries right there but those are your team libraries across the top you have all of your tools and we will be diving into these as we go with this project we have things like moving and scaling and frames and shapes and all those shape

s have modifications that can be made that are specific to them you have the pen and pencil tool text the movement hand tool and the commenting tool across the top you have the name of your design you can rename it simply by clicking there and renaming it if you can change where it's located by putting it in a different project you can always drop down and see things like the version history or export the entire project if i hit version history over on the right hand side i see every auto saved

version and who has been working inside of the file you can always revert back to one of those versions if you'd like to so we can close version history and we can host meetings inside of our figma file and see who's currently working we can share our file and play our prototype and our right hand contextual settings panel will show us anything that pertains to what we're currently clicking on or interacting with you'll see more of that as we go and now i suppose it's time to start digging in an

d i think one of the best ways to learn is just by duplicating or recreating projects uh sometimes that's the easiest way to do it all right let's dive into this project we'll start recreating and working on some more interface elements and building out some new screens and that'll help you learn some of these basics on how to use figma you can see these are all grouped together in a group that little group icon it's kind of a little dotted square that shows things grouped together but again we

have our frame icon here and you can always tell that it's a frame because look there it is right there we can create new frames by hitting the hotkey of f i'm actually going to grab each of these and just drag them up and above and now they're not grouped together i can work with them individually right and if you want to select things on an artboard you can do that by just hovering over the individual element if you want to select the entire artboard just grab the name of it or grab it in the

layers panel and then you're able to move the frame or quote-unquote artboard around now i want to talk really quickly about frames because i love frames frames are one of the most basic but powerful tools inside of figma and if you can get your mind wrapped around frames you will be a powerhouse a power user of figma unlike other design tools frames are not just artboards but they are containing elements that you can style and do anything you want with and you can have frames inside of frames u

nlike other design tools where it's an artboard and don't put anything else on top of that artboard they're separate things in figma they're called frames and they are extendable beyond belief if i want to create a new frame i just hit the f key on my keyboard or i hit that little add frame right there and what i'll get is a bunch of options for pre uh kind of like sized frames for kind of like popular devices we have iphones and android phones tabloids desktop stuff social media sizes even i ca

n grab one of those if i want like for instance uh iphone 13 pro max which is what's currently there and it pop like that you can see all of the elements that have to do with that frame the x and y values where they're placed on our canvas as well as our width and our height rotation and our corner radius you can see if we bring our artboard or our frame into view we can actually style frames and we can even round the corners so if you prefer while you're working to have all of your screens rese

mble a little bit more like that rounded kind of style of an actual device you can grab all of them at the same time and round those corners and it's basically just going to mask them off and work like that i like to work like that it just looks a little bit nicer any frame can have matching border radius but you can also if you'd like you can also have independent corners so we click that and we can say hey i want this top right hand corner to you know like have more of a corner radius than all

the other corners right this is going to come into play a lot because not only can you use frames for artboards like this but you should be using frames for things like buttons or different icons or elements everything should go into a frame here's a good rule of thumb if you ever see something that is like a button that has a shape to it your tendency is probably to hit r for rectangle and drag out a button i'm going to hit i for my little eyedropper and make it that same color that's there an

d then probably you know take some text and put it inside and try to duplicate this button like let's get started and of course we want to fill that text with white let's make sure we have the entire text selected and then make it white so maybe this is something you're more used to doing is building these buttons like this and then we would take our rectangle and round it together and grab the whole thing command g group it that's one way of making a button another way would be to hit f for fra

me right draw out your frame and then use that as the shape that contains our text right so because it's stylable our frame we could hit i for eyedropper and style that that way and then paste our text inside of our frame and then round the border radius or the corner radius of our frame and now we have a button that's built out of a frame but we could go even one more step in trying to recreate this button and we could just take the text and i can introduce you to the power of what's called aut

o layout inside of figma i'm going to hold down shift i'm going to press a for auto layout auto layouts are frames by their very nature they just have a little bit of a different icon and different behavior it's going to allow us to lay things into this layout and automatically space them the way that we want so maybe we have an icon and we really want that to be inside of our button as well you can see when i drag i'm just going to zoom in so you can see i drag see that little cursor right ther

e is telling me hey you're about to drop this into an automatically built layout drop it there right and then we can now edit our auto layout so we can style this obviously our frame what color do we want it to be let's set a fill and let's hit our color picker and our eyedropper we will stylize our button of course we'll take our um our icon and let's make this white for our icon but everything is kind of like balanced wrong and i actually i can't move it around and center things inside of my a

uto layout well that's because we have kind of like a parent-child relationship and i won't get too deep into it because i've made an entire video about figma auto layout i'll link here in the card or down below so you can go investigate this but just know that once you create an auto layout you're going to control a lot of the spacing for that auto layout up here in the auto layout panel okay and so we can say hey i want this to auto layout vertically or horizontally i want to control the space

in between elements i want to create control the padding around this element and i also want to control how this thing is spaced so i want to put everything in the center or tucked up to the left or the bottom so on and so forth let's put this in the center and what's really cool about this is now if we want this icon to be over on the right we just move it and of course we have automatic spacing built in right so we can the button will stretch with the spacing we can always round the corners a

nd stylize this and if we want a little bit more padding and we want those that padding to be a little bit more customized we can change that padding here in our little interface so do like 40 pixels on the left and right hand edge it's always going to keep that spacing as we type in our button now you've created a really responsive button for mobile websites for mobile applications even desktop applications as well but that is a little bit about using you know shapes and frames for as much as m

any things as you possibly can right so what should be a frame let's look really quickly well uh this card right here that could or should be a frame the image inside of it could be a frame the button and the icon here that could be a frame these um areas right here like these table row cells those could be frames and inside of it it could have this little image that should be a frame so use frames as much as you possibly can because they're going to be a lot more extendable in the future as you

start to scale and make things responsive and and all that kind of stuff frames are your friend so here's my button i really want to turn it into a component we can select that frame that whole or group or whatever you have that you want to turn into it and just click right here to turn it into a component now the hotkey to turn something into a component is option shift k but i just like to hit the button and that turns it into our button component components are super interesting because they

're reusable elements if you've never used a design tool that allows you to create components and reusable elements this might blow your mind we've just created a button it's now in our document assets our local components if we want another instance of this component we drag it out and there it is it's utilizing that instance or excuse me that initial component that means later on if we change something like the spacing for this button it's going to change it in every single instance if we chan

ge the order even of where the icons go it's going to change it on every single button if we change the background to the frame right and turn it into a color like that it's going to change it across hundreds or thousands of art boards if you'd like it to and so creating components and using instances of those components as a way that we work smarter and not harder so take these elements and bring our instance up into an artboard and what if we want this button to be really responsive right we h

ave a iphone 13 pro max here what if i hit f for frame and go look in the tablet section and i bring out something like an ipad pro 11 right and i'm just going to put it down here because what we really want to do is be able to create a button that we can then extend right as i as i pull over my artboard to be a similar size as my ipad i kind of want that button to stretch and expand and extend uh i might want something like you know this image that we have here i'm just going to grab this out o

f this card i'm going to give this a similar background color i for your eye picker there i'll bring black into our frame and i will command c command v paste this thing into our design that we're working on our frame as i stretch i kind of want this card and this button to stretch with it well how do i do that i'm going to grab my element here my image and you can see in my layers panel it's just a masked group that has a masked image inside okay i want it to extend and the way we're going to d

o that is by using our constraints panel here on the right hand side in our settings panel right not only do we get the ability to fill it with different things and all sorts of things like that but we can also say hey we want this to be responsive right now we're saying i want to be anchored to the top left-hand corner of our design if i change that at the top right and i stretch again you're gonna see how it it tries to honor your decision and stay anchored to one corner so maybe we actually h

ave a card like this card right here is perfect the way we want it but this is actually more like an avatar right we stretch that down okay and if we wanted to change the image we could but that's fine for now let's leave this thing anchored in the top left but we want this thing to stretch how do we do that we're going to say hey we want it to not stay centered because standard centered is it staying the same size but let's go i want you to stretch the left and right hand edge and stay anchored

to the top now when we stretch our artboard out you can see our avatar is staying hooked to the top left-hand edge and our image is actually you know like changing size and staying cropped inside of that for us as you're designing and you're thinking about frames and responsive resizing you might want some sort of base kind of layout grid to work on and you've probably heard of those like whether they're a 12 column grid for a website or maybe it is a smaller grid or an eight point google mater

ial design pixel grid maybe you want to implement one of those on your designs that's probably a good place to start we can take any frame that we're working on and we can implement a layout grid by adding one right here we have different options you can either choose a grid or you can choose columns or you can choose rows i like to work with grids and i like to work with that google material design 8-point pixel grid you can change the color but you can have multiples if you'd like so if we wan

t to have a pixel grid for this design as well as also having a a layout grid of columns we can do that and then you can dictate how many columns you want maybe for something like an ipad it's a six column and we can say uh we want this to be not stretch but stay centered and we want the width of the columns to grow so maybe we are kind of lining up with our pixel grid there and we're trying to have like similar spacing like three pixel grid boxes on each side now we're kind of combining the pow

er of pixel grids and columns so now when i start designing i can grab my elements for instance like this and you know like make sure i put my color inside and grab all of my elements and command c command v pop those inside and i can line these up on a column width area like that and now we have some guidelines to kind of work off of yep and that's working great it's looking beautiful we take our button if we wanted to this time and stretch the whole thing out for our ipad and now we're working

very very responsive quite often when i'm working i like to flip my layout grids my pixel grids on and off so they're not in my way and all you have to do is hit control g on your keyboard and you can just turn them on and off the ability to kind of tidy things up and have multiple groups like if i had more of these and maybe they were spaced out a little funky i could grab all the elements and i can just say tidy up it's going to create a little bit of a grid for me and i get controls where i

can space them out and i can space them out also using the controls in the settings panel so maybe it is something like 24 pixels uh and then also 24 pixels um or 20 and 20 and i also love that you can always grab and drag inside of figma as well so that's a way to kind of organize your work and if you have everything that is spaced nicely inside of a grid you can always grab one element and shuffle them around with other elements i've drawn another frame that's just an empty blank frame whereas

these ones are mask groups i want to talk a little bit about fills and strokes and effects that you can use um inside of figma so we have this white card and it's being filled with our color a little bit of basic stuff here you can stack multiple fills on top of each other and those fills can be either solid colors gradients linear radial angular diamond or even an image and then you can subtract them hide them and really have a lot of different options here inside of your fills you can also st

roke anything like let's say we pick maybe like this pink color and we can choose to make it on the inside and kind of increase the size of our stroke and let's change that color because it's a little bit atrocious also you can add effects to any element inside of figma so i can go down here to the effects panel and make sure that i have my element in view i can turn on the effect and i can select inner shadow drop shadow layer blur background blur you can play with those to your heart's content

but i'm just gonna do a basic drop shadow and we can kind of like play with what that drop shadow should look like i'll bring the opacity of it down and i'll spread it out and i will even blur it a bit and now we have a nice drop shadow coming off of our design the export features inside of figma are really powerful i can kind of zoom in here down to the bottom and you can see the different possibilities for exporting right so once i press export i have my artboard selected i can say i want to

export this at one time right as a png but if i want to add more to it i can add surface suffix or prefixes onto it and i can continue to export these some some workflows some teams you'll work in they want things at 2x at 3x designed at 1x and export it out at 2 and 3 so you get to dictate your settings on how you export things which is really really nice now that we have our export settings we can get a little bit of a preview of how it's going to export and then we can just go ahead and expor

t that and it's going to ask us where we want to put it like on our desktop and we've gone ahead and exported each of those images you can see at different resolutions and sizes which is pretty cool once we've gotten to this point and we like where our design is at we've built it out we want to share and collaborate get feedback the first thing you do is you're probably going to want to share and so to share well like just like we talked about before we're going to say anybody with the link or o

nly people invited we're going to create that link or send those invites and get people into our file once they're here they can hit c or the little comment bubble up above and they can start commenting on our design in different areas we can start having conversations about anything that's being spoken about in right here inside of figma right which is pretty nice and we can mention people and all sorts of things and then once this is done we can resolve that comment now you can also hand every

thing off in an inspect mode what is inspect mode that's the ability to share a link uh and send it to your development teams your engineering team stakeholders and allow them to be here in this inspect mode they can choose whether or not they want to see things for android or ios or get css code but basically what's going to happen is they're going to be able to look at things click on things while in inspect mode and see all the pertinent details that they need properties colors code right eit

her android ios css or jumping over here and even getting like actual like actionable code they can drop in and even sometimes they'll work from it sometimes they'll reference it sometimes they'll straight up use it but all things can be incredibly useful to development teams another thing that can be incredibly useful to development teams is handing them full-fledged prototypes things that they can actually touch and click and interact with so it's not just flat files so let's take a look reall

y quickly at how we do some prototyping prototyping is actually easier than you would think it's really moving over from this design persona over to the prototyping persona and then creating wired up interactions from one state to another so i'm going to kind of give myself a little space here and let's say the user for instance wants to click on this one particular card and that's going to somehow transition us into the next card i'm going to show you basic prototyping then we're going to do a

little bit of work on smart animate with our elements selected inside of our prototype persona you can see that we now get an area we can drag prototype wires from basically linking them to any other artboard or frame or object um on the on our canvas and so when i drag that over we have now created an interaction okay so and we can choose a lot of different things inside of this interaction on click on drag you know while i'm hovering uh the key in the gamepad um you know mouse enter leave down

up there's all sorts of opportunities or options here for you uh in the way that you create your interaction so we're gonna do a simple on click and let's just do a navigate to our art view which is the name of the other artboard we can do it instantly dissolve smart animate but let's do a little bit of a push because we do get a little bit of this representation of what that's going to look like okay so we can say push and we can even choose the easing or create custom easing do we want to eas

e in ease out you can customize this any way that you want it and set the timing of that animation now let's say we i don't click here and we'll head back the cool thing about figma is it remembers your previous settings it's going to try to immediately implement them so with that done we now have a little tag here at the top called flow one you can have multiple flows inside of figma so let's say you have a login flow a sign up flow a checkout experience flow you can have each of these all wire

d together as different flows and you'll see as we press play and open up our prototype which is going to happen right here inside of figma we have the opportunity to select the different flows here on the left-hand panel but now that we have this here you can see that we can click and we get a nice simple built-in baked in kind of like push interaction now when it was going back the other way it's a little funky right it should push to the left and then click caterpillar and click back to the r

ight we probably need to fix that so why don't we come back and if you need to edit something you can always click right on that prototyping line and let's push back the other way and now when we do that we should get a pretty seamless experience here now maybe that's not what you're looking for maybe you want a little bit more interaction so i'm actually going to grab this prototype line and delete it and i'll grab this one and delete it also let's start from scratch maybe you want a little bit

more i don't know interactivity i'm going to drag another version over and i'm going to call this home 2 in my layers panel and from my design profile or persona over here i'm going to click inside i'm going to drag this over and i'm just going to place it here on the right hand edge let's create a drag gesture and use smart animate to really showcase like the interactivity here so i'm going to go back to my prototype persona i'm going to click up on this entire area and i'm going to wire it up

to my next artboard i'm going to say on click i want to navigate to home 2 and i want to do a smart animate but not on click let's do on drag instead and let's do a nice linear easing we don't need anything special and then we'll come over to this one and we will just go straight back doing the drag gesture let's press play again we should be able to drag over and we should be able to drag this way and drag back all right that's looking pretty good and maybe what we should do is also add some s

ort of hover effect to this now we could do exactly what we've done here is pull an artboard from one over to the other and uh kind of animate or change the states in between but what if we had something for instance like our button here and we know we have our our component that we've created and we want to create some sort of hover effect not that there is hover on mobile applications but why don't we grab this and bring our button in let's figure out how we would do a hover animation again we

could do the same thing we did before which is duplicate the artboard and and animate from one screen to another but figma has given us the ability to have interactive components and so and i want to create a variant of this button so that the hover animation is baked right in no matter where i place it there is a hover animation that is just ingrained in this component to do that i'm going to create a variant and you can see in my right hand panel here i have the variant option as soon as i pr

ess that i get immediately this nice little box that's drawn around both of these buttons this one is going to be variant number one and variant number two we can give descriptions and links to these you can even change the property of these if you want right this one says variant two let's call this one hover like that you have default and hover and now what do we wanna do to this variant well i'm going to zoom in a little bit so we can work on it i just want to you know darken up the um maybe

the so like the color of the background and then why don't we actually uh change a little bit of the spacing we want to definitely create prototyping in between these two states so what i'm going to do is with these two these are two states of the same component i'm going to prototype i'm going to drag and wire to the next one and say uh uh while hovering i want you to smart animate to this one and let's do a little bit of an ease out uh ease in and back kind of thing okay now because it's hover

it's and we chose while hovering we don't need to select one for the other one as soon as we're not hovering it should just go back okay with that done let's go back to our assets panel drag in our button that has our baked in kind of like prototype let's press play on this and we should be able to just hover right over and we get baked in interactions for everything all right i feel like i've hit you with a ton of knowledge about figma all the basics of basic tour even some advanced techniques

like responsive resizing components variants and a whole bunch of stuff there are other videos that i've made that are fully dedicated to some of these topics so if you want to study a little bit deeper make sure you check out some of the videos i've linked up here in cards and down in the description i hope that this basic introduction to figma will get you up and running fall in love with the software and really start creating some amazing stuff if you have any questions about anything that h

as to do with figma make sure to leave those down in the comments i'll try to get to them as soon as i can check the description for some helpful links like and subscribe to this channel hit that little bell notification icon so you know when another video like this one comes out i hope you're having an amazing week designing amazing things making amazing things and enjoying it while you do it we'll see you in the next one