My 10 Favorite Figma Plugins I Use Every day in 2023

in this video I'm going to be showing you the 10 figma plugins I use daily in 2023. I actually did a video like this a few years ago and it was pretty popular so this is my updated version now I've been using a lot of these plugins actually all of these plugins over the last probably six to 12 months so I have really put them through their paces and I didn't want to put anything in here that I haven't used for a good amount of time obviously being figma plugins these are all free and as a automatic disclaimer none of these are sponsored companies or plugins these are just tools that I use that I thought I could share and help someone out there so kicking it off with the first one we have prop star if you make a ton of components and ones that have a lot of variations you know they use a button for example this is a really great way to add labels and to organize your component variants so I actually have a component down here this is a fairly really simple button here basically in the First Column I have the default State the second column I have the hover state so if we switch over to the Prototype interactions you can see those are prototype to each other across in the row and then each row is a separate variation so we have a primary button secondary and tertiary now none of these have labels I have created those already inside of the variations so if I drag out an instance here you can see we have the type we have the state I have font awesome for the icons and then we can just toggle that on and off now as long as you have all of these component properties configure weird as soon as you use this plugin it'll go ahead and add labels for you so all we have to do is just right click go down to the plugins and make sure that you have it installed or that you've used it recently might have to hop over here and we'll go over to prop star now I don't see it here so I'm just going to hop over to resources we'll type in prop star this is actually how I get to my plugins most of the time just going straight up to that panel and you'll see we get two options we can either create an embedded table this will basically take the existing view you have now and add labels or if you want to keep it separate you can create a standalone I pretty much always just create an embeddable table and just like that what it'll do is it'll take your existing table and it'll add labels like this but then it'll also create all the other variants so because we had that icon on a toggle you'll see that it created a second version down here with all the same variants above minus that icon so we have show icon true false we have primary secondary and you can see the default and hover states there now if we take a look at the layers here this is actually something that's locked by default but if you unlock these you can hop in here and say you know with icon you could say without icon so it's definitely up to you how you want to customize that and you can align it however you want so as long as you create you know clear labels you should get most of the way there but this has been used for a ton of my components when I've been building various systems and libraries and it saves a ton of time taking a look at the next one we have content real this kind of goes hand in hand with the lorem ipsum plug-in if most of the work you do you are just mostly focused on design and you need something in there for placeholder copy you can always throw in lorem ipsum but I found that in some cases the lorem Epsom doesn't really sell your design enough and sometimes you know especially in the case of like a table you really need real content um real content I can't recommend that enough just when you are trying to design ux stuff where you are you know testing what happens when you have more than 70 characters width and so on um long story short this plug-in which I believe is developed by Microsoft will essentially populate it with real content for full names you've got icons you got addresses and so I have this table here to kind of show you how this works we have name email and address so I'm going to hold command and shift and I'm going to select all of my name layers just like this go up here and type in content real and immediately we got a couple of favorites in here so I'm just going to click first name or full name rather and then hit apply and just like that we've generated a bunch of new names in here that are not Laura mipsum we can do the same thing for emails and whoops you just select all those layers and you can search by text or image and you can even type in something specific if you want to pull that up they even have multiple lists if you keep running into the same names or duplicates you can just generate that there we'll try it one more time to get something real and there we go now this is a really good example of what I was talking about when we switched from lorem ipsum to real content obviously the column is is too small now I'm using the tables plugin to generate this so as I resize all the rows beneath it we'll resize just like that we've fixed our table and obviously you can go through and do it for address or other properties I believe you can even load in if I pull this back up custom content where you can go in and create an account and I believe it's just populating through Json files so you could upload that maybe if you're working with your team or your company and you want to pull from a specific list it's a great way to make your designs look more realistic and as you saw it was really quick to add next we have red lines and this plugin is fairly useful for just outlining certain design specs like spacing or content with that kind of stuff now the picture they have here in the banner is a little misleading it can't quite add in all of this spacing in here I wish it could but what I've done is basically taken a simple web design just to show you how this works and I've scaled this down from 1440 just to to fit it in but you can see that's why it says 782 we have the height down here on the side and I generated this by simply just clicking on my design and pulling up red lines and then on the side you can actually generate that on the left or on the top and I'll actually do it on the bottom and the right so you can see how that looks we have that on the right now if I scroll down to the bottom you can see the width there now if this is supposed to also show you the outlines for you know the bounding box or the you know the width of your rectangle your selection so if we come in here to the button we can even hop over to the outline here and this will basically just put a simple bounding box with the outline but unfortunately it doesn't always add the dimensions now you can go in here and you could add it there but I find that that gets her a little cluttered and it's also kind of tedious to go through every single element so what I find myself using this for mostly is for larger you know widths and height so like I have here on the Mainframe just to show like you know quote unquote this is 1440 in this case it's 782 or you know this content width is 274 wide and 144 and it is super fast so just click have those lines populated automatically but one thing to note here just really quickly is that every time you create something it is going to generate a new group I went ahead and grouped that all together and locked that so that when I was trying to select my design it wasn't getting in the way but it still does save a lot of time from having to sit here with a text box and measure it and go through each layer it's definitely a lot faster I just wish they allowed you to go a little bit further but it sounds like some of those features might be coming down the road so red lines is definitely a great plug-in to check out next we have design lint this is a great name because it kind of does just that it kind of helps pick up all the clutter in your your design and your frame by essentially highlighting where there's missing textiles characters or any other kind of uh layer layers or styling that you haven't linked yet so if we go back to the same design here and we pull up design lint and we just run that really quick you'll see that we get a bunch of Errors we actually have a 110 errors so that's quite a lot and essentially it'll break it out by any kind of styles that are unlinked if you are using a design system and depending on how strict your team is this is a great way to find any you know hard-coded colors meaning like any kind of hex codes that are floating around that should be mapped to a real color style or to your color palette so you can go through here and you can actually hit select all and this will highlight every instance of the two zero two zero two zero color and we now have all that in our selection and if we wanted to actually save that or remap it to something we could quickly just select that and you'll see that those errors go away so just like that we went from 100 plus down to 87 because we remapped all of those floating hex colors to a real style you can also do this with the text layers as well it'll show anything of the same you know height and or I mean font size or anything of the same weight and it will also highlight in this case it's showing font awesome that's typically something I'll let float around in which case I'll go here and I'll hit ignore all just because we don't need to worry about that but this is a really good way to quickly go through your frame you do have to go frame by frame with this plug-in but it's a lot faster than trying to select everything or go you know section by section layer by layer and get it all grouped in this you know pretty nice layout next we have ghost uh ghosts I really love the way they show this on their Banner it does exactly this it essentially takes your design if you are kind of doing it backwards if you have a fully finished design and you just want the skeleton or the ghost you get a really simplified wireframe low-fat LED on the on the right you know no text just the shapes so if you're just trying to you know build out a site map or for planning purposes it's a really quick way to generate that so I have a simple mock-up down here just to show you if I pull this up go to ghost It'll ask us a couple different things you know do you want a solid or a gradient what color do you want and once you click that it converts Your Design straight to these shapes and blob layers now you'll notice this bottom half kind of gets overwritten because I had this kind of overlapping section here with this fade so you may have to make a couple tweaks or you can go back and add your your gradient as needed but it gets you most of the way there but one thing to note is that it is destructive so as you saw there it actually converted my design from here into those flattened layers so just make sure you know what you're doing or you keep a copy before you're happy with it next we have ESO metric so if you like messing around with isometric designs and showing things at an angle or for your you know your portfolio or whatever this is a really great plug-in to easily convert those frames to that style so essentially all you have to do is select your frame pull up ESO metric and if we hit run and hit open that way we can actually see visually what we're doing by default it's going to select this top left I believe and if we click this run it one more time we can actually slant the design in essentially an isometric pattern so we can flip it and you can play around with this but you'll notice that I don't have to you know command Z or go back in order to flip it it actually is a live interactive thing so I can keep changing it and it is not destructive and that's why I actually pulled out ESO metric and not some of the other plugins I know there are like four or five others and I've tested all of them and while some of them have some really great features they just are destructive so we'll usually convert what your design into a PNG or a flattened JPEG and you don't really have a lot of wiggle room but I found this to be really simple to you know if you want to go through your your mock-ups essentially get a little gallery for your cover page or whatever it might be and you can lay them out however you want and there you go that's pretty much your isometric mock-up in just a couple seconds there is something weird going on here in the background that I just fully don't understand because there's no it's not just a simple rotation you know I don't know if they're running some sort of script to make it fancy um but your all your layers are pretty much just as is you can still edit them again it's not destructive but it's really cool the way they have this set up and it kind of blows my mind so definitely worth checking out asymmetric next up we have mock-up it's a very simple simply named app and essentially what this allows you to do is generate mock-ups right inside of figma now I did say that all these plugins are free and this one is but you just don't get access to their like full Library I believe they have some sort of subscription set up where you can go through and get more mock-ups I would say it's worth it but honestly I've been able to get away with the free version for most of the work I do so if we pull this up here and we go to mock-up Library you'll see it's a pretty comprehensive Library it's got a really nice layout you can browse you know new mock-ups Browse by device if you just want to find stuff like I want an iPhone and you only want to look at the free versions you can filter that there and you get a ton of different collections so if you wanted to run with one of these all you have to do is when you hit add It'll ask you to select a frame and as soon as you do that you can crop it as needed move it around and then your design is inserted straight into that mock-up and you can paste that fully finished jpeg or PNG right inside of your Design This saves so much time having to like export an SVG or a PNG bring it into Photoshop or mock-up Studio was an app I used a ton you can do this all right inside and you can continually swap out this design if you're kind of going through an iterative approach but like I said you get a ton of content and value in here for free and I would definitely recommend checking it out if you do any kind of you know pitch decks or just adding to your portfolio in a really quick and easy way this next one is pretty simple but it is a collection of wireframing kits so whereas we had ghosts that will convert for fully finished designs if you're early stages and just wanting to you know kind of concept plan wireframe will generate a bunch of different kind of stencils for you and they have tons of different styles in here so if we pull this up here you can actually Browse by different categories like I said you get some fully finished ones right off the bat that you can just immediately start dragging in so if you like this style now we've got you know that's our Gallery page this is our video player this is our reports page and our user settings and just like that we've got like four quick and easy stencils we can move around um of course you can browse through there's tons of different categories in here some of them are svgs some of them are pngs for the most part it just depends on the style this one for example is SVG but what's great about that is they come in small so they're not taking over your whole canvas but as soon as you need it and you need to scale it up you could just quickly move that up and go through just like that so check out wireframe not a super fancy name but a ton of content in there for sure if you need any kind of avatars generated the plug-in avatars is a great place to start they have a I think four or five different sources they're pulling from that are you know licenses are free and and already built in for you to use and essentially the reason I love this app is because you hit one button and it automatically fills the shape layer or selection with a random image so if we pull up avatars here we hit run it'll just pop in a very random picture and you can hit alt command P just to run that one more time so if you're going through a selection we can do this a couple more times here and just keep running it and the beauty of it is it is completely random so you know you can just drop in whatever you don't have to think too much about it I know there's other plugins that will let you change Maybe by gender or by hair color however you want to filter it but I find this just to be the easiest when you need something quick to be dropped in here you know you could pair this as well with the content real plugin so if you're working on a list of users hit content reel hit your full name and apply and just like that you pretty much updated your whole design and last but not least we have font scale so if you are working on any kind of brand guides or style guides for your design system or for a client and you're trying to get consistency across a collection of of layers whether it's your body all the way up to H1 this is a great place to start the reason I love this is because you can either use it as a reference or you can insert layers right off the bat so if we pull this up you essentially will set your base size for a lot of the web design I would do it was around the 16 to 18 pixel Mark and as I change this you'll see based on the major third ratio here it's going to calculate what all those other styles should be it's not actually going to dictate you know this has to be H1 or H2 it's just giving you you know four or five other sizes scaled up with that ratio typically I would build this off of the golden ratio and when I was good to go I would just hit generate and essentially that became my style guide so I would start here and you know I would maybe make this display heading one heading two heading three that would be the body and that would be you know small body or whatever and just like that you've got all of your textiles generated in a couple seconds you didn't have to leave the app and look up and do a ton of research I find that super helpful but in a nutshell those are the 10 plugins that I'm using in figma in 2023 like I said all the links will be down below if you want to go ahead and play around with these but thanks so much for watching and if you enjoyed or got any value out of this feel free to subscribe thanks

Channel: BlueSky Labs

Views: 18,530

Keywords: figma, figma tutorials, figma plugins, figma tutorial, figma plugins 2022, figma plugins 2023, figma tutorial 2023, figma 2023, how to use figma, how to use figma 2023, top 10 figma plugins, best figma plugins, favorite figma plugins, my favorite figma plugins, figma tutorial for beginners, plugins for figma, best free figma plugins

Id: FLNabVT2K_k

Length: 18min 48sec (1128 seconds)

Published: Tue Jan 24 2023