Figma

20 Awesome Figma Plugins to improve your Workflow

In this article I've compiled 20 Figma plugins that I've used extensively, and that have helped improve my workflow considerably.

Marc Andrew
Nov 4, 2021
10 min read
Photo by Mika Baumeister / Unsplash

Over the past few years, I've tried out and regularly used many plugins from the amazing Figma community.

Day by day, the offerings provided by this generous community keep on improving and show no signs of slowing down.

So, I thought it was a good time to compile 20 of the plugins that I've used extensively and highly recommend, as well as ones that are still being actively updated in the Figma Plugin Community. Yup, there's no "This plugin doesn’t work anymore! recommendations here.

Your search for truly valuable Figma plugins ends here.

Let's dive on in…


LottieFiles.

Some examples of a Plugins UI, with the words 'Design with Lottie' in black

Lottie has become the go-to resource for open source animations on the web. With its tiny file size and cross-platform capabilities, it's easy to see why.

And having Lottie available to you in Figma makes things even better for designers and developers using this fantastic resource.

With the LottieFiles plugin, you can quickly access a library of 1000s of free Lottie animations, add your own .lottie files via drag and drop, and easily access all your animations previewed on LottieFiles, all from the comfort of Figma.

With this plugin, you've reached Animation zen.

Grab LottieFiles here


Design System Organiser.

Various examples of a Plugin's UI with the title 'Design System Organiser'

Design System Organiser is a must-have for anyone dealing with large-scale Design Systems in Figma.

It enables you to quickly bulk-manage styles and components; something Figma lacks out of the box.

This plugin's feature set is incredible and will help you greatly when dealing with any Design System.

I cannot praise it highly enough!

Grab Design System Organiser here


Contrast.

Example of a Plugin's UI with the word 'Contrast' in black

Accessibility is not a 'nice to have'; it's a 'must have' today.

The Contrast plugin makes it easy to check the contrast ratios of colours in your designs as you work so you can make sure the project you're currently working on adheres correctly to the Web Content Accessibility Guidelines (WCAG).

It's a super-useful and required plugin that can even scan entire pages and generate a report of all text-based contrast issues it finds, allowing you to work through and fix them as required.

Like I mentioned not a 'nice to have' plugin, but an 'essential' one in your workflow.

Grab Contrast here


Downsize.

Example of a Plugin's UI with the word 'Downsize' in black

Do you want to compress your images directly on the canvas?

Downsize allows you to do just that.

Compared to something like Sketch, Figma files with many images already have substantially smaller file sizes, but this plugin can make things much better.

You can experiment with different compression levels until you're satisfied, and you can also convert those large PNGs to JPEGs if you like. Awesome!

This is a fantastic plugin that is certainly worth checking out.

Grab Downsize here


Blush.

An assortment of character illustrations, with the word 'blush' behind them

Blush is a fantastic Figma plugin created by the excellent Pablo Stanley and his top-notch Illustrator team.

I've previously struggled to find Illustrations for my UIs, with excellent illustrations being few and distributed far and wide throughout the Web. It's such a pain to find a really great set of illustrations.

That is until Blush entered the scene.

Now I can use the Blush plugin in Figma, select from a vast number of Artists and Collections, customise the Illustrations to my preference, and drop them directly into my project.

Give Blush Illustrations a go. Your designs will thank you for it.

Grab Blush here


Unsplash.

A selection of photos from Unsplash shown inside of a Plugin UI in Figma

The Unsplash plugin is straightforward, and practical, with no unnecessary frills.

There's no need to download and insert photos into Figma anymore manually. Yup. I've been guilty of this in the past.

Having access to the complete Unsplash picture library within Figma is incredible and saves so much time when adding that ideal shot to your projects.

Grab Unsplash here


Rename It.

A selection of Layer examples inside of Figma with the words 'Rename It' next to them

Rename It can save you a lot of time when working with large design files by automating the potentially tedious job of renaming countless Layers and Frames.

It's come into its own when I've been working with large-scale Design Systems and chosen at the last minute to alter the name of a Component to find out it's being utilised in several places with the old name. Not a problem with Rename It. I can find my Component with the previous naming and update it once. All done.

