Introduction to Figma - 2021 Beginners Tutorial (Everything You Need to Know in 20 minutes)

if you've been thinking about using figma in 2021 this will be the perfect video to get you confident and up to scratch to get started with this powerful software for ui and ux designers let's get right into it all right let's get right into it no time to waste before we get into creating a new project i just want to say figma has released a new section called community it's in beta right now it's just a wall of free resources for you to get instant access to so if you hit on community if you want to find some 3d shapes for your project double click on this item hit duplicate open up in a new window and you get ins literally instant access to all these resources that people have created that you can use in your project right away so looking for freebies head over to community without further ado let's get into explaining to you and giving you a rundown of how figures set up so shared projects you'll notice it's here shared projects is really when another team has invited your very own team into a specific project and it becomes shared hence the name shared projects however it gets clustered and it gets organized in its own different section below that i have a section for clients i've created a new team just for all my clients and i've also created a new team for all my personal projects as well so let's head into youtube domination demo and obviously this is a project and i'm going to create a file within it clicking on new file takes me right into the place my little abode of where i am going to be changing the world and this is where you'll be changing the world in 2021 by designing some of the world-class experiences for the world to use three sections that you need to understand you've got the menu bar up here you've got the left menu bar and then you've got the right menu bar it's going to be very simple i'm going to get through all this in a couple of minutes so what i want to do is i want to focus on the key areas because i know a lot of this stuff is fairly basic and you probably already have experience or knowledge about this but hitting the delicious burger menu what i want to take note is the save local copy now this figma allows you to save your entire project um this sort of this project that you have opened up into a local file called that will be a dot fig file what that means is when you send it to a client they'll be able to download that file upload it to figma and they'll have direct access they have the source file the reason why i like to do that instead of having to share give them access to the file forever is because i would need to pay for their membership every single month and i don't want to do that when the project is complete and i'm happy to send them the raw sort of source file so take note of that everything else is quite self-explanatory not going to waste your time so you've got your move tool you've got your scale tool these are quite standard if you've used any other programs such as illustrator and it's your first time using figma we have a frame which is pretty much in other words an artboard so you can hit f on your keyboard or you select from the menu and on the right hand side you'll notice that we have a number of starting templates that we can work from so let's say we want to do a desktop application then we've got the 1440 by the 1024 which is my favorite starting point for every web project now on the right of that you have all your shapes so simply remembering the keyboard the keyboard shortcuts is a great way or you can select it from the menu so the good thing about figma is you can quickly adjust the border radiuses on these on these shapes by simply hovering and clicking on the little nodes or if you want to get the eclipse you can also create very quick pie charts by clicking on this node that's pretty cool and then you have the pen tool everyone's used the pen tool before you can create these wobbly shapes that designers love and think are in trend all year round this is probably the best blob that i've ever created i'm kidding don't judge and then you've got your text tool everyone knows about the text tool no need to go through that the hand tool is uh what i prefer i like to just hold down space on the keyboard to move around a specific canvas it's just a lot easier than having to click on this little icon up here now let's say we've created a beautiful logo for this client and we've made it really big because they just keep asking us to make it bigger and bigger we can let the client know by clicking on the comment icon or c on the keyboard clicking on the shape and we can tell the client who in other words michael here that this logo is already big enough how much more bigger do you want it emoji face you can pick a little emoji and you can post it now they'll get a notification and when they want to respond they can respond it and when it's done they can click the resolve comment now you're probably thinking where did that comment go where did this appear to this is some sort of dark art sorcery well up here in the little drop down you can click on this little drop down and you can show resolved comments trust me if you're new to figma you will miss that and it will frustrate you so that's where you'll find all your resolved comments now on the left side in this menu it is where you manage all your artboards sorry your your frames and all your layers very standard so let's say we've got a couple layers you can manage them or here you can hit command d um on your keyboard to duplicate this uh actual frame and you can see that it's now duplicated which is great assets this is where you manage all your components and design systems right when you first start out as a designer it's probably quite empty but as you start to spend more and more time on figma it gets very very complex and it gets very very heavy so for example let's say i've created this new project for me i in my design process i have my very own design system i can turn that design system on and it gives me instant access to all my little buttons and components that i've created so i can head over to search for button or sorry button and i can drag and drop there we go and it just makes it very very simple so we'll have a video don't worry we'll have a video to go through all this in detail but this is just to give you a high level overview of what this capability what figma has for you to uh to use so that's pretty much it then on the right hand side we have the share icon so well let's talk about this little icon here this shows this is me and figma is sort of has a reputation and was a renown for their live collaboration um functionality when they first started out the more people that are part of this uh file the more bubbles that are that will pop up so let's just quickly open up my fig bar and our sort of local application let's go into this file here you will notice that you will now see michael here that is my twin right my twin is in my file and he's gonna start messing some stuff up so let's just make this a little bit smaller so start messing some stuff up and i should be able to see his cursor here now let's say i want to see what he's doing i can actually click on his there we go i can click on his um actual icon i can see the view the actual view that he is in so it's very useful when you're collaborating with another designer probably less useful if you're going to give access to your client now one thing that i always try to avoid is giving edit or view access to a client within this view the only view i give them access to is actually the present preview mode because the reason why i don't want my clients or yeah my clients to go in and start giving me feedback on my specific designs when they're still in work in progress i share this prototype this view through here to share it with them because then they can only see what i want to present them with if that makes sense so we'll talk about that a little bit later but that's a little hack that i have in my process now here we have the zoom so these are stand very standard zoom in zoom out and you can obviously share this design file with other designers or people in your team so here are some of the design settings now on the right hand side you'll see design prototype and inspect now if you're a designer design and prototype is probably more than enough for you if you're a bit of a code wrangler and you like to push write some code or you're actually working some developers or you're a developer yourself then the inspect will also work really will be very useful for you they provide css ios and android sort of component styles um that you can grab really quickly from here and depending on how you want to view it you can toggle it from here so without further ado let's go into the design aspect so let's click on this frame we'll click on our first frame and you can see there is an array of different options that we can have so obviously you guys have probably know what the alignment tools do you can make your shapes dance around so left center right top middle bottom and you can see that move around quite quickly so fairly simple you've also got your x and y axes that you can toggle here you've also got your width and height that you can toggle up the shape or you can actually just hold down shift and you can drag this shape to make it larger or smaller and keeping the same aspect ratio you've also got the rotation and you've also got your border radius if you want to create individual water radiuses for the shape and make it very wonky and sloppy then you surely can with this item here so let's delete that you will notice that when i click on this uh this frame there's also an auto layout feature we will have a video where we go deep dive into the audio layout feature because there is quite a bit to cover in there but for example let's say we have a list of items that we want to create and over time things get a little bit messy and we know for a fact that there is not much more to each item than just a rectangle it could be like if they're just repeated items you can highlight and select all these items and you can hit shift a on the keyboard just quickly yep shift a on the keyboard and that will turn them all into an auto layout component you will notice that there's a double bar here you'll see that all the items are within now what this does is it gives you some so some of these complex uh settings that you can very quickly customize um these items in a very systematic way so obviously the direction is set to vertical right now if i set to horizontal it will set to horizontal i can also adjust the spacing systematically i can also adjust the padding so notice that the bounding box of these elements is flushed right to the edges of this shape if i increase the padding just like css it adds space within so it doesn't create make it larger it actually doesn't spread it out it's actually adding more padding and it stays within that same spot that it was in before so if i hit there you can notice that the left and right doesn't really move it's just pushing everything out now you can also adjust where you want to position the elements so let's say i'm just going to very quickly show you this example we'll cover this in another video but let's i've made the bounding box of this frame much larger i can actually start to move these components inside in a very systematic way as well so very quickly i'm able to produce some very highly tactical ui components without doing too much manual moving around it's all done within the auto layout component now sounds good the next thing that i want to show you that is going to come up is the layout not the layout grid let me just quickly put down a example component here is the constraints now here we have an example header right let's imagine this is a header and we're going to have a logo inside it's a very standard component there we go the most beautiful red you've ever seen and we'll group these these two components together so we can hit command g on a apple keyboard and traditionally if we wanted to create a responsive header so if we were to make this canvas larger we would have to manually go in and cr and stretch it and it would also stretch the inside a little bit and it just gets very very messy now what figma has allowed us to do is we can grab this component we can actually on the horizontal axis we can set it to flush to the left and the right of the parent frame so this would be called the parent frame and elements inside are called the child object so remember that so this child object is now flushed to the left and right and it's also flush to the top on the vertical axes so what this does whoops and before i do that let's just show you for example it will start to stretch everything um left and and make sure it sticks to the left and right and it keeps the same aspect ratio as when it started makes sense but obviously if we're designing responsive elements we don't want the logo to be um stretching out as well we want to make sure the logo stays the same so we've set the constraints for the for the parent component now if we go in and we select the logo what we can do is we can change the left and right on the horizontal axis to left and then we can make sure that that's the same and then now if you double check it's the logo is set to left and the top the rectangles left right and the top so if we grab this zoom out and we grab this artboard then ta-da we can create mobile tablet desktop experiences with a simple dragging of the canvas i'm sorry to say it's not that easy but hopefully this gives you a fundamentally good understanding of like how we can achieve very quick responsive templates um within figma obviously as we get more more complex with more ui components the nesting of these components and the constraints system will get a little bit more complicated but it's not rocket science all right so we're nearly there let's go through if you click on your actual frame itself you can also add a grid or a a grid system or a layout system so obviously when we're designing for responsive desktop tablet and mobile screens we want some sort of layouts that we can follow by so simply hitting the plus icon here you can either get a grid you can use you can create this as a eight point grid so by simply clicking on the icon changing the size to eight you can use eight point grids if you like to have a vertical sort of grid system a grid flow or you can change it to a column so by clicking on the drop down columns you can change this to let's say fixed centered and i want a width of may 80 and whoops i've got the count 12 column grid 80 guidance are 20 so there we go so you can create grids you can create layouts very very quickly now what else is there to go through then we obviously have the layers um settings similar to photoshop every other design um sort of application you can adjust the layer setting to darken light and overlay and this just creates different sort of manipulations of a photo um so very very simple and then let's just click on this and then we have your filling components so let's just say we'll grab this little let's actually turn this layer off here we go and then we have let's just say this is a logo you can actually click on this color and you can toggle between a solid color linear gradient radial gradients also do an image as well so there we go so really this is a very just simple standard way to feel a shape you can also add multiple layers within this fill so obviously you can have a base color you can add a linear gradient on top so that's actually quite useful and then you can adjust them individually which is fairly very useful especially when you have multiple components and like all these different styles of buttons you can actually do quite some advanced things with this as you move forward similar to the fill you also have a stroke very standard you can set the color you can set the width how you want to position the stroke centered inside or outside so you will notice it actually makes a little bit of difference on the width clicking on the three dot little worm thing you can change the cap so you can either make it a little bit rounded sharp or blunt and you can also create dashed lines as well so that's very useful now in terms of your effects there are four different effects that you can create you can add a inner shadow so you can see a little inner shadow there clicking on the icon will give you ability to adjust this as well so you can create increase the blur and you can turn up the opacity beautiful button reminds me of the early 2000s then you can also make a drop shadow as well there we go if you want to have a inner shadow and a drop shadow you can hit the plus icon and there we go what else do we have here we can also do a layer blur so that actually blurs the layer you can't really blur you won't really see the difference but you'll blur the layer and then also you can do a background blur so let me show you the black background blur let's just go in and say mizko loves his fans his fans we've got some text here and let's say we want to do a frosted look we can go and hit r on our keyboard you can do it make a quick shape make it white you can hit over to go to your effects turn this to background blur and the mistake that i used to make here is i would change the opacity of the layer settings don't do the mizco mistake go to your fill and change the opacity on your fill and that will be able to give you a frosted look so you can increase the blur by by changing and toggling the background blur setting here and then obviously when you're ready to export this beautiful beautiful juicy red button that is going to give you 100 conversion rate head over to your export you can change the sort of the uh the export size you can get a really big one if you want let's go four times because we're gonna get huge gains in 2021. you can change the different output so png jpeg svg or a pdf and pretty much that is it you can see a little quick preview and you can export out the icon button sorry and obviously there you go so hopefully that gives you a very very quick rundown and good understanding of how you can use figma and the potential of it and i will be definitely following up with a number of different videos of how you can create the perfect topography scale you started to build your very first design system how can you utilize variants which is a new figma tool so make sure to like and subscribe to this video so you can get the latest updates and videos about figma's new features alright guys hope you guys enjoyed this i will see you in another video very very soon [Music] you

