21 Best Figma Plugins for Designers in 2021
Here's a collection of the best Figma plugins for designers guaranteed to improve your workflow.
Molly Hellmuth
July 27, 2021
•
14 min read
.svg)
Picking the right Figma plugins to power your design workflow can be daunting. To help you out, we went full-on Wirecutter mode.
We installed and tested over 100 plugins to find the true gems. Below is a collection of 21 plugins guaranteed to improve your workflow. They've all been organized into 6 different "Stacks". That way you can jump straight to the most relevant plugins for your work.
Here's each Figma plugin stack:
Before we get to the recommended plugins, a quick intro on plugins.
What are plugins?
Plugins give your Figma workspace superpowers. They are extra features that extend the power of Figma, and make it easier to do design tasks in your design files.
How to install and use plugins?
You can install any Figma-supported plugin right from the Figma Community page. Find the plugin you want to install, go to the plugin page, and click "Install". Once installed, the plugin is immediately available to use in all your design files.
To access and use the plugin, open a design file, click the Figma icon, and find the "Plugins" option in the menu. Then select the plugin you installed. You should see the plugin module appear in Figma, and now you're ready to use the plugin.
With that, let's move on to our first plugin stack.
Every design project needs content. Whether images, dummy text, or icons, you need content to make high-fidelity designs. The problem is, finding and adding high-quality content is time-consuming. The plugins below are essential for quickly adding a wide range of content types to your designs.
Content Reel is a one-stop shop for most of your content needs. It supports a huge library with specific categories of content to populate text layers, frames, or shapes. Choose from 100+ types of dummy text (e.g. lorem ipsum, names, dates), 100+ types of image fills (e.g. avatars, logos, cities), and a few icon libraries by Microsoft. If you can't find what you're looking for, you can also create an account and import your own text or image category.
Example use case: Bulk populate text layers in a table with realistic data.
Pro tip: Select the star next to the categories you use often to "favorite" them. Then find all your favorite categories under the "Home" tab for quick reference.
Cost: Free! Must create an account to import personal content.
Creators: @MicrosoftDesign, @aistrope, @gavriloff, @wendyhsu
This plugin lets you sync Google Sheets with your Figma file to bulk populate text and image layers. This is a game-changer for any designs that need a large amount of data. Especially if that data needs to be up-to-date. Instead of populating every text or image layer 1-by-1, every layer automatically populates at once.
Example use case: Populate multiple data points for three cards.
Pro tip: Add images by pasting their web URL into the table cell. This only works if your image layer is a shape (not a Frame).
Cost: Free! Must have a Google account.
Creators: @DavidWilliames
Blush supports a large library of well-designed pre-built illustrations. It also makes it easy to customize illustrations to match your brand. You can add illustrations created in Blush to your file as a PNG or SVG.
Example use case: Create a unique character by selecting from a number of different properties.
Cost: Free! Must upgrade to Pro to add illustrations as SVG.
Creators: @blushdesignapp
Unsplash is one of the most downloaded Figma plugins for a reason. It's the best plugin for finding and adding high-quality photos to your designs. It is perfect for when you need to find specific, or particularly beautiful images.
Example use case: Inserting a specific image into a product card.
Pro tip: Select multiple layers, then choose a category in the "Presets" tab to populate each layer with a different image.
Cost: Free!
Iconify feels clunky, but it's the best (free) all-in-one icon plugin. It has 100+ icons sets from popular libraries like Material Design and Font Awesome. Plus, each icon set is searchable and has vector support.
Example use case: Add a specific icon to your file from a certain icon set.
Cost: Free!
Creators: @cyberalien
Once you have your content, you'll need to export it for development. Exporting assets from Figma can result in large files that take up a lot of space and slow down performance. Instead, use TinyImage Compressor to reduce the size of your exports. It supports compression for JPG, PNG, SVG, WebP, GIF, WebM, AVIF, and PDF file types. It's the best way to reduce asset size and keep the original quality.
Example use case: Compress large images
Cost: Paid subscription after free trial (15 compressed exports).
Creators: @figmatic
Keeping your designs pixel perfect and up-to-date not only makes you look like a real pro but makes maintaining your design file and communicating with your team much easier. The larger the project, the more important, and difficult, this becomes. Below are the best Figma plugins to help you and your team catch errors and make bulk updates.
Style Organizer allows you to see every color and text layer on a page, identify if it's linked to a style or not, and make bulk updates. It even recognizes when "unlinked" layers match a saved style and will "merge" them all to apply the correct style. This is a huge time saver when you need to clean up a file with a lot of missing styles.
Example use case: Find all missing color styles and "merge" them with the correct style.
Cost: Free!
Creators: @1535
After testing the top 4 spellcheck plugins, Spell Inspector was the clear winner! It searches an entire Figma page and shows all the misspelled words in a table format for easy scanning. This is crucial as you are bound to have some gibberish placeholder text. Being able to scan and ignore them is a big time saver.
Example use case: Finding and correcting all spelling errors
Cost: Free!
Creators: @logicwind
I'm not sure why. I'm not sure how. But I've seen too many design files using mismatched icon sizes. If this sounds familiar, you need this plugin! Rather than manually resizing every icon's frame and vector shape, then center aligning everything. Use Icon Resizer to bulk resize all your icons (frame AND vector).
Example use case: Resize a set of icons whose frames and vectors are all different sizes.
Pro tip: Make the max width/height ~6px less than the box size to allow for a little internal padding.
Cost: Free!
Creators: @arbel
Similayer allows you to auto-select every layer on a frame that is "similar" to your original selection. This is a huge time saver when you need to select 10+ layers. Especially if those layers are nested inside of groups or frames. Use it to select layers with similar text, fill, stroke, size, position, etc. It can even be used with multiple properties (e.g. similar fill AND stroke). My favorite way to use Similayer is to select all instances of a master component and make bulk overrides!
Example use case: Select every instance of a certain icon to swap it with another icon.
Pro tip: Use this plugin with Content Reel to bulk populate many similar layers.
Cost: Free!
Creators: @DavidWilliames
There comes a time for every website or product when branding needs a refresh or update. While this is often a fun moment for exploration and creativity, it can also be a daunting task. Finding the right styles and making all the updates is difficult and time-consuming. But with the plugins below it doesn't have to be. Use them to auto-generate the perfect color palette and update your text and color styles in bulk.
Customizing every style to match your branding is tedious. Especially when you're starting a new project or customizing a UI kit. That's where Batch Styler comes in. Rather than editing styles 1-by-1, this plugin allows you to edit every aspect of your text or color styles in bulk.
Example use case: Update the font family for every text style.
Pro tip: Use the "find & replace" inputs to bulk update style names.
Cost: Free!
Creators: @six7
Image Palette allows you to pull color inspiration from an image. It uses a fancy algorithm to capture the 5 most prominent colors of an image. This is a great way to discover new color combinations you might not have thought of.
Example use case: Create a color palette from an image
Cost: Free!
Creators: @mattdesl
Generating a well-balanced range of colors can be time-consuming. It's both a science and an art form that is surprisingly difficult to get just right. Luckily the Tailwind Color Generator can do most of the heavy lifting. From one base color, the plugin generates 10 balanced styles (1 base + 4 tints + 4 shades). The new colors can then be found neatly organized in the Style Panel.
Example use case: Create a full color range based on one default color.
Pro tip: Use Image Palette (above) to find base colors.
Cost: Free!
Creators: @picapipe_com
Install Tailwind Color Generator
There's nothing less user-friendly than your users not being able to see your designs. Use these plugins to catch accessibility errors early and set up guidelines to follow as your designs scale. This ensures users understand and can navigate through your product with ease.
After testing the top 3 color accessibility plugins, Contrast is the clear winner. It's easy to use and super fast at flagging contrast issues. You can test contrast ratios (from WCAG) for a single layer, or scan an entire page to spot issues. It even uses "smart sampling" to check the contrast with elements using a gradient or image.
Example use case: Test the contrast ratios for each of your text layers.
Pro tip: Keep all black text layers above 65% opacity.
Cost: Free!
Creators: @maark
This plugin allows you to create views for 8 types of color vision deficiencies. Each view represents how people with color blindness experience your website or product. It then flags where they may have trouble. You can then make updates to the color palette or add extra signals (e.g. icons, text) to reduce confusion.
Example use case: Test accessibility by creating views for all 8 types of color vision deficiencies.
Pro Tip: Test the contrast ratios for each view you create using the Contrast plugin.
Cost: Free!
Creators: @sammdec
Use this stack of plugins to go the extra mile and bring your designs to life. Create animations or vector shapes that you otherwise would only be able to create in a separate tool (e.g. Adobe). Or generate complex effects and sharp-looking mockups.
This plugin takes things to a whole 'nother level! It allows you to create advanced animations to show specific interactions. Instead of using a separate tool like Adobe After Effects, with Figmotion you can create an animation right in Figma. It's also easy to use (even for novice animators). Render animations as mp4, gif, webm, or export as CSS or JSON.
Example use case: Create an animation for a loading screen.
Pro tip: Insert gif into your prototype to show where this behavior can be found. During "presentation" the gif will autoplay.
Cost: Free!
Creators: @liam
Image Tracer allows you to "trace" an image and generate an exact copy as a vector shape. This is perfect for removing a background, editing the shape/color, or export as an SVG. I often use this when creating illustrations or modifying a logo or icon.
Example use case: Create an editable vector shape from a PNG.
Pro tip: Use images with a solid dark shape on a light background.
Cost: Free!
Creators: @DavidWilliames
Morph allows you to create interesting effects to give your designs a little extra "oomph". Each effect is pre-built and ready to use. Or you can tweak the properties in the Design Panel to get it just right.
Example use case: Create interesting effects for a card background.
Cost: Free!
Creators: @millons098
Place designs in a device mockup to show them in marketing websites, ads, or portfolios. Clay mockups 3D not only allows you to insert your design into a device. It allows you to customize the device angle, rotation, and color.
Example use case: Insert design into a customized device mockup
Pro tip: Make your frame size 1200x800 and add a little extra internal padding to the top.
Cost: Free!
Creators: @hamishMW
Wireframe plugins make it easy to use Figma for both low and high-fidelity designs. That way all your design work is in one place and easy to reference vs in separate tools. The plugins below speed up the early design phase work with drag/drop layouts and automatic arrow connectors.
Autoflow is a quick and easy way to add connecting arrows between frames to illustrate a user flow. The best part? When you move the frames, the arrows automatically update to maintain the connection. You never have to manually move or edit an arrow again.
Example use case: Create and edit a user flow
Pro tip: Re-open Autoflow to edit frame location. When Autoflow is open, you can change frame location and the arrows will update automatically.
Cost: Free!
Creators: @davidyitong
Wireframe is a great plugin for mocking up a design idea right in Figma. It allows you to add a wide range of common layouts that are uniformly styled. Using these layouts is a great way to move fast and not get bogged down in the details.
Example use case: Create a wireframe
Cost: Free!
Creators: @HexorialStudio, @imdeepjoshi, @itsmnthn
There you have it: 21 of the best Figma plugins to power your design workflow.
We recommend installing a few plugins from our list and playing around with them in Figma. After some practice, you'll see how valuable these plugins can be for you and your team.
We hope this guide has been helpful for you!