20 Best Figma Plugins that would make you 10X more productive designer

Tools are some of the coolest things which we always love to use when it comes to designing some software, when it comes to designing some interface and experience. Right? So today I'm going to be telling you some of the 20 different plugins which is used in Figma. That's going to make you at least 10x faster, I would say. At least. Okay. If you use it even effectively, that could even level up to even 20x50x faster, guys. Okay, so take note of notes. I would suggest if you have a a laptop with you in front of you right now and if you can able to take notes quickly about that particular plugin and implement it because it hardly takes one or two minutes to implement it and see, then it will be hundred times better when it comes to a real time project implementation. Because normally this needs to be taught in a video. But I would suggest this podcast can help you with the information but you can write it down and you can able to try it on your own because Figma is a free software and also you can able to use some of the basic features in the free version and you can test it out. Okay, with that note, let's start this podcast. Guys, welcome, guys, welcome. Welcome. So now let's dive into the first plugin which is called Unsplash when it comes to image download. Okay, you can write it down Unsplash. When it comes to image download, it's much difficult to go to a Google search or maybe other search engines and take a picture, save it or even drag and drop it or even going to another window. It takes time. Right? Unsplash is a plugin where you can go right click in the Figma screens and you can go to an option called Manage plugins where you can search. Okay, whatever. I'm going to tell you 20 plugins you can able to search in this way. Right click Manage Plugins search New. You can type a word called Unsplash where you will find an image dialog box which is opening whatever you want. You can directly search. Guys. So Unsplash is going to give you high definition, very good quality images and you can able to credit it in your documents. Also the simplest thing about Unsplash is you can just click it automatically. That picture will come in your screens. It is as simple as that. You don't have to even drag and drop it. Okay, so that becomes a very productive tool for you for images and you can use something called PropStar. The PropStar has a different, different variety of libraries to build. Like let's say if you're building a ton of variations. If you wanted to build a lot of buttons which is like small, small variations is there and you want to build 10 or 20 of it, you can use a plugin called PropStar where you can click that particular button and you can able to run that plugin. What happens is it will provide you variations and you can able to customize it based on the options given. If you wanted to have a lighter, harder or maybe a darker, you can able to customize it and you can able to change different different variations of it and you can save as a library also so that you can use it for the thing. Okay, and the third important plugin I would suggest you is which is called Content Reel. Content Reel is a very beautiful information guys. When you're able to have like let's say pictures or maybe wordings or maybe if you have a lot of people's phone numbers and contacts, you don't have to type any rough phone numbers. When you're creating a solution, what you can do is you can go to a Content reel and you can run this plugin and you can give the text selected and then you can press ok. What happens is whatever you're typing out like let's say if you have 10 different lines and you want to replace with a different different email ID and there is an option called Email ID in Content read automatically, it'll replace random emails. If you wanted to change 10 as a names, you can run names you automatically that will give you 10 names. If you wanted to change pictures, you can click pictures. What happens is it'll exactly populate the pictures for you. This is a very cool tool, guys. Whenever you're building a shopping application or whenever you're building a list based applications, you don't have to write all the fake names. You just have to go to this Content Reel plugin and that makes your very easy. And a similar plugin what I'll say which is called Avatars Avatars is more related to pictures. Guys. If you. If you wanted some 10 different pictures in your screen or website or whatever, you can put 10 circles, okay, you can put 10 squares or whatever shapes you want. You can just select all and you can run this plugin called Avatars A V A T A R S simply it will come all of your pictures. If you want to change gender, you can do. If you want to change the hair color. If you want to use some kind of a square circle layout, underline, sideline, dark line, everything can be possible to create your avatars. It Is as simple as that. The next plugin, what I would say is Red lines. See guys, if you are building a website or a button or an application or something, a very specific element, if you wanted the measure, if you wanted your customer to know that measure, or if you wanted to make your developer know that particular dimension of the pixel, you can just select that red lines and run that pixel. Run that plugin. What happens is you can show the width, you can show the height, you can show the depth in red lines very clearly. Highlight. There is an option called measure. Also, if you are able to click that measure automatically, it will measure that particular box, whatever you have and it will be easy for your presentation purposes. Okay, so the next plugin, what you can use is a very cool plugin which is called Ghosh G H O S H. Okay, so what happens is it's a beautiful tool for creating your wireframe. So like let's say if you build a website, if you're building an application, you can just select that entire frame and give this. Run this plugin in the Manage plugins and it will automatically generate a low fidelity wireframe for you or even a medium fidelity wireframe for you. What happens is it will fill like a. Imagine your application when it is loading. How it comes like a solid colors, right? It won't come pictures, text and all that is what normally is called a medium fidelity wireframe. Where a designer thinks in his creative process, this is where the icons can come, this is where the buttons can come, this is where the pictures can come. So the concept when they are developing detailed, they can able to replace that. So how you show that process, when you are a student or a designer, you can use this plugin called Gauche where you can create select your entire screen and automatically changes to cemented color or solid colors. If you want, you can fill the colors. If you want, you can choose some layout, you can move pictures or maybe if you wanted to put a box down, all rearrangements you can do for your presentation purposes. Okay, a very similar plugin, what I would call is wireframes. See, you can generate different different reports or a video player. Or if you wanted to have a list based application, you can select and run this plugin wireframe. What happens is it automatically generates a wireframe kind of a layout where you can use this in your presentations very, very quickly. Guys. See, imagine if you're using a design task for half an hour or one hour. If you get a time to do it, you can use this plugins to increase Your productivity normally design task manager given whiteboard challenges. One hour, maybe in a day they'll ask you. Sometimes maybe in two days they'll ask you. At that point of time, you can focus more on your research and creative skills rather than this plugins because plugin takes hardly one or two minutes to implement so that you can use it in the last to create a stunning presentation as well. You can use any different format, guys. If you want to add music players or reports or a data presentation, anything can be possible. In wireframe. A similar plugin, what I would say is autoflow. It does a similar job. You can try out a U T O F L O W. Okay. And the other plugin, what I would say is lottiefiles. This is beautiful plugin, guys, when it comes to creating some animation. See, normally when you want to create an animation in Figma, you need to go to a option called prototype. You need to select the frames, you need to connect it. You need to give some user flow, smart animate timing everything right. It takes a little time. But lottif files L O T T I E F I L E S is automatically. There are animations available in that plugin. You can just click that and it'll automatically pop up in your screen. If you wanted to change that frame rates of animation. Yeah, you can do it. If you wanted to change the color of the animation, you can do. If you wanted a different different. What do you call size changes. If you wanted to download as a SVG vectorized file that is a little premium, but you can use free templated version that itself solves pretty much of your purposes. This is a very cool plugin to use animations in your figma. It's the best plugin I would say. Okay, so the ninth important plugin I would say is Star Accessibility S T A R K okay, so you can use your screens and you can check for colorblindness. You can use and check for WCAG compliant. You can run this before you give it to your quality testing team so that they can able to find out your screen is good. They will not be able to rework on your entire screen because Star Academy, Star Accessibility STAK will give you a clarity in where you went wrong, how you are able to place your text, how you're able to change colors, how you're able to give gradients, etc. Etc. So that it will be very clearly prompting out an error for you. You can do a real time projects and you can able to submit it to your quality assurance team. Okay, so the very similar plugin I would say is design lint. You can able to select the entire screen and you can run this plugin, guys. It will show you lot of color mistakes and different, different styles and everything. It will show like let's say if you have aligned all this text and still you wanted to make like let's say one or two alignments is not aligned properly or the style is very different. This particular design lint tool will capture that and it will group to you. It will Show out of 50, 33 elements are out of different style. The beautiful thing about design lint is if you go to an option called fix it in that particular style guide automatically it will all change to 50 different 50 elements in the same design style. You don't have to go to that error elements and change it manually. This saves hundreds of hours of your time when you're building huge big solutions in mobile app and website design. Lint is a beautiful plugin. You chicken save your productivity and it can make your screens very qualitative before you give it to any kind of a designer or a quality team or even your client. Okay, there is something called Anima. If you're making a design and if you wanted to give it to your coder. Okay, how you will able to communicate, you can run that Anima plugin and then you can generate code, you can copy, paste and give. Normally Figma itself is directly readable by different different programmers and developers because it has a share option where you can generate a thing. But Anima is a very good tool where you can generate particular code for that element and then you can share that. Okay, very specifically, you don't have to import the entire file and the next plugin. What I would say is icons. When you wanted to download icons or when you wanted to use something like different, different colorful icons. 3D icons. You can use icons 8, you can use icon sax, you can use Iconify. You can use something like material symbol. So all these things are very similar plugins, but material symbol is very unique. Guys, what is the beauty is you can download a different, different lighter version, a darker version, a more weighted version, a lesser weighted version. So you can have a variations in your icons icons 8. Beauty is it has 3D icons where you can download 3D icons also which is icons 8 and icons access icon S X and iconifies I C O N I F Y. You can able to clearly pause this podcast and write it down and check out so that you remember that a lot. Okay, this is about icons. I Gave you four different plugins. And when it comes to image Background Remover, you can use BG Remover normally. Guys, when you go for a browser BG Remover, click it, import, download, save and then drag and drop. Takes time, right? BG Remover comes with a plugin in Figma where you can run that image. Click boom. Automatically your background runs away. You can use your customized background, gradient, colors, anything to make sure it pops up good. And the next plugin for BG Remover is bixcut B I X C U T. You can run this plugin and do the same job. What BG Remote use it. But BG Remote, I personally tried. It's a beautiful tool. You can use it, guys. Okay? And there is something called Contrast. If you are, if you want to check your particular application, what you design for checking the color contrast and color blindness, you can use this tool called Contrast. It will give you exactly where you went wrong and how we can able to improve it and how we can able to give a better contrast for your customer. Okay? And when it comes to typeface, there is another plugin called Font Scale. You can use different hierarchy of fonts. You can use a different spacing, you can use a different layered font which will automatically generate to you so that you can drag and drop, copy, paste. Like let's say if you wanted to use a header or a sub header or a in between text or an alert text or a simple little information. So you need a hierarchy in the typeface scale, right? So, so Font Scale will be able to generate that automatically and you can drag and drop it. You can use a similar plugin called Typescale which is also does the same job. Okay? And there is another tool called Text Helper. When you wanted to replace and find a text, you can use this T E X T H E L P E R okay? Text Helper, it can automatically replace the text. Like let's say if you build 200 screens and then your client is coming up with an input and you want to change that particular word in all the screens, you don't have to do manual 200 screens. You just have to run this plugin, change that word with whatever word you want, find and replace, tuck, tuck, enter. That's it, you get done. Okay? And the next plugin is going to be your very, very best plugin, guys, which is called Mockup. You can import your screen and you can run this plugin called mocup. What happens is it will exactly import your image into a mobile phone or a laptop version or A watch version or anything. Okay, so Mock up is a beautiful tool where it can showcase your final design in whatever format you want. And you can change that resolution, anything as per your device sizes and everything. Okay. There are some templated versions also like iPhone and other templates, you can use that as well. And the next plugin, what I would suggest you is Relume Ipsum. This is a wonderful tool because it searches in real time about your data and it has a GPT model enabled inside it for searches. So rather than going to Google search and coming back to this window, you can use this plugin to really run a real time search about that company or a description and you can replace that into your content. This is a beautiful tool. And the last important tool I would say, last two important plugin I would say is called Esometric. Esometric is a beautiful tool where you can select your entire frame. Okay. You can run this plugin called E A S O M E T R I C. What happens is it will beautifully layer your particular frame in a three dimensional way. What you can do is you can align it to left hand side, you can align it to isometric view, you can align it to upside down, you can align it to any different perspective view you want. And what happens is you can able to move your buttons and icons in your screen for different different layers. Have you seen high quality animations, what people used to do for different different websites and mobile apps? You can go and find an Apple, Microsoft, so they do this animation right? It's all beyond this point of a plugin. So you can able to layer your text and you can able to import this file into a particular image or maybe a PDF or SVG png. You can do it. And then you can put this into after effects cinema 4D premiere pro and you can play a background music and moving animation for it. What happens is it will be very beautiful whenever you're showcasing. Hey, this button is for selecting the icon. So automatically that icon pops up in a 3D way so that your customer really feels that, oh, this is how this icon works. Wow. You can create a glass layer, you can create a transparent layer, you can create a color layer, gradient layer. Anything could be shown in 3D using this plugin which is Esometric. You can try this plugin guys. And the final plugin, what I would suggest you is called Pitch Deck, Presentation Studio. My favorite and the best last plugin. Okay, you can type it out. P P I T C H D E C K Pitch Deck and Presentation Studio. What happens Is see guys, listen carefully. You need to select all of your screens and run this plugin. You will see magic happening in your screen. Okay? What happens is it entirely collects your data, it summarizes as a PPT and it gives you a kind of a templated version of it. What happens is you can able to rearrange your slides, you can able to customize your theme, you can able to move and edit your content here and there so that your final figma screens becomes a direct result presentation for your interview. Boom. This is this one plugin will make you at least 10x faster guys. Because a lot of times whatever designers do is taking a lot of time for aligning their content presentation, putting it in their portfolio. Right? This is in one go you can create everything and you can do a project in one day, guys, where I teach my students how they can do a project from the morning till night and I can able to completely bring that solution and upload it in their portfolio. This is all because of this plugins which I teach them in the class so that they can able to live run and I'll show them how to do and they were able to upload the project in one day. Imagine whatever designer gives a task for one day or half day or two day they will be able to throw out because this kind of a plugin helps them. And if you are able to resonate with that, definitely you can check out this 20 plugins and let me know how you felt about it. Okay? And if you wanted my mentorship to really teach you all these things in a step the of manner, don't worry guys, I'll be able to happily help you. You can send an email to dfcdesignforchange at gmail com. I'll be able to qualify you for the mentorship program. And if you find this podcast useful, give me a best training in Spotify and Apple. Thank you so much guys and we'll see you in another episode. Thank you. Bye bye. Take care.