10 Awesome Figma Plugins We Use Daily

in this video i'm going to be showing you 10 figma plugins that we use almost every day that i think will help you save time and just more polish your finger projects so they look a little more professional and really just make your workflow a lot smoother so all of these plugins are linked down below and every one of them is free um there are paid alternatives but we don't like to spend money where we don't have to so hopefully you can just go ahead and add these into your workflow and get started with them today so let's go ahead and jump into the first one the first one we use is a plugin from material design icons and so this is a set of i think 20 or 30 000 different icons from the material design style guide and what i love about this is of course it's free but it's also um vector or svg formats for the icon so if i just click on any one of these here let me zoom in you'll see it's actually a scalable once i take it out of the frame there but the the icon itself can be scaled up to as big as you want it because it's an svg format and we've looked at other plugins that maybe have better icons but this this one provides those as the svgs the other ones are usually limited to png or you have to pay for larger sizes so we love being able to have that and we use this plug-in primarily in the prototyping or wireframing stage when we're just trying to get the layout of a design um you know maybe we're adding it to a button or something like that and this is just really easy to quickly pull up and put it in there you don't have to go search for an icon pack and pick one that's consistent because all of these are consistent with each other and so you can search for anything like if you needed a check mark um you can see there's a bunch of options and you know it's not an unlimited library but it usually covers 80 90 percent of what we need and then you know we can always replace it toward a final design with a more custom icon if we need it but for the most part it works pretty well the next plugin is from unsplash and if you don't know about unsplash it's an awesome collection of free photos that aren't cheesy that we use for a ton of our placeholders and oftentimes we'll use for the final designs for our clients but what this plugin does is it allows you to directly insert those images into your figma project so you don't have to go search on unsplash you can just bring up this plugin and if you're just looking for a generic placeholder maybe you want something from nature you just click on that and it's going to auto generate or rather auto insert that photo just a random photo tagged with nature so sometimes it takes a second but there you see it's loaded in and what's really nice about this is that the file sizes are not massive usually when you download a photo from unsplash you know it's a professional photo so it could be anywhere between 1 and 10 megabytes but these once you export them out of figma are almost always less than a meg and we'll talk about compressing file sizes in just a minute but you can see it inserted directly and one thing that's cool with this is if you would rather insert it as a background what you can do is select an element and then you just pull up that plug-in uh again let's say you wanted something with architecture what it's going to do is actually set the fill of that element to be the image so we don't use this a ton but if that's something you do a lot that's even faster but you can also search for something if you're looking for a portrait um this is great when we're you know making a bio uh section for a client's design we don't have a picture from them yet so we just kind of throw something in there but they look pretty professional so this just saves a lot of time and it also will reduce the file size for you the next plugin i'm talking about reducing file sizes is called downsize and so what i've actually done here is is downloaded a picture from unsplash i've actually gone to the website and this is actually a smaller picture but it's still one and a half megs and if you wanted to reduce that uh you know usually you would go through tiny png or tiny jpeg or whatever and compress it and you have to you know upload it download it bring it back into your figma project but this plug-in it's called downsize and when you run it you can actually set the quality of the photos so generally i wouldn't recommend going below maybe 40 or 50 but even if we just run it at 50 right now it was one and a half but you can see it's been reduced to less than half or just about half so it's 65 smaller now and so if you're using a lot of images in your design this will save you a ton of time and for the most part you're not losing a lot of quality obviously this is massive but you know when you're scaling it down here you might even be able to go lower to 30 or 40 quality i really started seeing a difference around that 10 or 20 mark but it just depends on the size and you know how big the photo was to begin with but this has helped us reduce our file sizes a lot because we generally export all of our web designs into a high-res pdf and generally those things come out to be a couple hundred megs and so this just saves a lot of hassle and time compressing that down the road another plug-in is a little more creative it's called blobs and this just will auto-generate random shapes for you it's fun because this is a big trend that's pretty popular right now in web design and just graphic design in general but you can see there's it's not super complicated you got two settings here and when i say make blobs it just kind of generates a random shape you can play around with that if you don't change the settings and just keep hitting make blobs it doesn't just generate the same shape it's always a little bit different and you can go up on a scale of 1 to 10 for each of these you can see you get a little bit different but these are nice because they're vector shapes it saves you the time of having to use a pen tool and kind of come up with something and so most of the time within the first few clicks using this plugin we get the kind of abstract pattern that we need and we're good to go so that's a little bit more fun um and might not be as cool in a couple months or a year who knows uh with graphic design but that's a really fun plug-in another one is font replace now this is invaluable for really quickly replacing fonts and so if we bring it up here and let's say we select the entire wireframe i believe if you select it or if you select the actual text and then run the plugin again so let's do that now you'll see it's pulling in this mullish font and now you can search on the right uh what you want to replace it with so let's say you want to change it to something like bbis and you can just match up those weights so bold it's going to go to bold and we'll hit replace and now you'll see all those titles have been updated on the wireframe so we didn't have to go select each layer and we can really quickly switch it back if we wanted um now we can say bevis go back to mullish put it on bold replace and we're back to normal so this has been really useful especially when we're on a a client call live and sometimes we just want to make changes right in figma we can really quickly find all the fonts because sometimes you can't remember the font name so just being able to select the whole um the whole frame or the artboard and see all the fonts listed and then match up every weight is really helpful you're not just changing the font for everything you're actually changing the font and that specific weight which just helps save a lot of time so one of our favorite plugins there and then we have a similar plugin that will actually replace colors this is called the color replace plugin so these names are very obvious what they do but you can see again if we just select an artboard all those colors are coming in here and you can actually see the opacity that each color is set to and so again similar situation when we're sitting uh on a on a call with a client they've often uh wondered you know how easy is figma to use like can we change the colors and i can very quickly jump in there and you know select the primary color and they say maybe if we want blue instead of red i can just hit one button and run that whole thing and everything's good to go so that's another really useful tool and then as far as as wireframing and using placeholder content we use lorem ipsum a lot especially when we haven't gotten to the copy stage with our you know our copywriters and in the rest of the product project so using lorem ipsum is really helpful but using the plugin allows you to insert it directly into your project so if we bring it up now you can see that it wants you to select the layer so let's go to the title here and let's say we just wanted like one sentence we can just hit generate and obviously there's already text in there but let's just say i put something random and run the plugin if you're wondering how i bring up the plugin so fast if you use the alt command p plugin on a mac it'll just bring up the last use plugin so you don't have to go up through the window i mean you can set the words the sentences or the paragraphs but my favorite has always been the auto generate and so if you click that it's going to fill the text box size with as many words as it can so for example if i create a text box on the side here and keep that selected run that plug-in and say auto-generate it just fills everything or fills that whole text box with a ton of different paragraphs so this is nice just saves you the time of having to go to um the actual you know lorem ipsum website or just come up with you know placeholder text and you can really control each uh the or rather the amount whether you use the words or the paragraphs or sentences so that's really nice and then we have another plugin we use for removing the background is actually called remove dot bg and this is actually a service here but i'm going to drag in my picture here lovely self-portrait and you know in the old days you would have to open up photoshop and you know kind of mask out yourself re-export as a png and and so on uh this plugin which is actually a website that happens to have a figma plug-in allows you to literally click a photo and you just run it there's not any settings and then you completely delete the background and for the most part it's pretty accurate this isn't the highest quality picture you can see it gets a little blurry around the edges but you know if you're scaling this down to a profile picture or something for a dashboard or even just as a placeholder until you actually get a professional designer to go in or if you're later going to go in yourself and use photoshop or something like that this really gets you 80 90 of the way there so that's saved us a lot of time in the past and often our clients will give us photos that don't necessarily have great backgrounds and we like to do uh something like we had here with that background um with the gradient uh and you can see that it's you can also undo your changes which is nice so it's not like a permanent change in the figma project so you can always revert to that original um and it works pretty well on a variety of subjects we've had uh like with a lot of hair if there's a lot of long hair and random strands going on it does a pretty good job of masking those out so that's an invaluable tool to have and then the number nine we have the image palette and the image palette is cool because it will generate a set of colors based on your image that you drag in there so i'm going to go back and drag in this parrot here and if i just run that plug-in it's just going to generate a couple of colors at the bottom based on like the primary and dominating colors from the image so it's kind of captured that red and the the maroon the dark colors the teal and so this is a great way at the beginning of a project to start getting some cool color theme variations and often times you get some great secondary colors so you can create some cool you know gradients or anything whatever you're trying to do just gets you some ideas right inside the project especially you know i dragged in an image but if you already had images that you're trying to match colors to or vice versa maybe you're trying to pick colors and then match images to it this is a great way to just see the two side by side and then the last plugin we use a lot is the um story set plugin and this allows you to i'll bring it back up here this allows you to bring in random illustrations um and you know this is another trend in web design using kind of this illustrative look and there's a few styles within this plugin but let's say we say like business and as soon as you click on it just like the material icons it's bringing in svg format and so you can edit into or rather click into any one of these and change any of the colors if you wanted to and you can scale it up as much as you want but what's also cool if i bring that back up is you can actually set the background detail level so if you want it to be pretty simple you could say hidden and you'll probably see some of these elements start to change down here and then there's also simple or detailed and that just kind of uh saves you some time from having to bring it in and then go in and delete some of those elements that just if it's too busy for you but you can change the style and filter up here and um you know it for the most part like uh we haven't found that uh we can't find at least half of our illustrations from here or at least you know 90 of them with as like a placeholder before we go and get some more custom designs but because they're svg we can actually customize those colors to match our client or the project's brand um but you can also set the color before you put it in there so if you know we wanted to use the blue sky primary blue you can see now that everything is is based off on that color so if i drag this in here it's actually using those colors and that is one of my favorite parts of it because generally when you you know bring in an illustration there are like 50 or 100 colors and usually it's like three or four primary colors and then like a hundred different variations that you have to go create um and so you can see it's done a pretty good job of bringing in uh those colors and and basing it on that just that one color um and so you can't change you know all of them but you could always select this and see all the colors listed here and get it uh kind of tweak it to where you want it but that's the last plugin we've used it's great for placeholders and just kind of fitting into that trend when uh the design calls for it but hopefully that gave you some ideas and some tools that will help you get a better control over figma and really streamline your projects if you got anything out of this video please be sure to like it and subscribe down below it really helps us out and be sure to check the links down below to get access to those tools thanks for watching

Channel: BlueSky Labs

Views: 21,366

Keywords:

Id: _8JDlA81-pU

Length: 15min 19sec (919 seconds)

Published: Thu Jan 21 2021