The 8 Most Underrated Figma Plugins in 2022

hey friends in this video we'll look at eight super underrated and super useful figma plugins that you've probably never heard about because well designers don't really talk about them all right folks so we're in figma and what you see on the screen right now this is the end result of what we can do with these plugins of course this isn't everything you can do with the plugins but this is what i'll be doing with the plugins today let's go to the first one which is coolers let's launch the plugin coolers so this plugin will let you create color palettes you have three tabs you have generate you have library and you have explore library is going to require you to create an account at coolers but that's not a problem it's free so you should do that then you can save palettes and stuff like that the explore tab lets you find palettes it's uh it's a way to kind of browse through the trending palettes the latest popular based on different styles and stuff like that so maybe we want a dark style and then you can just click that and then you're gonna get dark style palettes today we're gonna focus on the generate tab so let's click in here what's cool here is that we first of all we can click generate to generate different colors now if we find something here that we like we can hit this little lock icon and lock that color so now that we generate we're going to lock that color but still generate colors that matches this one so we can do that for the colors we like just keep on generating like this until we find something that we feel is what we want to go for so maybe this is it now that it's locked in i can hit the context menu in the bottom right and click here on the add colors to document now we don't see where it ended up but we can see that it it's here in our side menu so i can double click here and it ended up here somehow let's go back up to coolers and here we have it our color palette nice all right so let's take that with us when we go to color shades this is the second plugin let's launch it color shades so what this plugin lets you do is we can take one color and then generate a bunch of different shades and a bunch of different tints based on that particular color so let's say this pink hair is going to be our main color i'll take that hex code copy it paste it over here and then just create and here we go we have a bunch of different shades based on our primary color here so this is super neat the next one is type scales we'll launch the plugin type scales if you want to dodge the super boring work of starting each project with creating this like hierarchy of text styles this plugin is super nice because it will generate the base for you and then you can take the base and kind of edit it as you want and as you go with your project but it's very simple as well so let's say we have a base size of 16 that's the size of the text we'll be using the bones like the body text in our project it's a base i 16 then i can set the scale so how much do we want it to scale for each of these steps maybe 1.4 maybe 1.5 maybe 1.3 what's the line height so maybe 1.3 there as well how many scales up how many scales down so from 16 how many steps down and up 6 and 2 sounds good and then we can choose if we want to round the values or if we want to have them you see here they kind of look a bit wonky if we don't round them so let's round them what's cool here is that we get the rim values as well which is nice when you're working with devs and they want to make the designs look as in figma then if you give them the rim value the sizing will stay consistent across all devices and everything so it will look the way you want it to look so let's generate here and we get this amazing frame that just has it all kind of done for us already then we can go in here and kind of say okay i want this to be bold or extra bold and this one to be bold and then we can add these as styles to our project but this is a quick way to get just the groundwork without doing anything so that's awesome now let's put it here and jump down to vector logos for this plugin i'll actually create a little scenario here so let's create a frame this is just a frame and inside of that frame we'll have a little container let's give it a color so that we can see it i'll give it some rounding i'll make it into an auto layout i'll add maybe a text so here title resize it a bit add some padding and by the way if you want to learn more about auto layouts and stuff i have a video on that somewhere back to the plugin here we have vector logos this plugin is awesome because you're gonna you're gonna be surprised how many logos are covered in this plugin so i'm just gonna go with a big company for now let's do spotify but then you get a bunch of different spotify logos so there i have that logo let's resize it and just add it here i'll add an auto layout so we have a title we have a logo so that's vector logos just a quickie do you have any figma plugins that you use a lot but that you think most people don't know about leave them in the comment section below because i for one would be super excited to hear about more plugins and i'm sure other viewers would be as well okay let's jump to the fifth plugin which is writer for figma this is a cool one let's take that frame let's borrow this frame as well with our type scales and let's take a text size here let's take 27 pixels i'll add that i'll just write some gibberish here and we'll see what writer for figma can do writing some stuffs that doesn't make senses okay let's see what writer for figma or figma can help us do with this so i have the text targeted i launched the plugin so first of all writing some stuff thank you doesn't makes well it's gonna be doesn't make but let's see sense and it got it all right for us and then we can see like here a score 100 we have no spelling or grammar errors like terms style clarity delivery inclusivity everything is cool so that's a really nice plugin for copywriting okay so let's move on to beautiful shadows which is the sixth plugin here i target this frame i launch beautiful shadows you can see that we get this super nice and clean interface that we can use and you just take this little circle here which is the light source and you can see what happens to the box in real time it's really cool this is a good way to create these cool like mock-up effects that apple and other product companies use so i just find something that i like i apply and that's it we have the beautiful shadows added to our little nice box here shift this background color a bit so it's almost neomorphism going on here okay so we have that one now let's bring it down to layer styles and here this is one of my favorite plugins so let's launch layer styles layer styles and what this plugin does is that you're probably familiar with the fact that you can you can add color styles you can add text styles but we don't really have a way to add combined styles for like stroke widths and rounded corners and box shadows and figma well with layer styles you can do that so if we take this box here we just click the plus with layer styles plug-in on you can see that we get frame 10 here and we can rename this to maybe 32 pixel border radius plus big shadow now if we extend this a bit and we create a new box here we just click this it applies this style to it all the roundings the shadows and the background color okay over to the last one and for this last one i'm gonna take our shapes that we have up here take this one i'll add it here and i'll add a little background color to this and let's add some stuff in here let's do that once again doing some auto layout magic the reason i'm doing this is because i want to show you how this last plugin is very very powerful so now you can see here we have this very nice looking card but it's a light mode and maybe we'll want to have it in dark mode as well so usually we would have to do all of that manually well we might not have to do that any longer because if we take this frame and we just launch dark mode magic don't have to do that anymore and if you don't want to have the frame the whole frame here be dark mode maybe you just want the content inside of it so maybe just the auto layout then we target that and we click enter on dark mode magic dark mode magic ladies and gentlemen it's very easy and a super neat plugin there we have it eight figma plugins that will definitely boost your productivity and up your design game now if you found this valuable or useful what really helps with youtube is clicking or hitting or smashing or whatever you call it these days the subscribe button the like button the bell notification button all of these things really helps an aspiring youtuber like myself so if you have time for it i would really appreciate it now until the next time take care peeps ciao [Music] you

Channel: Tim Gabe

Views: 19,486

Keywords: figma plugins, figma plugins 2022, ui design, ux design, ui, ux, figma tutorial, figma, figma plugins best, best figma plugins, best figma plugins 2022, product design, top 5 figma plugins, top figma plugins, top figma plugins 2022

Id: fJ36mS1NYDM

Length: 11min 31sec (691 seconds)

Published: Thu Jun 23 2022