Learn Figma In Under 10 Minutes! (LEARN FIGMA FAST)

okay so i'm going to try to teach you guys the basics of figma in under 10 minutes now obviously this is going to go through a lot of the basics and most of everything that you need to know in order to get started in ui ux design so this isn't really for someone that's already been through figma or through sketch this is most definitely a really beginner course or a complete novice so i won't waste any more time let's just jump right into figma and i'll show you guys how to get started okay so for this tutorial we're gonna use a sample file that figma can give us so obviously this is what you first see when you open the app now obviously you're gonna have to download figma or use it on the web browser but i have it downloaded so let's get right into it so we want to double click on the sample file here and i already have it open so let's go over some of the basics in the navigation and some of the toolbars and the layers and what what are we seeing here right what are we looking at the first thing you need to take a look at is this panel here on the side you have layers and assets every single little tab here that has an arrow signifies that there is a new frame or a new page for example you can either access this by clicking on it or double clicking it to change the name or arrow down to actually see what's inside you can also do that if you can't find it by just clicking on the i guess the name of the frame right so login page we click it and now we see everything that comes down here okay so once we click into that we can then get started with some of the layers now as we go deeper and deeper we'll see that here we have some groups a text some shapes and just pretty much everything that's on this page so anything that appears on this page you can find it through these layers if you can't find it then i guarantee you're just not looking hard enough because it will be here you just have to click through these little toggle tabs and it will appear so absolutely every shape every text every color everything is in these layers next is the assets so sometimes you can choose to create components of these specific shapes but we're not going to get into that right now we'll go into that later next is the top toolbar here so what are we looking at here so first up is this little section here we click that we see that we have move and scale move is to move around objects pages text everything right you use this tool to essentially place things around in your world next up is scale so we're going to use the shortcuts from here or not just because you need to get started with shortcuts to just get so much faster at the program so next up is scale so we click k and now we can scale things effectively right because if we don't this is what happens right it only increases the text box and not the actual size of it next up is the second icon which is frame and slice we're not going to get into slice in this video just frame frame is pretty self-explanatory it creates new frames or new pages so if you're doing a ui for an iphone you want to kind of draw out the the shape of an iphone right now obviously if you want to get really specific with the exact size which i guarantee you'll have to do when you click f all right or click on frame you can get all these different sizes so you got iphones tablets desktop absolutely everything you need so let's say if we want iphone 11 pro click that and it'll create a new frame so that is the shape that you need for the iphone 11 pro x next up is the shape so we have rectangle lines arrows ellipses polygons everything you need rectangles you go from left to right or from right to left wherever you want and you essentially drag out the shape that you need you can also create radii's or radiuses when you click on these little circles here on the right and if you only want to affect one of these radius you go on to here on the right side and you click on independent corners and it goes one two three four so let's say we want to change the second the second corner well then we affect this number and it changes here on the on the shape if we want to change it back we can either drag it out or just change zero the the the numbers so that's all the shapes right pretty basic we can also use it in ellipse and we can use the shift key to kind of keep everything with the same aspect ratio so we're going to do l which creates a line now here we can change all the colors and all the information we're going to go into pen tool and pencil pen tool if you've used illustrator before it's pretty similar to that it's actually exactly like that it's just basically a pen tool that you can change all these specific points and change their angles and how they're shaped and yeah lots of fun so next up is the pencil the pencil has a little bit less control but when you let go it kind of creates a much smoother line so i don't know what cases you would want to use this but know that it is there next up is the text or you can click t for that click on it and it will start typing from left to right so we can start saying hello and we click the escape key to get out of that typing situation then we have the hand so if you are on a desktop and you only have a mouse you can use the hand to kind of go around or use the h key to get into that shortcut and then we have comments so if you're working with a lot of people you can pretty much leave comments here and there and say give suggestions or give approvals or whatever it is you need to do okay so that's pretty much that on the toolbar now on the right we're gonna see everything that allows us to change how something looks what i mean by that is if we click on the rectangle for example we can then get in here and change how things are aligned by clicking the the top row we can change where things are on the page by changing the x and y axis and we can obviously change the size of things by doing that so if we wanted to center this we would click the center here which centers it vertically and center here which centers it horizontally or sorry the other way horizontally and vertically confusing and then again we have the corners here we can change the angle of things and again with the corners if you want to change a very specific one then we have next up it are layers so if you've seen if you've used photoshop before you know all the layer passes such as normal multiply color burn all that right and when you use different color passes or different layer passes it can change the way that some things look on your page how dark colors are how how they're overlaid on top of other images or colors or texts and it's a lot of fun to kind of play around with that next up is the stroke so this kind of gives a border around the shape and you can obviously change what color you want you can either use the hex codes the rgbs the the css anything you want you can change the hex code to give it the proper color you can give it a different transparency and you can increase the size of it however you want you can also change whether the stroke or the border is inside the shape in the center or on the outside so that can drastically change kind of the size of things and how they actually look next up we have effects so if you want to give it for example a drop shadow you can do that if you you can give it an inner shadow so the shadow is now going to look like the sun is coming from above or there's a some sort of sunlight something like that you can also give this a you can also go to layer blur so this will sort of blur the entire rectangle thing that we're looking at and this will also include the stroke so we can increase this so now that that's a really blurry thing and this can kind of be used as a background maybe if we if we want to or something like that and one thing to know is that with the layers however you move them you will then kind of order the the page right so if we change this shape to go all the way to the top we see that it doesn't cover anything because it's in the wrong layer path so if you change it to normal we'll see that it does cover it and the layers are the layer passes in and how things are pretty confusing but as you start to design more and get more into it you can kind of figure things out a little bit okay next up is the export tab so this is pretty similar to sketch if you have used sketch before if not basically it allows you to kind of export certain elements or screens if you want to export a few things together you can select them at the same time using shift and clicking that just selected all of them you go here export and this will allow you to kind of have an image of those four things as a png jpeg as an svg or a pdf so that depends on maybe if you need to send it to your designer or your developer or something like that next up is the prototyping so prototyping is really important in figma it's one of the most important tools in my opinion so we're going to use a really quick example right we're going to click on the login page which allows us to select the entire thing actually no we're going to click on login the button itself i'm going to click on prototype and we're gonna move this to this page right so on click we now know that when you click this or when you when you tap on it it will move you to the next page and that is what that arrow signifies and here we have a couple of interaction differences that we can do so we can change on click we can change it to a drag a hover mouse enter a bunch of things we can really customize it however you want to and the navigation you can change it to a scroll a swap a back whatever whatever it actually is you can make it go backwards instead of front words right and then this is just the what page is it going to right what's the the end navigation goal so here we can see that it's the home frame or the page and then here on the bottom you have animations so you can do dissolve you can do uh move in without all these sort of css animations and you can also get pretty pretty creative with it you have all these ease in animations or you can kind of create your own now this is really cool to get some really advanced looking things or some really specific looking designs and here you have a little kind of preview of what the animation is going to look like now this is something that's really really helpful because not a lot of softwares actually have this so we're just gonna keep it with ease in and we can see how that's gonna look like so if we click on the play button here you can see that if we click on the login or we hover above it there is the mouse tab icon so it signifies that there's something active here right so you can see that it doesn't have and now when we hover it does so we click and we can see how it kind of just animates into place so we're going to go back from the the the actual preview and to the to the home tab or where we were where we were working but we go back to the design and here we kind of see that there really isn't much to it right another quick tool that i wanted to show and just some some kind of just some shortcuts that are extremely valuable and can save you a lot of time is that if you have a lot of layers through a page you can't really get to it and you have to kind of go through all these things and kind of try to find which one you want if you just hold command or control if you're on a pc you can kind of get to any little layer that you want right here we can see that we're literally just holding command and we can kind of hover over and just click on whatever we want so maybe if we want to click on the rectangle itself we click that instead of being able to be able to do that without it right so if we don't click anything we can see that we have to go here double click here doesn't even allow us right we have to go through it another really important thing to use is command y now this will show you everything that's on the page without colors and just as an outline so this can show you if there's something beneath your actual layer so say we put the again using command i'm kind of clicking through here say that we put the login beneath that right now if we click command y we can see what's actually behind it and what we actually can't see without that feature without that command so that's pretty much figma in a nutshell in hopefully under 10 minutes maybe it was a bit longer but i mean i don't know how long this is actually going to take to record but if this but if this video was helpful to you guys at all in any way she performed then i would appreciate you guys hitting that like button or subscribing and doing all of that leaving a comment on something that i missed maybe or something that you have a question on thank you guys so much for watching and i'll see you guys in the next video

Channel: Arnau Ros

Views: 55,273

Keywords: learn figma in 10 minutes, how ot learn figma quick, learn figma quickly, learn figma fast, how to learn figma in 10 minutes, how to get started with figma, how ot get started with figma, how ot start designing in figma, how to use figma, figma ten minute tutorial, figma basics tutorial, how to use figma as a beginner, figma basics quick tutorial, how to use figma as a designer tutorial, how to quickly use figma, how can i learn figma, how to use figma as a beginner designer

Id: nZ57MPVbHUg

Length: 11min 57sec (717 seconds)

Published: Wed Mar 10 2021