Channel: Mizko

Views: 25,320

Rating: 4.9615383 out of 5

Keywords: figma, figma tutorial, ux design, web design, ui design, figma tutorial for beginners, ux design tutorial for beginners, figma web design, ui design tutorial for beginners, user interface design, ui design tutorial, figma basics, figma design, figma ui design, yt:cc=on

Id: TYhp4s-vjK4

Length: 20min 55sec (1255 seconds)

Published: Sun Dec 20 2020

Reddit Comments

[u/instillpodcast]

This is fantastic! I hadn’t tried Figma but watching your video made me want to get started. Subscribed to your YouTube and excited to learn from you.

[u/roninshonuff]

Cool.

[u/Spizak]

Great stuff, we’re planning to move to it (possibly soon) and we just had a chat about this within our team. Best New Year wishes from UXers at BCG ✊🏼👍🏻👍🏻

[u/mediasteve66]

u/mizkos One caveat I'm running into with Figma is the limitations if your organization is bought into testing prototypes with Usertesting.com.

Unlike XD, Invision (and maybe Sketch), UT.com doesn't have a good integration with Figma. The prototypes keep the browser chrome at the top and bottom as the test candidate is using the prototype.

UT.com has little documentation to help. I'm aware of other tools such as Maze, but that isn't an option for me currently.

Has anyone experienced this or found a workaround?

[u/doublespeek]

Thanks for this. I’m currently taking UX classes and starting to research the different software options. Subscribed to your channel!