Figma has become one of the most popular design tools in recent years for a good reason. It’s simple and powerful enough to handle complex design projects. And best of all, it’s free! But what makes Figma even more helpful is its wealth of plugins. Figma plugins can add new functionality to Figma, making it an even more powerful design tool.
This article will share the best Figma plugins for designers in 2022. These will help you speed up your design workflow, add new features to Figma, allow you to create a design system, and generally make your life as a designer easier.
What are plugins in Figma?
Before we dive into the best Figma plugins, let’s first take a quick look at what they are and how they work.
A Figma plugin is a piece of software that extends the functionality of Figma. It can be used to add new features, automate tasks, or make Figma easier to use.
Most plugins are created by third-party developers, although there are a few official Figma plugins. These can be installed directly from the website.
To use a plugin, you first need to install it. Once installed, you can activate it from the “Plugin” menu at the top of the screen.
Some will add new menu items to the Figma interface, while others will work silently in the background. Either way, you can usually configure how a plugin works from its settings page.
What is Figma?
It is a type of Scalable Vector Graphics (SVG) editor and tool primarily used for interface design. It’s similar to other popular design tools such as Sketch and Adobe XD, but with one key difference: It is browser-based.
This means you can use Figma on any computer, regardless of the operating system. It is a popular no-code tool that designers and creators use to prototype websites. You can lay your entire design down to the exact pixel. This tool allows you to create unique web designs that break the mold of boring website templates.
You can also use Figma to make a flow diagram and a quick minimum viable product to show customers and investors what your company is about.
What is the use of plugins in Figma?
There are all sorts of reasons to use plugins in Figma. As we mentioned, they can add new features or automate tasks. But there are other benefits as well.
For example, they can help you work faster by providing shortcuts for everyday tasks. They can also improve your team’s collaboration by sharing design files directly from Figma. And finally, they can make it easier to hand off your designs by generating codes or exporting design files.
In short, a plugin can be beneficial for any creator. And with the wealth of plugins available, there’s sure to be one that’s perfect for your needs.
Advantages of using plugins in Figma
There are many advantages to using plugins in Figma. Here are just a few of the most notable benefits:
1. Extend Figma’s functionality. A plugin allows all sorts of new features to Figma, making it an even more powerful design tool.
2. Speed up your workflow. By automating tasks or providing shortcuts, they can help you speed up your design workflow, allowing you to create more designs for your client and make a user flow diagram with the best user experience.
3. Improve collaboration. A plugin allows sharing of images with your team more accessible and gets feedback on your work in real-time.
4. Generate codes. Some plugins can generate codes from your Figma file, making it easier for developers to hand off your work.
5. Export files. A plugin allows the exporting of your file as images or text strings easier, making it simpler to use in other projects.
6. Free to use. Many plugins are free, although some are premium. Either way, they’re a great way to add new functionality to Figma without spending any money.
7. Easy to install. Plugins are easy to install and use so that you can get started with them immediately.
8. Customizable. Most plugins are highly customizable, so you can configure them to work precisely the way you want.
How to Upload Figma plugins?
Installing Figma plugins is a simple process. Just follow these steps:
1. Open the “Plugin” menu at the top of the screen.
2. Click on “Manage plugins.”
3. From there, click on “Install a plugin.”
4. Select the plugin you want and click “Install.”
5. Follow the instructions on the screen to complete the installation.
Once the plugin is installed, you can activate it from the “Plugin” menu. You may need to restart the plugin window for it to take effect.
Some will add new menu items to the Figma interface, while others will work silently in the background. Either way, you can usually configure how a plugin works from its settings page, quick and easy.
How do we use Figma plugins?
Using Figma plugins is easy. Just follow these steps:
1. Open the “Plugin” menu at the top of the screen.
2. Select the plugin you want to use from the list.
3. Follow the instructions on the screen to use it.
Most plugins will add new menu items to the Figma interface and configure how it works from its settings page.
Can viewers use plugins in Figma?
Yes, viewers can use plugins in Figma. However, they will only be able to use the file owner’s plugins.
If you want to allow viewers to use a plugin, you must upload it yourself. Then, give viewers the “Can view” permission when you share the file. Viewers can see the file in real-time once shared.
Keep in mind that plugins can potentially give viewers access to sensitive data. For example, a plugin that generates codes from your designs could reveal the structure of your project to viewers. As such, you should only upload plugins that you trust and are appropriate for the level of access you give to viewers.
Top Figma Plugins (Click on the plugin for free download)
Icon Resizer
Icon Resizer Batch is a free app that resizes icons, making them all the same width or height. It also standardizes the size of their bounding boxes to make them work well as nested components. The manual import and resize process is long, but it’s possible to adjust all icons selected in a single click using the button. The icon resizer helps import many icons and their styles that you may use in your design process.
Feather Icons
Feather icon libraries are designed with several simple icons. It is a good plugin, though its icons are much smaller than other icons in the package. It also gives you SVG or scalable vector graphics that can instantly be customized — size, color palette, drop shadow, color contrast, and anything that can be done with the power of CSS.
Draw Connector
Connecting lines and shapes can help create flows for creators. Draw connector plugin is incredibly useful in the way that a designer can label layers. Draw Connector helps to draw perfect orthogonal connectors between selected layers.
Autoflow
Autoflow is a free tool that provides an easy way to create a user flow. You can easily create a user flow using simple shapes that connect. Simply select 2 images and a line will be magically drawn between them. Run Autoflow. Select any 2 shapes while holding down ⇧SHIFT and a line will be drawn. Keep selecting until you’re all wired up!
Remove BG
Remove BG is the best plugin that is used to remove the background from images uploaded from Unsplash with a single click. Integrate Remove BG with Figma to remove the background anytime you create a website wireframe, design mobile app interfaces, prototype designs, create social media posts, and more. Removing the background will make your design easy to tinker with. You can add reflections, shadows, layers, or other effects on Photoshop and After Effects.
UIGradients
This plugin allows adding gradients to a simple website. It generates shades, tints, frames and a color palette based on select layers or local styles. You can also create color contrast to your images with UIGradients.
Breakpoints
You can preview a responsive layout inside a Figma frame and share an animated prototype when you use Breakpoints. It works even without the opened plugin window and anyone in your team can resize the frame without the installed plugin. For the rest, you can share an animation prototype.
LottieFiles
LottieFiles provides an easy way to use animations in your designs. You may import GIF or vector animations from Unsplash or use LottieFiles. LottiFiles provides 1000s of animated images to suit your project. It optimizes your design workflow so that you can focus only on creating designs. It helps you create realistic prototypes with animations and gives access to the world’s largest Lottie animations library right within your favorite design tool, Figma. You can also generate your SVG icon when you use this plugin.
Content Reel
Content Reel is a content curation app that allows creators to easily search, import, and organize the best content for their design projects. With Content Reel, you can search for specific content types (such as images, videos, or icons), or browse through popular categories to find the perfect design for your project. Once you’ve found a design you like, simply click “Import” to add it to your project.
Content Reel is a great way to save time and get the best content for your designs, all in one place. With its easy-to-use interface and comprehensive illustrations library, Content Reel is an essential tool for any Figma user.
Best Figma plugins for going from Design to Development
Creating designs in the browser can be a pain. With these plugins, you can easily hand off your designs to a designer with the necessary codes and specifications.
Anima – Export Figma to HTML, React & Vue code
Anima is a design-to-code platform. This means that Anima allows a designer to create fully responsive prototypes (code-based prototypes) that look and feel like the finished product, so he doesn’t have to explain his design’s behavior; he can let his design speak for itself.
teleportHQ – Figma to Code – Export HTML, CSS, React & Vue
TeleportHQ is a collaborative front-end platform with integrated user development and content modeling tools. It is a powerful visual builder to create and publish your headless static websites automatically.
Locofy FREE BETA – Figma to React, React Native, HTML/CSS, Next.js, Gatsby
Locofy.ai helps creators and developers launch products 2-3x faster with design-to-code automation. With Locofy, you can generate React, React Native, HTML/CSS, Next.js, or Gatsby codes from your designs automatically with just a single click.
The Locofy plugin allows you to tag your design layers manually or auto-tag with LocoAI, define user behavior and responsiveness rules, and add actions! If you’re using user interface libraries, order your components as Material UI, Bootstrap, Ant Design, React Native Paper, and voila! You can also drag and drop pre-built Material UI, Ant Design, and Bootstrap components into your design system.
Rendition [Beta]: Figma->React Components in one click
Rendition looks at your design and writes responsive React codes for you at the single click of a button. It is highly recommended for designers who want to generate React codes corresponding to their designs quickly.
Clapy – Export Figma design to code (React, HTML, CSS)
Clapy generates codes corresponding to your Figma designs with a single click. With Clapy, you can automatically generate React, HTML, and CSS codes that look just like your Figma design.
Overlay (Figma components to React, Vue, HTML)
An overlay is a plugin to transform your Figma components and Sketch Symbols into clean and reusable React/Vue/HTML codes. Additionally, it allows both text strings and images to be used as overlays. The overlay plugin can also be configured for when the overlay appears and for how long. Use the player styling options to add a simple image overlay to a player. You can also use the SVG icon when you use this plugin.
Best Figma Plugins for Productivity
There are a ton of great tools out there that can help designers boost their productivity when using Figma. Here are some of the best:
Viewports
A viewport is a handy tool for changing the size of your frames to various standard device sizes. You’ll need to set up constraints on your frames first; then, you can launch Viewports and use it to see how your mockups will look in the selected frame size. One of the most valuable aspects of this plugin is that it shows you the estimated global market share of users browsing content from a specific device for each frame size. This helps understand how prevalent specific viewport sizes are.
Component Cloner
This tool will make a copy of any master component and instances that you have selected. It’s been a great time saver for any design system. Take this use case: You have an icon component and want to see what it looks like with several color palette overrides. Or perhaps you are building an icon sprite and you want to duplicate that component and all its illustrations for the following icons you’re designing? This tool eliminates the legwork from that process!
Nisa Text Splitter
Have you ever copied and pasted a text block into Figma, but realized you want each line of text as a separate object? Perhaps you also need to sort those items alphabetically or reverse their order? Nisa Text Splitter will remove the tediousness of this process. Input or paste your text into a new text box and launch Nisa Text Splitter. Then you can use it to split the text into a separate text box at each line break.
Find and Replace
The Find and Replace plugin enables a designer to find and replace text strings across your document. This plugin has a few additional tricks: in addition to replacing text strings on canvas, you can also see and replace layers by name. Both operations support case sensitivity and allow you to indicate where in the line you want to make the substitution: anywhere in the text, the beginning, the end, or only strings that match exactly. There is no shortage of use cases where this will come in handy, and content creators on your team will love it!
Similayer
There are no shortages of use-cases for Similayer—this plugin will make a selection from whatever parameters you select. If you have used Figma’s native “Select all with same ____” functions from the Edit menu, you can already understand how this plugin works. Select an element, launch Similayer, and add the parameters you want to find a match for.
For example, you could use this to find all elements with the same border radius or with the same fill, style, stroke, border radius, contrast ratio, and drop shadow! This plugin will save you MANY clicks the next time you need to edit a bunch of similar layers.
Font Awesome
If you’re using vector icons in your designs, this is a must. Font Awesome is a free app that gives you access to over 1,500 vector icons right inside of Figma. You can use the search function to quickly find the icon you’re looking for or browse through the complete list of available icons, fonts included. To insert one into your design, simply click on it and it will be added as a new vector object. Then, you can scale, color, and style the image just like any other vector object in Figma.
Figma Plugins FAQ
How do I get Figma plugins?
To start with Figma plugins, head to stigma Plugin Directory. From there, you can browse through all the available tools and upload the ones you want to use in your design system. Follow these simple steps:
- Click on the three horizontal lines in the top-left corner. You should see a list of commands on the pop-up screen.
- Hover your mouse over the menu. This should open a list of all the plugins you’ve installed on Figma.
- Click on the one you’d like to run.
How do I uninstall a Figma plugin?
To uninstall a plugin, head to the menu and hover over the one you want to remove. You should see an “Uninstall” option appear. Click this to remove it from your account.
What is the difference between a plugin and a script?
A plugin is an application you install on your computer, adding new features to Figma. On the other hand, a script is a set of instructions you can run on demand to perform a specific task. Scripts do not need to be installed and can be run from within Figma.
Do a Figma plugin cost anything?
No, it is free to use! Once you have one installed, it allows you to create a design system that is quick and easy to use so that you can do everything with a single click!
Can viewers use plugins in Figma?
Clients typically act as viewers rather than editors. This means they cannot upload or use plugins in Figma. However, if they need to use a specific plugin, they can ask the designer to upload it for them and use it in real-time.
Where do I learn more about Figma plugins?
If you want to learn more about Figma plugins, we recommend checking out the Figma Plugin Directory. From there, you can browse through all the available plugins and find ones that fit your needs. Or you can join the Figma community at Design Match that helps you grow as a designer. Design Match has a community of designers who use Figma and can answer any questions you have about using plugins.
Design Match also offers a matching service for designers like you and clients who are interested in creating a design for their business but does not have the expertise to do so. It is a network where you keep 100% of what you make. If interested, sign up today!
