21 Best Figma Plugins for Designers in 2021

Here's a collection of the best Figma plugins for designers guaranteed to improve your workflow.

21 Best Figma Plugins for Designers in 2021

Here's a collection of the best Figma plugins for designers guaranteed to improve your workflow.

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:

  • Content Stack: best plugins for populating rich content into your designs
  • Perfectionist Stack: best plugins to keep your design files tidy and error-free
  • Branding Stack: best plugins for creating and maintaining styles
  • Accessibility Stack: best plugins to measure and improve accessibility
  • Showoff Stack: best plugins to add effects and animations to your designs
  • Wireframe Stack: best plugins to build wireframes during the early design phase

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.


Content 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

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.

  1. Open Content Reel
  2. Select the layers you would like to populate (e.g. text layer)
  3. Click the desired category until you find a selection you like

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.

Gif from UI Prep Design System

Cost: Free! Must create an account to import personal content.

Creators: @MicrosoftDesign, @aistrope, @gavriloff, @wendyhsu

Install Content Reel

Google Sheet Sync

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.

  1. In Google Sheets, create a new sheet with all the content organized under labels (e.g. "Title"). Each row will later map to one component.
  2. In Figma, create your components and name the layers you need to be populated with a "#" at the beginning (e.g. "#Title"). Do not use any periods in your layer name (".").
  3. In Google Sheets, set the Share link settings to "anyone with the link" and copy the URL.
  4. In Figma, open Google Sheet Sync and Paste the Share link. Then select "Fetch & Sync".

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

Install Google Sheet Sync

Blush

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.

  1. Open Blush
  2. Select an illustration set & type
  3. Select your desired hair color, skin color, and body parts

Cost: Free! Must upgrade to Pro to add illustrations as SVG.

Creators: @blushdesignapp

Install Blush

Unsplash

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.

  1. Open Unsplash
  2. Select the layer (frame or shape) you want to populate
  3. Browse or search the library and select your desired image

Pro tip: Select multiple layers, then choose a category in the "Presets" tab to populate each layer with a different image.

Gif from UI Prep Design System

Cost: Free!

Creators: @kirillz, @liam

Install Unsplash

Iconify

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.

  1. Open Iconify
  2. Select your desired icon set
  3. Browse or search for the icon you need
  4. Drag and drop the icon into your design file

Cost: Free!

Creators: @cyberalien

Install Iconify

TinyImage Compressor

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

  1. Make images exportable (select "+" next to "Export" in the Design Panel)
  2. Open TinyImage compressor
  3. Choose items you want to compress and select "compress"
Gif from UI Prep Design System

Cost: Paid subscription after free trial (15 compressed exports).

Creators: @figmatic

Install TinyImage Compressor


Perfectionist Stack

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

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.

  1. Open Style Organizer
  2. Locate missing styles ("unlinked")
  3. Select "Merge" icon or make edit in Design Panel
Gif from UI Prep Design System

Cost: Free!

Creators: @1535

Install Style Organizer

Spell Inspector

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

  1. Open Spell inspector
  2. Navigate to the "real" misspelled word by clicking on it in the table
  3. Select the correct spelling option to replace the word
Gif from UI Prep Design System

Cost: Free!

Creators: @logicwind

Install Spell Inspector

Icon Resizer

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.

  1. Open Icon Resizer
  2. Select all icons
  3. Set "Max Height/Width" and "Icon Box Size", then select "Run"

Pro tip: Make the max width/height ~6px less than the box size to allow for a little internal padding.

Gif from UI Prep Design System

Cost: Free!

Creators: @arbel

Install Icon Resizer

Similayer

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.

  1. Open Similayer
  2. Select a single layer
  3. Choose one or multiple properties this layer has in common with the other layers you would like to select.
  4. Click "Select layers" and make an edit(s) to selected layers

Pro tip: Use this plugin with Content Reel to bulk populate many similar layers.

Gif from UI Prep Design System

Cost: Free!

Creators: @DavidWilliames

Install Similayer


Branding Stack

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.

Batch Styler

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.

  1. Open Batch Styler
  2. Select every text style (hold "Shift" to select multiple items)
  3. Update the font family and select "Update styles"

Pro tip: Use the "find & replace" inputs to bulk update style names.

Gif from UI Prep Design System

Cost: Free!

Creators: @six7

Install Batch Styler

Image Palette

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

  1. Select the image
  2. Open Image Palette

Cost: Free!

Creators: @mattdesl

Install Image Palette

Tailwind Color Generator

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.

  1. Open Tailwind Color Generator
  2. Select layer with new default color
  3. Add "Base Name" and create a color set

Pro tip: Use Image Palette (above) to find base colors.

Cost: Free!

Creators: @picapipe_com

Install Tailwind Color Generator


Accessibility Stack

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.

Contrast

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.

  1. Open Contrast
  2. Select the layer you want to test
  3. Edit layer or background until it passes all ratio tests

Pro tip: Keep all black text layers above 65% opacity.

Gif from UI Prep Design System

Cost: Free!

Creators: @maark

Install Contrast

Color Blind

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.

  1. Select layer (entire screen or component)
  2. Open Color Blind
  3. Choose one or multiple types of vision deficiencies and select "Create views"

Pro Tip: Test the contrast ratios for each view you create using the Contrast plugin.

Gif from UI Prep Design System

Cost: Free!

Creators: @sammdec

Install Color Blind


Showoff Stack

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.

Figmotion

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.

  1. Open Figmotion
  2. Select the frame you want to animate
  3. Configure the keyframes (watch this video to learn how)
  4. Render or export video

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

Install Figmotion

Image Tracer

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.

  1. Select image
  2. Open Image Tracer
  3. Select "Place traced vector"
  4. Edit vector

Pro tip: Use images with a solid dark shape on a light background.

Cost: Free!

Creators: @DavidWilliames

Install Image tracer

Morph

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.

  1. Open Morph
  2. Select a shape or vector (not frame)
  3. Select and configure the effect you want
  4. Preview effect and select "apply"

Cost: Free!

Creators: @millons098

Install Morph

Clay Mockups 3D

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

  1. Select image
  2. Open Clay Mockups 3D
  3. Customize the device type, orientation, and color
  4. Select "Save as Image"

Pro tip: Make your frame size 1200x800 and add a little extra internal padding to the top.

Gif from UI Prep Design System

Cost: Free!

Creators: @hamishMW

Install Clay Mockups 3D


Wireframe Stack

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

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

  1. Open Autoflow
  2. Configure line color, stroke, and terminal settings
  3. Connect two frames by selecting both of them while holding "Shift"

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

Install Autoflow

Wireframe

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

  1. Open Wireframe
  2. Select layout
  3. Resize layout on frame

Cost: Free!

Creators: @HexorialStudio, @imdeepjoshi, @itsmnthn

Install Wireframe


Now it's your turn

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!

Want more Figma guides?
See all blog posts
Like this guide? You'll love our newsletter👇