Introduction
Here are the 20 plugin I use most and those plugins are boost my productivity 2x faster.
1. Master:
Master is a helpful plugin for moving a design system to a different file/project or migrating your design files from another tool, like Sketch or Adobe XD.
Master can create, clone, and move components between files. Besides that, Master can create a new component from any object on your canvas. This especially comes in handy when you decide to systematise your draft designs into a structured file.
Master is a paid plugin but has a helpful free guide to help you get on board and decide if you need it or not.
2. Batch Styler:
Batch Styler lets you change many multiple colors and fonts at once. This plugin will save a lot of time by changing the whole design system with a single click.
3. Zeplin:
Zeplin is an all-in-one handoff and organisation tool. You can easily create user flows and organise your design files with variants to keep desktop, tablet, and mobile screens in one place. Zeplin also auto-generates design tokens from colors and fonts from your designs.
4. Content Reel:
Content Reel is one place where you can get EVERYTHING, literally everything; from images to text strings to icons, and also Avatars. I use this plugin very often and this plugin is created by Microsoft. This is the most important and time-saving plugin for me.
5. Dark Mode Magic:
This is the crazy plugin we have in Figma. Dark mode magic changes your Light theme design to a Dark theme with just a single click. Though it doesn’t optimize all the colors but this plugin will help you a lot if you are converting a light theme design to a dark theme.
6. Figma to HTML, CSS, React & more!:
This is one of my favourite plugins. You can convert any website to a Figma design with a couple of clicks. Imagine converting any website to design and using that website component.
7. Icon Resizer:
Importing a bunch of icons and resizing them manually is a very long procedure but you can resize all the icons which are selected with a single click. This plugin is really helpful when you are importing lots of icons.
8. Breakpoints:
Breakpoints by Floweare is a plugin that will help you scale and design your screens across different device sizes. The plugin has a prototype mode that will let you scale your designs without having to switch to the prototype mode on Figma. To begin with, you have to set auto-layout for a couple of device sizes and define nodes in the app console, which is pretty easy to use.
9. Draw Connector:
The connector lines and shapes are very helpful while creating user flows. Draw Connector is an awesome plugin to label and connect your layers just like that.
10. LottieFiles:
With the LottieFiles plugin, you can insert animations into your designs. You can either import SVG or GIF animations which are completely free and LottiFiles has 1000s of animations for your projects.
11. Typescale:
As a designer, we all know the importance of typography and hierarchy. Typescale is the best tool to generate type scales quickly.
12. Similayer:
Similayer by Dave Williames is a Figma community award winner as people’s favourite plugin for extending Figma’s utility. Although Figma has a native selection experience, you can for example ‘select all text layers’, or ‘select all images’, this particular plugin helps you select layers with similar properties almost to precision. It eases the burden of selecting layers or objects one by one. Imagine it like a filter for selecting similar layers/content and change them all in one go. It has a wide range of properties you can select to filter and change.
13. Instance Finder:
A true saviour when you need to find out where a specific instance of a component is located. Use Instance Finder whenever you need to find an old dusty component linking to an outdated or someone else file.
14. Design System Organiser:
Design System Organiser helps to manage your components and styles. With its help, you can easily arrange files, copy styles between files, and bulk update component instances. The plugin supports working with local and external libraries and has a helpful context menu to help you organise, delete, and group components and styles. DSO is a paid plugin with a 15-day free trial for each new file.
15. Contrast:
The Contrast plugin is a tool to ensure your designs are passing the Web Content Accessibility Guidelines (WCAG). To use it: select a layer and run the plugin. The plugin will instantly analyse the background behind your selection and display the contrast ratio between foreground and background.
As a bonus, you could use the Contrast plugin to generate a report of all contrast issues in your file, with an option to fix them.
16. Clean Document:
A plugin with a toolset to organise and clean up your files before handing your design system for a review or handoff.
The plugin includes the following features: delete hidden layers, ungroup single-layer groups, make pixel-perfect designs, smart rename, sort layers, and more to help polish your Figma document.
17. Supa Palette:
Supa Palette is a powerful color editor and generator. Use it to create beautiful and accessible-first palettes in no time effortlessly. The plugin has a very friendly UI and a premium plan with more features to control your design system color styles.
18. Themer:
Themer is another excellent plugin that enables you to make and swap themes from a published team library. You could use it to apply colors, text, and effect styles to the whole page or your selection.
19. Remove BG:
If you are using any images and you want to remove the background of the images, then Remove BG is the best plugin to remove the background with a single click.
20. Ghost UXwriter:
It makes super easy for designers to add UX copy into their designs. Whats interesting is they have common UX copy categories that you can readily copy with a voice and tone variation ranging from plain, casual, and playful. You can also bookmark and create your own personal copy that you use often.