Figma in 40 Minutes

what's going on guys so you might have noticed my intro didn't play and that's because the channel has been stolen for the day and i don't have any control of it so uh today's guest deved actually took the intro remixed it and he's also going to announce something that i didn't want announced just yet i wanted to wait a couple months but it's it's out of my control so he's going to do a figma crash course which is a graphic design and prototyping tool and he is going to kind of just show you the rope so it's beginner based and he has a channel pretty large channel called deved and he does coding he does tutorials he does design reviews and ui stuff and then he also has a new channel called produced by ed where he does photography camera microphone reviews video production so it's more media based so even though he stole the channel for the day it's fine i forgive him he's at least uploading some quality content so check his channels out and subscribe and i guess i'll let him take it from here [Music] [Music] wow amazing good morning my gorgeous friends on the internet i finally stole traversing media's channel it's good to be here the money is good he's busy making his rap album so it's gonna come out this year so i guess this is an announcement video this rap album is coming out in 2020 so i'm very excited i'm gonna do a review on it personally but until then i guess i'm gonna do a design video on this channel so i'm gonna teach you how to use figma because it's a very important tool to create websites so rather than just coding things out and figuring out the design on the spot you open up figma you do the design there you align things there you drag your images in there and build out a prototype super fast and you can do this like really fast in five or ten minutes if you're very efficient and then you have a foundation to build out your website i don't know what i'm talking about i'm not even a coder nor a designer let's do it okay so let's get going the first thing you need to do is download figma actually you know what you don't even need to download figma because this is a browser-based little thingy okay so you can actually just open it up there now you're not gonna have all of these projects that i have here or maybe you might but here is where we create a new project now there are some other things here you can create a team and then you can invite people and you can work together on a design hold hands kiss each other but we're not gonna do that and we also have plugins now this is very good to basically add things like checking contrast on colors you can add plugins to basically import images it really doesn't matter right now or even flaticons right there so you can import kind of logos and stuff like that so this is a very cool little feature that they implemented recently and yeah but for now again i don't want to complicate you with different things so we're just going to keep it simple there's our also search here reasons the things that you've been working on and drafts so let's just make a new project how do you make a new project you go up here to the plus and you click and clack now let's rename this we can go here and just click on it and we can say learn sigma gigma figma okay very good so the way this basically works now if you haven't done any photoshops or things like that this is our layer panel so basically everything that we add like an image or a text or uh what else can you add a shape it's gonna be inside one layer and then you can turn it off you can position it the way you want we're going to see in just a bit but the first thing that we need to do is actually make a frame and that frame is going to basically represent our screen so if we design for a phone then we're gonna go here to this tool the frame tool and then we would have to select now here on the right as you can see we have all the different properties that whatever we clicked on has so in this case the frame tool has all of these so we can select desktop if we're designing something for a phone we can do that here for now we're just gonna click desktop and this is gonna give us a super basic desktop uh frame wow amazing okay so if we scroll we go up and down if we hold ctrl and scroll then we go in and out so we zoom in and zoom out and it kind of depends on where your mouse is so if i go here with my mouse mouth then it's going to go there now if you don't have control and you're on a mac then i have no idea how to help you i'm sorry it is what it is okay so let's continue oh such a great tutorial okay so the first thing i recommend is actually renaming this and let's just call this desktop screen like that so we know what's going on okay so now here we have all of these options now starting off here is the x and y this is basically the position in the world here so you can have more frames and you can kind of position them the way you want you can also just grab the text up here and kind of position it the way you want so uh like i don't really do this at all you can even change the frame uh from vertical to landscape if that's what you wish for and there's also a resized fit here okay but i'm going to leave it like this also you can move around like this if you hold either space or you can even do the middle click middle middle mouse scroll thingy so hold it down and then you can move around like that too okay so i'm just going to kind of go through this very fast this auto layout feature is something new is kind of so maybe you can do a card system and i'm even going to show you just in a bit so we're going to kind of skip over these but the most important ones are fill here which you can add a random color to this and there's stroke this basically adds a line here at the edges so if i increase the size of this and change the color to something else like that as you can see it just adds a little stroke across you can do inside you can do outside or center as well you can hit the plus the minus damn it the minus here to remove it or you can hide it by clicking the i and that that same thing is going to apply here in the layers there's also something called effects we're going to look at into this and export which we're going to look into this as well let's just keep it simple right now okay let's add something in here so here you're gonna have different kinds of shapes that you can add like rectangles lines stars or place an image for now let's just drag out a rectangle and as you can see now it kind of changed and you have the options of the rectangle here so you can change the color of this you can add a stroke you can add an effect and let me kind of illustrate how that would be useful so i would go white here you can resize this the way you want now it's kind of hard to see but i'm going to just click here on plus to add an effect and as you can see you have drop shadow layer blur background blur just different effects that you can use so for this one i'm just going to open it up here so we can see the effect properties and x is basically going to be the horizontal i'm going to leave that as 0 blur let's increase this to something like 30 so 30 pixels and there you go we have a blur it's dark we can increase the opacity here so if i do 50 it's gonna be it's gonna yeah it's gonna be more pronounced let's do 30 and we can move the y down to 10. so there we go we have a simple little thing card that's what they call it i can resize it here and i can even grab this dot here to kind of make the corners very smooth just like that maybe this is a bit too exaggerated so i'm gonna do 20 so something like that and then lower this to like 35 okay so there we go that's how you make a little card if you hold shift the size is gonna remain otherwise it's gonna flow freely like that you can hold alt to duplicate things if you want just like that okay we know the basics wow we can create stuff again here in the layer tab i can lock that that basically means i cannot grab this so this is very useful in case you add things to the background like a background image or something like that you don't want to grab it accidentally so you would lock it okay and you can also hide and show it very cool okay so that's one another important thing here is the pen tool i'm not going to cover the pencil because i don't use it at all almost but with this one you can basically click click click and you can make different shapes because with figma theoretically you can also make simple vectors so if you want you can basically make a simple logo or something so in this case maybe i want to make a hamburger icon or something so i can theoretically just click hold shift to make this straight and click and then i'm just going to go and hit ok and that's going to make a line i can increase the size of it here to 10 and i can duplicate this by holding alt right and there we go we made a super simple hamburger that's a thick hamburger i like it tick that's fine that's perfect and that's super big but you can create super simple shapes here now another thing you can do since a lot of shapes are how do i explain this we can combine shapes to create other shapes so for example i'm making a snowman i'm just gonna grab the circle tool and just grab and drag it out like that i'm gonna make this dark okay so we have one there and i'm gonna also just duplicate this and drag it up like that and i'm gonna make it smaller just drag it here okay so something like that now what i can also do is just grab this and grab this so these two okay and what we can do is go up here and we can combine these shapes so i can do union and that's going to just combine it and just make it one shape we can also do subtract that's going to remove it so now we have a little moon going on or something this is a little moon logo what kind of moon is that jesus something like that reshape this down and you have other ones such as intersect and exclude play around with this see what you can come up with i just made the little moon or pac-man depends on what you like and i like it so now here we have the text so we can add something like moonshine and here as you can see now these settings basically change based on whatever i have here so in this case we have text so i get text properties so i'm just going to make this bigger like 24 and the nice thing is since figma is on the web basically you have access to almost all the fonts you don't even need them to be installed on your computer so i'm going to pick one that i really like which is montserrat just like that does it fit not really let's do fat face yeah there's no fat face i'm not sure how that thing is called okay never mind let's move on i'm gonna do bold here and just move this down and boom but i'm bomb we have moonshine let's move it to the center okay so something like that let's see what else we have here we have the pen i guess that doesn't matter now because you learned that you can hold shift and finally we have this little bubble here that basically allows you to add a comment so this is a terrible logo you can do this for you if you want to have it here as a reference or other people can also see it and then basically leave each other feedbacks but i'm lonely so so yeah this is unfortunate but it also appears here and you can basically filter them only yours you can select all or you can also resolve them okay so here check check okay i'm not sure how you remove them let me see how do i remove this oh there we go delete comment fantastic wow we learned we're learning so much here okay so what else do we have here let's take a look let's grab this text and move it down here um we have edit object so this just basically goes into the properties here so that's quite simple but you can double click which is like it's fine uh what else what else what language was that what else you have here is create components and this is very useful when you have when you want to have kind of like a finished something so maybe a card system or maybe you have a specific section on your page and you want all the other sections to kind of look the same or inherit the properties so maybe we're making a navbar so we have home here let's do home okay so let's do that i'm gonna just create the component click that and now it's a component so now if i duplicate this two more times okay i can change the text here to about and i can say something like contact okay what i can do now is go back to the original here and basically i can modify the colors if i want and all of them are going to be affected so this is very useful to create that and even if i change this as you can see the resize so that's super cool we can add a background to this if we want to kind of make it like a button and take a look so this is super super cool okay let me remove everything here let's get rid of it and let's see if there's something else i'm missing oh there's also a mask so basically how mass works is let's illustrate it here so we have this moon actually what we can do is just import a picture let me see if i have a plug-in here with some kind of pictures photos wow does it work there we go so let's search for a let's do nature because we all love nature we as programmers we love it okay click so this basically imported the image and actually added it as a fill which is annoying so let's go back okay what i'm going to do is actually just go here to place image now never mind that actually opens this one up um let's do a rectangle here and i'm just going to drop it in that i think that's how this plug-in works otherwise if you're just if you just have something on your computer you can just basically drag it inside so yeah you can just drag it and drop it this is a big picture here so let me resize it okay so super easy if you already have it on your computer uh this plugin again i think i need to select the rectangle and go to photos and then i think it drops it so let's do nature again and see if we can find a landscape landscape landscape there we go okay yeah okay so we have to drop it in a rectangle fantastic okay let's resize this and let me illustrate what the mask does so maybe you want to make this a circle or maybe you want to cut off a certain part of this image so what i can do is let me remove this moon is let me just go to a eclipse drag it out hold shift like that okay and what i can do is i can use this as a mask so click on that and now if i drag basically the image on top of it like that as you can see basically crops the image to fit only the circle there we go so now i can also move the image around and just create this cool effect so this is very useful especially when you have like a card system with like users or something so let's go here to the text and say users or maybe you have a testimonial or something that's that's them i don't know english so i apologize if this is not correctly written um and then you can just do this you can import all your pictures all your images so let me drop one in here resize move it here and then just grab basically a circle just drag it out kind of make the size that you want and then we can use this as a mask and then just drag the image on top and then position it the way you want and wow look at that amazing what is this technology so again if i'm clicking here on now as you can see it moves the thing so this is why it's very important to lock your layer so just go to the image lock it and now i can just select this little thing and actually that moves it as well so what you can do is kind of group everything up here so we can grab the eclipse and the image and just hit ctrl g and that's going to just add it to a group and we can expand this and see what's inside but we can now independently just move this whole group of things okay you can do this with anything so if i have this text more texts okay if i move this on its own that's fine but i can grab all of them and just hit ctrl g it's gonna group it and here and now i can just move the whole thing okay let's go back get rid of that get rid of that and there we go so now we can have your your clones right here because we're taking over the world perfect very nice okay so those are kind of the basics let me see if there's something else that's important here let's kind of put something together and then we kind of go over all the rest of the things because i also want to show you prototype as well okay so we're going to just create something super simple i'm going to just basically understand how what language am i speaking okay so let's put something together here and then we're going to go over the rest of the properties so i just made a new layout here we call this just desktop that's fine perfect super simple okay so i want to have a super simple nav bar up here with a logo and some text now if you're working in bootstrap or you're using grid or flexbox you have some sort of a grid or some sort of a positioning so you know where you place your items you can do that in figma too just kind of as a guideline so you can select the desktop here so the actual frame and you can go here to layout grid and click plus you can change this to basically column or row so as you can see if i hit column i'm just going to do something like let's do 10 columns and there we go that's our little pointer here we can also change the opacity to 25 so this is more visible and the color two like that okay and basically now i can position things based on this okay so maybe i wanna have a little nav here so what i can do is just grab a text click once and i can say home we can change the font here to montserrat montserrat there we go it's really small but it's good enough um let's make this bigger 24 there we go and change this to medium now a little thing that you might mess up is you might drag the text and that's going to make it like that so you can say home now what's the difference between this and this is basically this blue outline is going to be used to align things so if i drag this as you can see it basically snaps to things and it's going to snap on those blue lines so right now it slaps snaps slaps snaps right there at the end okay but i don't want that i want it to snap basically the sizes of this text so the way to fix that is you can actually go here and click auto width so now if i add more text it's going to resize basically on this so now i can just go here and basically basically snap it we can also create a component so if i go here create component okay i'm going to position this here i'm also going to open this up and grab the home text and just actually you know what i think that's fine like the size and everything so i can just grab the home and just hold alt and just drag and duplicate and position these right here change the text of this to contact and shop or something depends what kind of website you're making i'm just gonna leave it like that okay very nice very cool okay super nice what we can also do is create a super simple logo here so let's go here for this one we're just gonna create a super simple eclipse like that and by the way the way you can position things is maybe i want this to kind of position here and the middle so you can go up here and just click horizontal center left or right okay so you have these options you can also have the vertical options so bottom center and top now the cool thing is if i have a big circle here if i hold shift on the circle and then hold and click on the text i can basically align it based on that circle okay so now if i click here or center here it's going to line based on this the this grid okay so let me do another one here of a rectangle i'm just gonna change this to a weird color a red color okay i'm gonna drag this home up above it so we can see so i grab the text and the rectangle and now if i hit left as you can see it aligns it based on whatever we have selected so there we go okay so that's another cool thing but if you don't have anything selected but the text it's going to align it based on our frame here okay so let's make this small like 66 that's fine put it right above here now as you can see right now we don't have any kind of way to position this because i want these centered i mean you can go here like that and it's gonna add a little line so figma's gonna help you out so maybe i want it to be right in the middle like that okay actually if you want to make this bigger but you want to keep the same size you can hold ctrl and shift and just drag up actually i think it's alt and shift yeah it's alt and shift and just drag this up okay i'm gonna move it kind of in the center there and actually i'm gonna just move everything down a bit so they're not stuck all the way in the corner okay and in here i'm not sure what website this is gonna be we're just having fun right now learning figma let's just make this super dark let's do a super like a bluish dark color and then we are just going to add a text in here to make it look cool so i'm going to click once i'm going to say e and then make this white so grab this make it white put it on top here make the size really big like 50 80. or let's just do s or something something that looks cooler and then just find a weird font that's too weird okay let's actually do um all these fonts are super weird i'm gonna stick with my e and then do bold okay ooh an l and i'm going to show you something cool okay so we have the l there actually everything is too large here so i'm going to just make it smaller like that and then grab the l and drop it in here change this to 60 and drag it down again i need to resize this box so i'm just gonna hit auto height or auto width just drag it right there in the middle okay very cool okay so we have our box let's turn off this grid thingy just like that and what we can also do is maybe add a little shape to this or something i don't know so let's go to the pen tool here i'm just going to drag out some lines like that across the l okay hit done we're going to remove the stroke i'm just going to add a weird fill to it so just hit plus on the fill and i'm going to just add a kind of a dark color like that okay and what i can do is actually mask it to this l so it kind of looks like it's inside the l shape so what i need to do is actually make a mask but i also want to keep this l so what you need to do is actually duplicate this l once so ctrl c ctrl v here and i'm going to make this top one a mask and there we go look at that now it added this shape inside the l so now i can move this kind of position it the way i want so maybe something like that and you can double click on this to further adjust your thing like that what i can also do is add the gradient to it so i can hit linear gradient and now we can select two colors so let's go like that and hit the first one here let's just do a orange like that and the second one i'm gonna just bring up the opacity to the max and pick another something so let's go to the orange again i'm just gonna shift this like that i don't know just something fun okay super simple again the reason why we made two l's here is because one is specifically just used as a mask so now we can grab everything here so the clips all the way up here and just group it up so grab everything make sure i don't grab this actually so eclipse text mask and this one and hit ctrl g okay there we go so this is gonna be our logo fantastic there we go okay very cool so now let's just add some text here maybe a big something visual arts like that let's do monster rot again again i can align everything here to this nicely and let's do another one i'm just going to hit auto wit drag this down learn more about visual content okay just grab everything here this is going to be medium sized and i'm going to make the font a bit smaller here to 40 or 50. and i'm just going to add a little bit of gray to it so to the fill and just bring this down to gray okay grab both of these move it down to the center holding shift so now let's add a little button so the way we can do that is we used to just grab a text and say join now or something and then to this we would just grab a rectangle and drop it behind it so as you can see now the layer is on top so we cannot see the text so we would drag this down below it and then add our stuff the problem with this is when we add more text and that happens but figma added a little cool feature uh that we can use so we can just grab a text we can say join now we can grab this let's kind of make it the way we want let's do bold and small 34 and now what we can do is right click on this and say add auto layout okay and now if we add a fill to it so click on fill i'm just going to choose a color let's do what color did we use here this one i can grab the eyedropper and just click here like that now take a look i'm going to double click to grab the text and change it to white take a look now if i add more here it automatically resizes itself and this is a very cool thing you can use it in cards you can use it in articles or if you have a box of something it it automatically is going to resize itself so it's very cool now if i want to add more padding to it i can do it here in the outer layout settings i can make this longer a bit 20 and height 20. very nice okay i'm gonna drop this up here and there we go super cool i'm going to space this out a bit more and actually i'm going to pick some more vibrant colors here so i'm going to do that and here let's do this one or keep it like that okay very cool we can also do gradients on this if you want gradient and not only one but you can use radial and there's a bunch more here but these are the most popular ones so on this one let's do on the second one raise up the opacity and we can click the other color that we have from here figma is pretty smart enough to remember what colors are used in this document so that's cool okay we can do the same thing here if we want linear change the position of this move this here and here and then on the second one raise the opacity up and click on the orange and close so i'm actually going to align everything here to the left like that to kind of keep a good consistency of everything like that okay and these as well and that's gonna make everything just look a little bit nicer and this one too make sure it's aligned there there we go move this down so it's aligned with this and that's good so let's add something fun here we can turn this off we're not going to need it anymore so the desktop turn that off we can also do a little shape here with the pen tool so click and drag and hold and you can kind of draw different shapes so let's do that one and then go here get rid of the stroke and just add a fill to it and we can again grab these colors if we want i can do linear again let's do from this side to this side or we can just use the blue that we made up there like that and just drag this now as you can see this is kind of out here we need to drag it inside the desktop like that now it covers everything up so drag it all the way down here okay we can double click on it again if we want to grab these points and kind of reshape them the way we want like that so that's cool i don't want this to be too prominent so what we can do is actually just lower the opacity to something like 25 or something and we can even move this down and just stack another one on top of it to get that effect all right so now it kind of blends in together with that okay so that's it that's cool i'm never happy with this you can play around with this for hours i'm just gonna leave it like that for this one i'm gonna just grab that bluish color again and in here maybe we can drop something inside actually i'm not a big fan of this to be honest of having two let's just have one something like that and i'm just gonna make this a bit longer like that okay just for fun so our content is not that empty just move everything up a notch okay so in here again we can add some kind of illustration or something um again for craving actually illustrations something like affinity designer or illustrator would be a better option than figma i'm just going to use something from undraw it's a great little website if you want to search for finished svgs and i wanted to show you something pretty cool so let's search for one here let's do this one download and we can just drag this inside to figma okay where is figma there it is where is it there we go drop it in here now take a look what it allows us to do figma is actually it has selective colors so it's going to take a look at all the image in here all the svgs and you can select all the colors from it so if i change this as you can see it changes all of those colors so what i can do is just sample that or this and then go here to the other one and kind of customize it the way i want so i can even grab this little thing and just change it to this one so now it kind of matches our team here okay so grab this whole thing i'm going to close it up here and i'm just going to make it way smaller so i'm just going to grab this and simplify it i'm just going to get rid of this and this and this and just kind of move everything in here actually we kind of need to go over all of these uh unfortunately to position you can double click on things if you want to get to that specific item okay so basically if you click once it's going to select the whole thing if you double click it's going to go all the way inside there and then you can basically grab and select everything so i'm going to just group everything here ctrl g so i can move this whole shape and again i can kind of customize it to my own liking okay so there we go something like that pretty cool let's go here i'm changing my mind i'm going up an opacity something like that so there we go pretty cool one last thing i want to show you before i go is you can actually animate these pages so i'm going to close everything up here grab this whole thing and the thing that i want to animate is this circle so maybe i want to change the color or i want to go to another page so for now just grab the circle make sure you're on the circle and just name it animate okay so we know how it is called okay so take a look i can grab the desktop ctrl c ctrl v to duplicate it maybe i can have a different page here so i want to navigate from this page to this page maybe when i hit contact okay so what i can do is change this to contact and here maybe we have something different so i'm just going to grab another page from undraw so i'm gonna go back let's do this one for fun drop it in here and i'm not gonna customize this i'm just gonna keep it simple and just put it here okay so what we can do is go on the contact here and then go to prototype and now i can basically select an interaction so whenever we click on something and there's a ton here you can make a whole series on this on drag hovering pressing entering but i'm just going to do on click so basically when we click on contact i'm just going to drag this point to this page so now when we hit play up here it's going to basically just navigate us to that page so look click there we go we are on the contact page now you can also customize the way you want to do this the animation here so you can do dissolve there we go so now it fades in nicely you can have a sliding effect slide in click there we go you can also change the speed here so i can do 500 and even the position of it so from up to down like that and we can also do easing ease in and out there we go so now you have a different effect so there's a lot of customizability here that you can do okay that's one thing that you can do is to navigate through pages with slides and dissolves and moving and moving out but what you can also do is i'm just going to create another one here so ctrl c ctrl v actually let me go back here not to confuse you i'm just going to get rid of this actually no i want to show you something else i'm going to just duplicate the second page here like that what i can also do is chain another animation so after i click on contact it goes to this page and after a certain period of time another animation happens so what i can do is maybe go to this text here or to this shape go back to the design tab and i'm just going to change the opacity to zero and now what's going to happen is if i go to the second one to the prototype i can just drag the point here we're not selecting any specific element just the point here to here to the next page and i can select here not on click because we don't want to do anything else we want it to be automatic we can just do after delay so after a certain period of time it's going to animate to this page okay so here after delay i'm just going to choose after 100 milliseconds animate that thing out okay so now take a look i hit play or i can just go back here i hit contact and after 100 milliseconds actually i think we copied something incorrectly here because it does another slide so let me see here on the second page yeah it does a slide so let me let me change this besides east i mean that works because that's what we told it to do is to do another slide like that but what else we can do is smart animate which is something super super cool so after 100 let's do a wait let me select this drag here rather than doing a slide we can do a smart animate and what that's going to do is basically it's going to detect the elements on your page and it's going to detect the changes of it so in this case we took this here it has full visibility and here we took the the visibility down so it's going to recognize the changes and it's going to animate it so take a look let me go all the way back contact after 100 milliseconds it fades out so there we go those are the basics of figma that's enough for you to get started and you kind of mess around with it and create some prototypes of your websites hope you enjoyed it hope you liked it and until next time i don't think traversing media is ever going to call me back on this channel but it's okay we did it we made it all right peace out bye bye forever

Channel: Traversy Media

Views: 420,387

Keywords: figma, figma tutorial, dev ed, deved, learn figma

Id: 4W4LvJnNegA

Length: 41min 21sec (2481 seconds)

Published: Fri Jul 24 2020