Our Favorite Figma Plugins || Crema

this is aubrey that's steph this is mary this is shawn that's steph and that's chris and we're designers at crema and today we're gonna go through our favorite figma plugins all right today the plugin that i want to show is image tracer so if you have an image and you want it to be more of a vector so you you select your image and you pull up image tracer you've got your image here and then you hit place traced vector and then it appears as a vector and so now you have that and you can manipulate it however you want so if you want to change the color you can do that but now you have a vector version of your image awesome so cool i'm curious where it said more options do you have like similar to illustrator more options to like refine the tracing or what does that look like it's giving you these kinds of things um i've honestly never used it so this is good it's a good opportunity for us all to figure that out so fade image show points show path smoothness smoothness ignore less than curve optimism blur etc yeah i'm sure you could dial it into to get the like if something has less contrast or more contrast like that it seems like it did an incredible job like i feel like there's a lot of muddiness kind of in that image you have so it i think did an awesome job already with the revolts yeah and i mean it's worked for me with some images and not for others um so the fact that i think this was grayscale really does help this um but yeah it's um yeah it worked pretty well for this one yeah put it on a shirt sell it done that's awesome yeah it seems like it has at least as many options as illustrator to do the same thing so that's really cool yeah absolutely and so i you know um steph when you were talking about you know dropping adobe products and using um this is one of those other things i guess add it to the list yeah to the list all right so i have a few different plugins to show today that i use all the time um the first one is called random name generator and for those of us who use things like cards or have bio images or a lot of different people i have a very hard time thinking of a bunch of random names so i use random name generator which is really simple you can choose you select your element that you want to fill the name with and then you can choose either male female or both gender names and you can do just first or last name so i usually play around with these there's some really creative names that pop up you can change them it's great i really like that one um i also use the plug-in contrast a lot to check my accessibility of the colors i'm using for text specifically so for instance on this tab we can see if you just select the text over it it will run contrast comparisons for a lot of different kind of settings so whether we've got large text normal text if you have something like this green on cream um well that worked actually i was surprised i thought that might be not accessible let's try green on yellow failed so this is a really easy like quick check just to make sure that your text is accessible um the last one that i really like is called better picker if you use um figma for type stuff a lot it's really tricky to go through and look at all of these different fonts and you kind of have to know what you want like if you're looking for something specific it kind of works but it's not the best when just exploring fonts so this one better font picker is a much more visual way to search through fonts um i find it very helpful if i'm playing around with a logo or brand identity or just kind of having a little bit more creative oh looks like it froze i'm having a little bit more creativity with my fonts so much much easier to find interesting typefaces this way so yeah that is a few of my favorite plugins i really like the better font picker that's like one of my biggest annoyances with sigma is you can't see the fonts um so it's great i'm gonna have to go download that yeah that was really cool i'm literally downloading it right now it's so simple but it does like it helps so much it really does oh my gosh i was going through that the other day it was brutal yeah i love the name generator too i'm always using like sam smith or like someone i'm working with on the project for everything yeah and there's something like the easiest ones are super short and those are always like detrimental to like your designs later on when they you have to figure out how things wrap or truncate or something yeah that's right it gives you a good diversity of length and yeah it's it's nice okay and i'm really excited about contrast because that was just a really simple i think some of them are so detailed um so that's like a nice quick check um especially as we're exploring the new brand and getting yeah like what works well for like social for example when it's a little smaller versus on the web and whatnot yeah there's some other tools that are good for this but that one i find just to be the simplest i really like it you can also run contrast on you can like scan the whole page um which is really cool and it will show you like you know what parts of that page are not compliant a lot of this page is not compliant guys it's cool it's really good so i thought i was going to show two i'm going to show one because mary just showed random name generator oh um no no i didn't i didn't i could have like looked around the board to see what other people had um but i've been using it a lot lately for the same reason so um we won't do it we'll just go with the first name mcglass name um but one that i found and i wrote it down it's called skudat um honestly uh i was racking my brain for favorite plugins i don't think i'm a plug-in expert this one's maybe not my favorite but it really um got to the core of what i needed to do one time when nothing else could so it was really cool and i think it's most probably appropriate for like illustration but um so i just wanted to show a couple things too here's a rectangle shape a frame and text it works this plugin works on all of this it's actually it's exactly what it sounds like it's going to do it's going to skew that object um so i run it and it's got this pretty simple interface um so you can you can pull it and it starts to angle oh you can do it in different ax axes like this but again it works for text and the coolest thing is that it's non-destructive um so i can apply it and it's quick but you can see what oh my gosh that's so cool you definitely can't do that in illustrator yeah and that's the thing like again like it makes sense for um you know first and foremost i think figma is like a you know prototyping and this uh product design tool but you know if you're using it for illustration these plug-ins really make it much more powerful so yeah that's that's the plug-in um and that's how i've used it before and i think it's cool that it works on various objects too so this is a it's a frame and i've like changed the radius so i can just go back and reduce that it's just cool that it's non-destructive and it keeps like a specific angle that you've assigned that you can't really achieve in other ways that's so awesome yeah that's amazing yeah it's also not that amazing with the fact that like i found it and it did exactly what i wanted to do when like nothing else could was really satisfying so maybe it is one of my favorite plugins i was really impressed you didn't have to convert anything to outlines yeah yeah true i'm curious how you did find it did you google i want to skew dat or yeah totally i was like how can it be skew in dim shapes um i don't know i think i just searched i don't know what i call it like um isometric or angle i don't know i had to do a bunch of experiments i think i have probably some other plugins i should delete because they didn't work um just googling not all plugins are created equal no this one happens to be extra nice and that little preview that it gives you works really well well um so i have two things i'm going to show one's an actual plug-in and one's just a bonus because it's great and it's been really helpful to be in sigma so first one is content real so this pairs really well with um mary's and almost sean's sorry sean um but it's a in a plug-in called content reel um so it's real basically what it is is it is all different types of fake content from photos um all the way through different text and so um there are shared libraries um that where anyone puts them on here they can make them private or public so like there's like um avatars that was released by microsoft um so you can come and you can like select multiple at once and if i hit avatars now they're all going to be placed with avatar images um you can use it for text so like um in the sense of you know there's name generator um this is another version of that so you can go over and just like look at ones with um text and they have like a full name one so you could select full name um or if you wanted to give them their title for their job um i believe there is a one where i have job types and this is one that i've actually created for a different project so you can actually make your own list and so this is really helpful in places where um if you want to have like a specific date format or if you have like different types of content that are what you would consider non-standard um so i made one in here called um sigma tips so if i wanted to change that um if i wanted to make it so i wanted to add figma tips you go in here and if i wanted to i could go in um and i can edit this um so if i wanted to select a specific one you can go and click into an individual list and i could change ones individually to the exact one i wanted them to be or i could edit it um and just say another one um and now this one would be accessible for the list so you can randomize them or you can select a specific one these are all the ones i have starred that i use frequently um like i also have them in here i have um one i made of like company logos when i'm working on things for um like more um like programs that would be used at a company level um i often have this one that i have these like randomized logos that are kind of um more current companies versus the ones you'll often find with i know there's some plugins that have like just logos so um i use this probably more than anything um because it just allows me to kind of create my own list my own icon systems and that sort of thing and i can just easily access all of this from one place and i don't have to constantly be uploading files or changing things or coming up with random content and so i just do this at the beginning of projects for what i might possibly need and just use it throughout so it's extremely extremely helpful the other thing i wanted to show is again not a plug-in it is an application called mouseless and this is something that was really helpful we did another video on pigma shortcuts this is a figma shortcut trainer it also has shortcuts for all sorts of different applications like gmail slack um big enfigma sketch um and different uh you know development tools so it's spotify air table it's applicable anywhere but um i've only really used it for figma so far i need to i would love to use it for some of the others but you can go in here and it has like all these different um lists of practice ones so you can go here and say essentials so it'll give you like the one for pick color and so you could do the command for pick color and then you have to practice it so pick color um it's pretty easy on the one where there's only three but like on the ones where they're longer you just kind of routine practice them and so i will do this you know probably one morning a week i'll just go through or maybe every other week at this point because i've gotten them down pretty well um but when i haven't been using figma as much if i'm in a different part of a project before i'm about to start like getting heavily back into figma parts of projects i'll jump in here do a little review because it just helps me work significantly quicker so that's what i've got that's so fun it's like flash cards [Laughter] dude bob's have you the thing that you the content reel is awesome it's been in my plugins forever i've never once opened it um the stuff that you're contributing is that local to you or you can you share that out with others you can share it out yeah so you can um let me open it back up really are you contributing to things that like other people can use you can i believe i never i usually keep mine private just because a lot of the stuff that i have created has been like client specific yeah um but like these ones you can see like this this is avatars by hannah jesse right like she's the one who put all these and i just found it and saved it so you can like go and find all sorts of different types of text lists i mean there's thousands in here um so like you can just go in here and you can search for anything you might possibly need um like i'm sure if you put like cities or something um there would be a bunch of different like lists of different cities so if it would load um but whenever i need something i'll just come in here and i'll search for what i'm looking for so they have like all these different sorts of listed avatars oh you know here i'm getting cities there's city images sad city images there's only one there but yeah like sometimes go through and like find the stuff that works and doesn't but anytime you find something you like and you want to use it again you can just favorite it um and then you can use it and if you want to add one you come in here and you just go to add um and then you can hit add and you can do text face or image based um and so i have um like a bunch of folders on my computer of like different sets of images i frequently access and so like i will just occasionally update those and make sure i have everything but like i have like a folder of like avatar images and i have a folder of uh like different like uh social icons that sort of thing and so i'll um i just uploaded all of those to here and so i don't have to pull open and access those files anymore i just have everything in here that i need um yeah it's really great wow i'm totally gonna use this so the plugins i'm going to share today are related so unsplash and remove background are two that i use a lot especially when it comes to designing blog headers unsplash i'm sure everyone is familiar with is full of stock images and you can search by keyword and then you just whoa click and it's giant this plugin works especially best if there is a more defined background if there's quite a bit of contrast it's not a miracle worker but it's near close so then with this image selected we can do remove background and voila then you can place it on any other color that you would like um have a transparent image so this is one that i use a lot for like i said those illustrated blog headers and it makes my life a lot easier i don't have to go into photoshop i don't have to go hunting somewhere else for images i usually will grab a bunch from a unsplash at once to just kind of leave in the margin for options and it's just really quick and easy so and now i want ice cream oh my gosh i was like dude can you eat it now this is a plugin that brings it to me but can you combine it with chris's plug-in and then turn that into a vector i should try i love this i remember at my first job out of college i would spend a lot of time when i was trying to do some like customized website imagery like in photoshop like cutting everything out um it's so cool that you can literally just have a plug and do it like that and it's perfect now so good has to be such a time save yeah it is amazing ptsd from like my internship i remember specifically this like emerald jewel necklace i had to cut out and it was very detailed so i have a couple plugins that i'm going to show today um the first two are really simple and are um just related to styles and text so um the very first one that i have is called styler um so styler is pretty straightforward you can just create um textiles and color styles um automatically based on your layer names so um if i want i usually use this when i'm like setting up a new design system and i'm creating like my documentation for it so you can see what they actually look like and then creating the styles at the same time so um i have these three um styles and you can see or these three styles that i have created and they aren't figma styles yet so if i select all of these and i have the layer names how i want them i can go to styler and then generate styles and then it will create those for me and it tells me if they're updated or deleted or anything like that so they're pretty easy to update this way too um and now you can see that they exist um yeah so it saves me some time i like it there's there's a ton of different ways to do that but i think especially when you have like a ton of colors or a ton of uh font styles it saves some time and then the next one is called a nisa text splitter um and this one is helpful if you get like a big copy doc and you're just kind of like copy pasting the whole thing and then you need to put it into your design this is just a very very simple plugin but um so right here i have all of this text in the same text box which is usually how you get it if you copy and paste it from google docs or word or something um so i can select this and then go to [Music] anissa text splitter and then the option misa split and based on the line breaks it will split them all into different different layers so now i can very easily go in here and use the textiles that i have to find um so yeah i use that sometimes when i'm working on marketing stuff and then the last one is one that me and mary have been using to make something that has multiple different brands um and it's called atlas theme switcher um we're really excited about it it's really awesome and another good application for it is just like a light and dark mode or theme so i'm gonna show that because it's the most straightforward but it works for multiple brands really well too so um all you have to do to use this is to just have your color styles for different themes in folders and you can use textiles as well i only have the color styles here but so i have a series of light theme color styles and then you just have to have the exact same name for what you want to switch to and the other one so text and then text and then you pull up atlas and so with your selection it shows that every style i have is under light theme so then i grab it and switch it all to dark theme um yeah and then you can select multiple um so you could do like all the screens you have it's pretty awesome that's so satisfying like an instant click it is yes it's very sad it's the best does it does it is it actually pretty quick when you have like larger things you're applying it to or like larger frames with content in it is it still pretty quick um it's sometimes it'll have like a little loading bar um showing how many it's applied um right now when we have like a bunch of brands and like dozens of color styles and font styles sometimes it'll get a little bit like stuck especially for both both in the file but luckily like you just have to change it once and then you're good um and it saved you all that time so the bugginess doesn't super bother me yeah but yeah not much better than doing it by hand yeah yeah for sure that was nice too in the first text one you showed what was it called styler that it adopted then the text became the name of that style it's just nice oh yeah i have never used that one i think you've mentioned it before i just did a test to see if you could also put it in folders and you can do folders too by simply typing the slash into the name and i think that's super quick and powerful i i'm going to start using that yeah i've used it when i have like you know this brand and then this brandon mobile and then you can use like just the auto rename filter to add that slash for the folders really quickly yeah it works pretty nice thanks so much for watching our video about our favorite plugins be sure to comment your favorite plugin below and make sure to like and subscribe and follow along for more videos thanks everyone [Music] you

Channel: Crema

Views: 149

Keywords: Figma Plugins, Figma tips and tricks, Best Figma plugins, Figma plugin tutorial, Image Tracer figma, skewdat figma, figma tutorial for beginners, figma tips

Id: oXwkrCsLpuE

Length: 23min 18sec (1398 seconds)

Published: Wed Dec 08 2021