How to Master Figma and Design 10X FASTER!

in the next few minutes I'm going to teach you how to design faster inside a figma than you've ever designed before this series of tips and tricks are going to 10x your speed and help you be more efficient than 90% of other [Music] designers the number one way that's going to increase your speed as a designer is to start using a design system and when I say design system I don't mean some sort of massive Enterprise level Salesforce esque design system that you have to build yourself no it can be anything it could be it's just a simple pattern Library it could be a couple of components it's anything that makes sense for you in the project but the key is to build fast and to not have to build everything from scratch and you can do this one of two ways you can build your own or you can use a pre-built system this is an example of a design system that I've built for a client and this was built custom for them that means it has some of their brand stuff in it colors typography it has all the different components like like buttons and alerts we start to build larger components like cards and charts that is me building a system for this individual client or project but if you're not into building your own system you could use something that's already pre-built like Untitled UI this is the pro version that I own and I've used this for other clients and it comes with all the good stuff we're talking colors typography logos uh you can jump in and get individual screens and pricing tables and all of these are componentized down here here so if you need a table they got tables you need a date picker they got date Pickers doesn't make sense to reinvent the wheel all you have to do is start with a design system like Untitled UI and the way that you would actually utilize it is to duplicate the copy that you have and then immediately start editing colors typography spacing to the project specifications and now you have a series of local components or a library that you can push and start using in all sorts of other files this is going to speed everything up because now when you need a search bar you don't have to build it from scratch another way to increase your speed is to use Auto layout for everything and when I say everything I mean everything you can see all these components that have been built out on my screen and when I click into them for instance just this simple navigation bar they are just filled with auto layouts it's an auto layout with an auto layout inside inside is nested another Auto layout look at that there's more Auto layouts more Auto layouts this is like the movie Inception and you were like 10 layers deep and it's all good because Auto layout is the absolute best now again the reason that auto layout is so amazing is because it is the way to build scalable responsive modular components that are epic and can be used all over for instance if I just kind of scroll over and I grab this card that we've built here I can drag it out and because it's built an auto layout all I have to do is shift from a horizontal or landscape mode and I'm just going to change the auto layout to a vertical iCal layout let's grab our image Shuffle it up to the top grab our text and make sure that it fills the container and a few little pieces inside just like that we can even grab our button and say fill the container and now all of a sudden with just a few clicks I have an entirely modular and responsive card and it's because Auto layout is there components are a massive technique for speeding up your design workflow if you don't know what components are it's basically a way for you to create something one time and use it as many times as you want want and the beauty of components is that if you change that Master component in any way it's going to reflect in all of those instances and there are two special features of components that you have to use and start to work on and that is going to be variants and properties you can see here I'm back to that card example we have both of these cards why don't we turn them not into separate components but a component set in figma I'm going to jump right here and create a component set I'm going to name that component card that's a pretty generic name but now you'll notice that we have some properties over in my right hand panel we're going to call this state and you can see that we have two values we have the horizontal and the vertical that means that we're able to actually grab an instance of this card and now we can really quickly change it around from being our horizontal to our vertical and that's happening through the properties and the fact that we have two separate variants now inside of each one of these variants we can create even more VAR able States and properties for instance if we don't want to have an image we can simply select the image there and we can grab the layer as a whole and create a Boolean property and say show photo currently it is set to True let's click this thing back over to vertical and you'll notice we just created a new property for that variant that allows us to take the photo on and off very very quickly building components using variance and properties allows you to create this control center for any one individual component instead of clicking into layers and manipulating things you can build it so that it's extendable and controllable if you want to increase the speed at which you design grids are going to be incredibly helpful they're going to help you establish rule sets and Frameworks to operate in you don't have to ask as many questions and slow down and second guess the work that you're doing if we're inside of figma all you have to do is grab any particular frame or artboard that you're working on you can go over to the layout grid section and turn on things like 12 column grids eight pixel grids this is going to allow us to not try to guess or figure out what size things should be we're just going to know because we're going to align things to the grid now establishing Global Frameworks and structures with grids is incredibly helpful but sometimes you need to dive in and do a little bit of specific grid work and for that I highly recommend an amazing plugin that's available for figma as well as all the other design tools like illustrator and Photoshop but this is called guide guide it is a plugin inside of figma and all you have to do is select any individual element and when you have that element selected I can start to add grids and guides around it a quick left guide just make sure that I turn my rulers on so I can see them let's go back to selecting that button maybe one on the right hand side maybe one you know in the direct middle let's go something on the top and bottom there and now I'm building out grid and guide structures on any individual El that I want I can grab the card itself and we can start to establish some different columns so maybe I want 12 columns or maybe in this case it would be more like four columns I want each of them to be 20 pixels and let's position them in the center add those guides boom I've immediately created this series of guides now you can do all sorts of stuff you can add margins and columns and rows any and all ways that you want and with anything that you're doing you can simply remove all those grids and guides it's a way for you to really drill down if you need to and that's going to help speed up your workflow so if you haven't already check out the description for a link to guide guide I think you're going to love this tool now I've been designing in figma pretty much since the day it launched I've been a figma fan and a figma user and not until just this week that I realized this was a thing and that is bulk image upload everybody knows that you can upload images inside of a lot of areas using like a plugin like pixels or unsplash but I did not know that you could grab any individual element or image you have there press command or control shift K to bulk replace I'm going to find a series of images on my desktop and I'm going to grab them all of those images just like that I'm going to say open and I get this handy dandy little picker that I can immediately just click and add a photo click and add a photo it's going to give me a preview of which photo I'll put that one there and that one there and boom we've just inserted bulk amounts of images into my interface like that this is I I don't I can't believe I didn't know this until recently this next workflow tip has less to do with figma and more to do with your own machine and your own workflows and that's establishing custom commands whatever operating system you're working on you can do this on both Mac and PC I'm going to show you how to do it with a Mac today I'm going to open up my system settings and I'm going to scroll down to keyboard you can see I have a keyboard shortcut option here when I open that up I can actually do application shortcuts and you can add any application that's running or is installed on your machine I've already installed figma and this is probably one of my favorite commands it's actually the only one I need which is to collapse all layers so when I'm done I can just get out of there and you can see quite often when I'm working I'm working Fast and Furious inside of my designs and I don't want to go through and collapse all of these individually instead I could just use that custom command command Tilda for me and that collapses everything and that just saved me a ton of time something that happens to me quite often when I'm working inside a figma is that I'll grab an element that's inside of a frame and by accident I'll drag it beyond the bounds of that frame and it releases it from that grouping inside of that frame I didn't mean to do it I have to command Z go back and start tweaking a little bit again an easy way to fix this is after you grab that element just push and hold down the space bar then you can drag and move it anywhere you want outside the boundaries of the frame and it will not leave the frame you just got to make sure you release the mouse before you release your space bar and you've saved yourself a ton of mistakes the last tip that's going to make you a 10x faster designer is to embrace variables color variables number variables this is going to allow you to establish formulas and numbers and colors that you reuse and yes you can use color styles those are good too but variables are a Next Level technology inside of figma for instance I can grab this search bar that I am building right now we can see that it has a 40 pix radius well I can actually click on the canvas open up my local variables jump down to the collection called numbers you can see I have a bunch of variables that it's been established let's duplicate make a new one call this five and add 40 pixels as the value there now we have to do is come back to our frame here we can come up to the top and we can say hey I don't want this to be 40 I want it to be level five of roundedness which equates to 40 on and on we go we can start to add all of those to our different elements here so I can click on this bar and we can see we have a mixed value here 16 why don't we add number two there and number two there that's going to work well for us and hey let's do some color variables while we're at it I'll grab my element here instead of using the color style which is represented in the circles I'm actually going to look for the brand color that's been established inside of my local variables right I can go back to local variables jump over to my colors and you can see that I've created a series of Val values here brand light neutral text one text 2 and you can use these to establish light mode and dark mode or you can establish different styles or different localities for language or numbers whatever it is using variables will solidify the numbers and the values and the colors that you use it creates a single source of Truth so people don't have to be wondering what size is this what distance is this we're always going to work with the ingredients for the recipe that have already been established so you haven't yet started using variables inside of your designs get on it because it is a massive timesaver well that's it those are a bunch of tips and tricks to help 10x your speed and make you faster than 90% of other designers but let me know what techniques I missed down in the comments what works for you I would love to hear it and maybe add it to my workflow definitely check the description for links to anything that I mentioned today including guide guide which is that awesome figma plugin you should definitely go check it out and if you haven't yet make sure you leave a thumbs up subscribe to the channel I do lots of videos about design and development and figma just like this one so stick around by ringing that Bell I hope you're having an amazing week designing amazing things making amazing things and speeding up as a designer I'll see you in the next one

Channel: Jesse Showalter

Views: 21,126

Keywords: jesse showalter, jesse showalter design, learn ui design, learn ux design, figma, webflow, notion, freelance design, figma tips and tricks, figma tips for beginners, figma tips and tricks 2024, figma tips & tricks - ui designers superpower, figma tutorial for beginners, figma tutorial, figma web design, figma animation, figma variables, figma prototype tutorial, figma auto layout

Id: oCVG6DFCTz4

Length: 12min 10sec (730 seconds)

Published: Mon Feb 26 2024