Rename It is such a time-saver of a Plugin and one I use frequently.

Grab Rename It here


Batch Styler.

Examples of a plugins UI in Figma, with the words 'Batch Styler' next to it

So you're starting a new project and want to switch from Roboto to Inter in multiple places. Is it possible to achieve this quickly in Figma?

Erm. Nope! Figma currently only allows you to update one style at a time manually. Yeah, a real pain.

Thank goodness Jan Six brought us the Batch Styler plugin.

With this super-convenient plugin, you can change numerous text styles simultaneously while keeping all font weights and other stylings intact and saying goodbye to all that laborious nonsense.

Batch Styler is a fantastic plugin that compensates for Figma's present lack of Text Style handling.

Grab Batch Styler here


Wire Box.

Various examples of a Plugin's UI, with the words 'Wire Box' in pink

Design Systems are everywhere. Yup. That’s a given.

With the introduction of those systems of versatility, it’s become increasingly simple to work on hi-fidelity designs fast and efficiently. Still, there may be the odd occasion when you need to revert those pristine, full-colour designs of yours to lo-fi wireframes, and that’s where the Wire Box plugin can help matters.

With just a single click, you can convert those hi-fi designs back to wireframes quickly and without all the hassle of having to recreate wires that you may have skipped in the initial stages.

Now you and your team can quickly focus on the UX side of things rather than the UI and make any adjustments needed.

A great little plugin that can come in handy for certain use cases.

Grab Wire Box here


UI Faces.

Some examples of a plugin's UI, with the words 'UI Faces' next to it

Avatars for use in design mockups, oh yes. We've all used them, and if you're anything like me, you've manually downloaded them from X, Y, and Z websites in the past.

That is until UI Faces became available as a Figma plugin.

I've been using this plugin for a few years now, and it's one of those must-have plugins installed permanently inside Figma.

UI Faces collects thousands of avatars that you can carefully filter by age, gender, emotion, and other factors.

Avatar selection in Figma doesn't get any easier than this.

Grab UI Faces here


Content Reel.

A selection of screenshots, and the UI of the Content Reel plugin in Figma, with the words 'Content Reel' in white

Content Reel is a massive plugin that has saved me a tonne of time when it comes to inserting dummy content into my projects, whether text strings, icons or even images.

The great thing about Content Reel, and what differentiates it from other comparable plugins, is that it allows you to use custom content shared by other Figma users and create your own to share with the community.

The ability to have several sorts of content available in one plugin, such as text strings, images, and icons, is excellent for your workflow, and I highly encourage you to check it out.

Grab Content Reel here


Chart.

Various examples of different style Charts, with the word 'Chart' above them

I'd used this plugin previously with Sketch and was so happy when it got ported over to Figma.

Line charts, Pie charts, Area charts, you name it, they're here for you to easily select and drop into your project with so much customisation available to you.

With the option to use real or random data from sources such as Excel or Google Sheets to create your charts, you have the strongest, I feel, of all the chart plugins available in the Figma community.

Create beautiful charts with this super-versatile plugin. Highly recommended.

Grab Chart here


Figmotion.

Screenshot of a plugin UI, and the word ‘figmotion’ in white text next to it

Sketch has had good integrations with third-party animation tools like Principle (which I have used many times in the past) for a long time, but Figma? Not so much until recently.

Third-party animation tool integrations are improving as Figma matures, but what about unique animations created within Figma? Well, that’s what Figmotion is trying to change.

Creating intricate animations within Figma saves time, and Figmotion has impressed me greatly with its capabilities.

Grab Figmotion here


Autoflow.

The UI of a User Flow plugin with the words ‘Autoflow makes it easy to draw flows’ in white

Autoflow isn't the first User Flow plugin or service in our toolkits. No it’s not. But I'll tell you right now; it's one of the most impressive.

I've used plugins like Flowkit before and as good as they are and have more features than Autoflow, you still have to manually move items around to link wires and construct flows.

