what's up everybody I'm Jesse Showalter and I'm really excited because today we're taking a look at an amazing piece of design software it's great for collaborating and prototyping and designing perfect for web designers and UI designers and people who want to do digital design of all sorts that's right today we're taking a look at figma this video is all about getting up and running with the basics of figma so some of those basic design tools at or around the interface as well as some of the key features of figma like collaborating and prototyping and all that good stuff this would be a great video for people who have heard of figma but haven't taken the time to dig in and find out if it's the right fit for them with all that being said let's get started [Music] okay so jumping right in taking a look at the screen I'm at figma comm and that's where you would go to check out figma to download it to see all the features that it has but really right here it says it all you can design prototype and gather feedback all in one place with figma it's available online on Windows on Mac on Linux on everywhere because it really in the end is a browser-based software and because it's browser-based I think that's what opens it up to be a platform that allows you to do so much because the browser can do so much a lot of people have called figma the Google Drive of design tools I can get down with that that's definitely a piece of it but there's so much more when it comes to collaborating and working together so after you've downloaded you can just open up figma like so and this is the exact same way to look in the browser it's the same way that it looks when you download the application first things first this is the dashboard this is where you'll be able to see all of your recent projects I have a few test projects in here if you drop down you on your name here you'd be able to see your account settings and sign out you'd also be able to see drafts and any deleted files any shared projects that are shared to you so you can actually have access and then also you have your different teams we're not going to go too much into the team thing today but that is definitely out there and available up at the top you can see I have the ability to create a new file but I also have the ability to import a file figma will import sketch files I think that's the only format that will import right now but that's really helpful if your sketch user you want to transition into using figma in by yourself or in your team I think that's pretty rad so you could do that as well but let's create a brand new file by pressing that plus you can see that we're gonna get almost like exactly like a browser right we're gonna get a tab up here and it's untitled and we can just drop down and rename this figma test and now our file is named if I wanted to go back to my dashboard by clicking my little icon you can see there's my file right there I can click back over and you can see that it is in my drafts so that's that's looking pretty good I can move it into a project if I wanted to so let's say I want to move it over here into it's part of this project now it's located there I go back to my dashboard and I click in here and you can see it's all organized so there's a folder structure there's way to organize things even though it's all browser-based and also if you really really wanted to once you were in your file which currently has nothing so it's not super amazing you could come to the menu and go over to file and you could save it as a dot figma file if you really wanted to have a physical file it's available to you now that we are in our project you can see this is the basic kind of interface that you'll be working with the majority of the time over on the left-hand side you have a list of possible pages right above that you have the menu that we just looked at that has all the different options all the different things you could do so that's available you have your move and your scale tools anything that has a small white arrow next to it is going to tell you there's more tools underneath it similarly we have the frame which is kind of like your artboard tool and you have the ability to slice things if you're gonna do exporting out to the web and whatnot and then you have all of your shapes and all the things you would want to insert rectangles lines arrows ellipses polygons stars and you're able to place an image as well you also have a pen tool and a pencil tool as well as a text tool and a comment tool we're gonna get to all those a little bit later here in the pages section this is where you're also gonna get all your layers as you start dragging elements out you'll see the layers appear there in the layers panel if you want to create a new page you can do that and have multiple different pages going if you want to duplicate or delete or rename pages you can do all that by right-clicking kind of standard stuff we have a shape on the artboard you can see the rulers are exposed and you can you know turn all those kinds of things off by going up to view so if we wanted to turn our rulers off we could but we also have guides and layouts and grids and pixel grids and outlines similar to like Adobe Illustrator all that stuff is in those menus I'll let you explore those I'm gonna stick to the main interface up at the top you have some different tools so being able to edit an object you can click that and it will open up the Edit object kind of tool so I can actually click individual nodes and move those around we have some really smart snapping going on so that's really nice and you also have the ability to you bring up the drawing tools as well as bring up the bend tool and kind of like edit things so you can do a lot of maybe icon design vector design in here as well you can also get to this same kind of interface of editing a shape just by double clicking it and not having to go all the way up here and click the Edit object button over here we have the create component button which there's a hotkey for that as well but creating components one of the main kind of primary things you want to do in user interface design creates a reusable component and now we'll notice this part of the interface down at the bottom left we're currently in the layers panel but if we click over on the components panel you can see I have my rectangle and I could rename this component if I wanted to I think you could do that by double clicking on it and calling it let's see maybe we call it button and we just make it more the shape of a button now if I go back over to my components you can see it's right there and I can drag instances of my button out onto the canvas interesting to note and figma there's no symbols page or master page everything just happens in your main canvas or your main work area so if I was for instance creating a design for an iPhone and I had placed this button here if I delete this button which is the master and you can tell that by going back over and seeing the icon let's just drag the other one on here and we'll delete this the difference between these two you can see this one is empty and this one is filled using that component kind of iconography this is the empty component iconography which represents an instance versus the real deal right so that's the real deal right there so if I was ill delete an instance we would still have that button that we could use in our components library but if we delete our main component well now it's not there it's not usable anymore so that's just a little something to note ok so back up to our tool panel if I have multiple shapes on the canvas and I was to overlap them I can also mask which there's a hotkey for as well I can mask those elements and then I could double click and move that mask around so you have some different masking options again if you double click you can also kind of transform the path there and double click anywhere else to get out of it so that's the way that you would be masking things we can select our mask which is represented by the little Halfmoon shape over there and we can say use this mask again and that will release the mask it should say release mask but it says use this mask so that's the way that you mask objects you also have the ability to if we had something as a different color to use some regular boolean operations right so we can do we can unionize them and or instead we could subtract them or intersect them or exclude them and all of those are gonna stay right there we could also have the option to flatten set object and now that has done like a permanent destructive edit to my shape right there and again everything's still edible so that's really really nice we're gonna draw another shape and just place that in the middle and we're gonna explore the top right over here up here on the top right you have the different people who are currently collaborating and working on this project right now it's just myself but if I was to share this link or somebody else was to open this project and collaborate with me I'd see their avatar their user account right up there as well we have some share options anybody with the link can view it or it makes me the owner I can add different people I can allow them to view it or edit it so that's really really nice we're also able to publicly embed this into a blog post perhaps so people could see it they wouldn't be able to edit it if we didn't want them to so that's kind of nice you can do work and then just kind of like put it on your portfolio so we have the presentation settings which we'll get to a little bit later we also have the view settings which allow us to turn on and off a pixel grid or preview grid or a layout grid all of those are there zooming in and zooming out as well as updating and checking our libraries all that stuff is there we're not going to be working with libraries and team libraries you do have to have a paid account to do that it's a little bit more on the advanced side and not gonna go into that today but the magic is down the right-hand side we now have the properties panel where we can align items obviously we're also able to change the X and the y values we're also able to give things border radiuses like this and I really like this about figma that as you drag if you go all the way to the edge of the screen it will allow you just pick up from the next side of the screen so you don't have to keep kind of scraping over that's kind of nice you can also do that by grabbing any shape and just moving and working the shape and the radius from the different nodes that pop up the radius nodes so that's nice as well also yeah you can rotate all that good stuff and you also have constraints on that we're going to get to that in a second on how to kind of fix things and position them for responsive design but we also have different blending modes so you have your regular blending modes we can turn things on and off so we have the fill panel where you can add multiple fills remove those fills turn them on and off and you can also adjust the what color they are and you know the style of them they don't need to just be colors they can be solid colors they can be gradients you can also fill with images like so you have different stroke and different effects like drop shadow and background blur and inner shadows and you can also set this up to be ready to export and so that's nice we can turn a preview on and off and then if we wanted to export this element we can add multiple export settings with prefixes or suffixes and we can go ahead and export these out to our local machine if that's what we want to do so that's really really nice but you'll notice when we click off the shape there was a few other tabs and we didn't go into and we're going to go into those momentarily but those are the prototype and the code tab which are pretty cool so that was a brief tour of the user interface as well as a little bit of a deep dive into some of the specific tools you might use there on the interface we've got a few more things to cover to get you up and running an understanding figma one of those things we talked about is working responsively and make sure that elements grow and shrink depending on the size of the artboard you can do that really easily by selecting an item and coming up to constraints and you can choose how you want them to operate on the y and x axis and so you see we have left and right on the x axis we want to scale and then we want to stay pin to the top it's represented by this awesome little chart here but you can see as I grab the artboard it's gonna stretch with me let's make both of them scale there we go so now if I was to stretch things out it's going to scale you know responsively versus grabbing this and making sure it's just anchored to the top you're not going to get any scaling vertically we've already talked about adding shapes but just to cover that again it's just going up and learning ha keys or using this insert menu so you have lines and arrows and ellipses you can also constrain the proportions by holding shift and grabbing one edge and kind of constraining and transforming them that way also each individual element has a different node that allow you to do different things for instance the ellipse tool allows you to change the arc you sweep that back you can change where it starts and then you can change a ratio so now you can create pie charts and donuts some different types of shapes that were usually a little bit more complex and required a little bit more work the next thing we haven't talked about is the pen tool which is a really good pen tool when it comes to just pen tools in general there's a nice icon that represents it and it's really really responsive you can click and draw and you'll get a nice strong line you can hold shift and you'll get increments I think of 15 degrees or something like that so that's really really nice to keep you on track there's really nice smart snapping as you go and you can also click and drag and start creating a Bezier curve as you do so now once you create a Bezier curve and release your next curve is going to be smartly curved so I just think that that is a really interesting thing you can lock on to different smart guides as you go but it is going to be bezzie a curved and then you can complete your shape if you wanted to and be all done once you're done you can press escape and there you go you have your shape that you can fill and play with and do whatever you need to do you can also double click go back in and grab the nodes and start moving those around if I'm outside of it I can rotate my shape and then double click back inside and start you know working with it again ok next thing we want to talk about is the commenting system that's built right into figma which is really really nice to have once you have your awesome design on the screen like this one which is actually not so awesome you can come up to the comment tool and you can just click anywhere on the screen and leave a comment once you post that comment it will be there and be ready for other people to interact with ok so once you click the arrow tool all comments will go away but when you click the comment tool again you'll be able to click on comments and see what's going on with them right there in the design say hey I like this and then reply back after you have worked through different issues you can resolve them and the comment will no longer be there so the next thing we need to talk about is prototyping which is an awesome feature inside of figma if I had another artboard I just drug that over to the side we could go over to the prototype screen and immediately that's going to have any element that I click on give me a prototyping node that I can lead to any other artboard that I have on my canvas so let's say we were going with that one and then I'm gonna click here and lead myself back when you do that you can decide what the interaction needs to be on tap for instance and then you can change the behavior like we want to push this over from the left to the right we get a little transition preview and then we can press the present button and get a browser-based preview of the work that we've done so I get a nice preview here I can click and we'll see a transition and instantly transition back so you it was so instant you didn't even see it go back we can close that tab and just move things around a little bit so that we can see the difference open it back up prototyping is just really really smooth really really easy in figma I really really enjoy it and there's not much else to it really besides sharing that prototype like we already talked about but that's prototyping for the most part last thing we need to know about is exporting work we already talked about exporting things as individual elements you can slice things and export those out you can save your project as a dot figma file but you can also head over to the code tab and you can see the different versions of code whether it's iOS or Android or CSS and you can actually leave this and make this available to your engineering team or to your developer which is a really really nice touch if the code aspect is really really awesome it's everything a digital tool should be it allows you to not only design but immediately implement into code and that's pretty much it that's it that's the basics of getting up and running with figma hope you guys enjoyed the video if you did make sure to leave a thumbs up and subscribe to the channel and hit little bell icon down below so you know in a video like this one comes out if you have any questions let me know down in the comments I'll answer every single one of them I promise hope you guys are having an amazing week designing amazing things making amazing things and using the software that makes your life easier I'll see you in the next one