With Autoflow, you select the objects between which you want to build a flow, and this lil' package of plugin delight will magically draw a connectivity line. There is no need to insert and move connecting lines manually.

Go with the flow!

Grab Autoflow here


Mockuuups Studio.

Various examples of phone devices being used, and the words 'Place your frames into 1000+ device mockups without leaving Figma'

Mockuuups Studio is essentially a mockup generator for your Figma designs.

Want to show your mobile app design inside the hand of a random individual holding an iPhone 13 Pro? Not a problem! You can choose your Frame inside Figma, and Mockuuups Studio will take care of the rest.

I've only utilised a few of the scenes, but there are over 1000+ currently available, with varying backgrounds, device types, and so on, so you'll never be stuck for a suitable scene for your product.

Grab Mockuuups Studio here


Iconify.

A selection of screenshots of a plugin UI showing different icon collections

Icons. In the past, and still, I'll use something like IconJar or Nucleo to place icons into my designs when working with other design tools.

I do things a little differently in Figma.

Having something like the Iconify plugin working alongside Figma makes things a lot simpler for your day-to-day workflow when working with icons.

The Iconify icon collection includes over 50,000 icons from well-known sets like Font Awesome, Material Design, and Jam Icons, so you're never short on choice.

Grab Iconify here


Lorem ipsum.

Example of a Plugin's UI, with a block of Lorem Ipsum text to the side of it

Am I a big fan of plain old Lorem ipsum? Not really.

I’m an advocate of using real text whenever possible in your design iterations, but when working with really early concepts or Wireframes, then Lorem can sometimes fill a gap.

With this convenient plugin, you can quickly fill your text layers with regular Lorem ipsum, with just the exact quantity of Lorem needed to fill the frame you’ve chosen.

Simple. Handy. Does a job, and does it well.

Grab Lorem ipsum here


Remove BG.

Various images with their backgrounds removed, and the words 'Remove BG' to the left of them

Background remover tools. Handy to have but (and I’ve tried a lot of them) not always the best of results produced, I’m afraid.

Fortunately, Remove BG came along and made things much better, with results that you could be happy with, not embarrassed by.

Having Remove BG as a Figma plugin makes things even more convenient when working on a project.

Now on their Free plan, the resolution of the images that Remove BG spits out ain’t too great for professional use, so you would need to look at one of their paid plans if you want high-resolution images, but as I said before, it’s, without doubt, the best of its kind out there.

Grab Remove BG here


Feather Icons.

A selection of Icons shown inside a Plugin's UI

I've used the Feather Icons many times before, as it's just such a great, versatile and lightweight icon set that can blend into so many different projects.

Up until now, I'd use something like IconJar to drag and drop those icons mentioned above into my projects.

Not anymore.

Having the Feather Icons plugin installed in Figma saves that little bit of extra time from not having to switch between different tools.

Simple, but just handy to have.

Grab Feather Icons here


Humaaans for Figma.

A selection of human-like illustrations with the word 'humaaans' shown above them

Pablo Stanley. He always brings his A-game to the Figma community. What with Blush, and also Humaaans (yes, it’s 3 ‘A’s).

With this simple but incredibly valuable plugin, you can easily make use of Pablo’s incredible illustration library ‘Humaaans’ in Figma.

This plugin makes it super simple to create your unique work by either using any of the preset illustrations provided or by simply mixing and matching the available illustrations to create something more suited to your project at hand.

Grab Humaaans for Figma here


Hopefully, there's something in this handy collection that can benefit your day, to day workflow significantly.

The community around Figma has grown massively in the past couple of years. It continues to do so, with more time-saving and massively useful plugins introduced daily.

I'm looking forward to seeing what the Figma Plugin community brings in 2022.

By the way, if you want to really save yourself hundreds of design hours, my Design System for Figma; Cabana is now available.
Special Offer: Use the code CABANA35 to receive 35% OFF. 👇

Cabana - Design System for Figma
Cabana is a Design System for Figma that is super-powerful and feature-rich but gives you the creative freedom and flexibility to make it your own.

Thanks for reading the article,
Marc.