This article was published 3 years ago, therefore the contents of this post may be out of date.

Figma has been a blessing for designers. But, if you are new to Figma. Let start by saying that Figma is a web-based app however there’s are some desktop apps you can also use. But this app is used for graphics editing and User Interface (UI) design.

First of all, it serves us with some amazing Figma plugins to use. And everyone in the community can create a plugin. These Figma plugins are surely here to make your design workflow quicker. While also they are here to help you build designs with outstanding UI and amazing experiences.

Absolutely, Figma is the most popular design app choice for designers. Most significantly, one thing that makes Figma plugins stand out. Is their ease of use. These plugins help you make effective designs, and your productivity is faster than before.

Plus, most of the Figma plugins in this post and the community are available for free. All you’ll have to do is install the plugin. Here, take a look at some of the best Figma plugins you must try in 2022.

1. Batch Styler

Batch Styler

Do you want to change the values ​​of multiple styles (text, colour) at the same time, but don’t want to go through the process of changing each text style separately? The

Batch Styler lets you do just that! It’s possible to change from Inter to Roboto regardless of 2 or 30 text styles. But keep all font weights and different styles!

Changing colours based on the same tint value is also easy. The batch styler updates all styles accordingly.

2. Content Reel

Content Reel

Content Reel was created by Microsoft and Eugene Gavriloff and allows you to design layouts more efficiently by pulling text strings, images, and icons from one palette. It makes collaboration easier by letting you create your own text and image content with the option to browse or search content to find published collections of text strings, images, and icons.

3. Figmotion

Figmotion

Figmotion is an animation tool built right in Figma. This makes the entry into animation easier and more convenient as there is no need to switch to a completely separate motion tool such as Principle, Haiku or After Effects. Figmotion makes the animation hand-off to developers more manageable as well as it is built with web technologies in mind.

4. Blush

Blush

Blush allows you to create and customise illustrations right in your Figma designs. It’s simple to use. All you have to do is pick a collection, them select the composition and drag it to the canvas.

You can customise it with the variations that come with the illustration to discover what’s perfect for your brand. Or simply use the random button to shuffle various components into a composition. It allows you to access brilliant illustrations created by artists from around the world.

5. Palette

Palette

With the Palette plugin it creates the perfect colour palette. The plugin powered by Colormind. It uses AI and machine learning to create your colour palettes based on your design. It automatically detects the shapes you’ve used in your design and uses their fill colour but up to a maximum of five. Or uses an image file to generate a new colour palette.

All palettes are generated automatically. And are very flexible. You can lock specific colour while generating new ones or re-arrange the order of the colour. So, once you’ve find a palette you like, just click the checkmark. Then the plugin will automatically adds shapes filled with the colour to the page.

6. RemoveBG

Remove Bg

RemoveBG is one of the best Figma plugins of all time. You as a designer had to remove a background from an image. So, with the RemoveBG Figma plugin, you can automatically remove backgrounds without leaving the Figma workspace.

It’s uses remove.bg API to remove the backgrounds from pictures. To use this plugin you will need to have a remove.bg account.

7. uiGradients

Uigradients

uiGradients helps you add gradients to any frames, text, and groups you have all in a single click. All you’ll have to do is select the element you want to apply a gradient to, then and run the plugin. There are well-over 350 gradients to choose from.

8. Mockuuups Studio

Mockuuups Studio

This plugin is a super easy mockup generator that has well over 1300 various scenes. The plugin is packed with everything. You need to create product mockups, outstanding marketing materials, and visual content for social media or blog posts.

As it’s a super easy plugin to use, just select a frame, and Mockuuups Studio takes care of the rest. It automatically inserts & scales the selected frame into hundreds of previews. Once you’ve found your favourite and export the mockup as a file or place it back into the document.

9. CSSGen

Cssgen

Another Figma plugin by Microsoft but with Ori Ziv this time. It’s a plugin where you generate Sass or Less code from your local Figma styles. CSSGen reads all used styles in a Figma document. And lets you export them into Sass or Less.

10. Assistant

Assistant By Grida

A plugin that generate usable and readable code for production instantly. The Assistant plugin gives instant feedback on your design with working code. It shows you an executable and responsive preview. This plugin is an open-source project.

11. Chart

Chart

The Chart plugin for Figma uses real or random data to create the charts. It supports copy-paste from editors like Excel, Numbers, Google Sheets. Including live connection with Google Sheets and remote JSON (REST API), local CSV and JSON files

12. Design System Organiser

Design System Organizer

Bulk swap instances and styles between masters with the same name. Copy styles between files. Manage paths like “toolbar/nav/back” using folder-like interface.

13. Contrast

Contrast

The Contrast plugin makes it easy to check the contrast ratios of colours as you work. Just select a layer. Then this plugin will immediately look for the colour directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG).

But, if Contrast cannot find the background colour, add another layer to your selection, and Contrast will compare them both.

14. Photos

Photos

Photos is a figma plugin that lets you search and insert photos into your Figma files from either Unsplash, Google, Flickr, Pixabay, Pexels, Giphy, and lastly Tenor. The Photos plugin lets you find GIFs for your design project with a simple process.

You can also select multiple photos at once and place them on the page or insert them in layers. It’s supported in both Figma and FigJam.

15. Typescale

Typescale

A Figma plugin that quickly generate a modular scale for your typography. Within a couple of clicks you can transform a single line of text into a harmonious typographic scale. It’s based on your choice of ratio.

16. Supa – Figma to Video

Figma To Video

Figma To Video allows you to turn your Figma designs into animated videos. The plugin is powered by SUPA video editor that helps to fine-tune the animations and the order in which elements appear.

17. ItemFlow

Itemflow

With ItemFlow you can experience improvements with your Wireframing, storyboarding and brainstorming sessions. It helps you connect items on a screen while optimising your workflow speed and performance.

18. Writer for Figma

Writer For Figma

The Writer for Figma plugin is here to help you create error-free content in your beautiful designs. The plugin uses AI to check for spelling, grammar, readability, and punctuation errors. But, also it has stats like reading time, word count, and sentence length.

With this Figma plugin. You can ensure that your content is clear, consistent, and error-free. However to use this plugin you will need to have a Writer subscription to sign in.

19. UI Faces

Ui Faces

UI Faces, aggregates thousands of avatars which you can carefully filter. To create your perfect personas. Or just generate random avatars. The avatars are aggregated from various sources and inside this plugin you can filter by age, gender, emotion, etc.

20. Bootstrap Icons

Bootstrap Icons

With Bootstrap Icons. You can add icons from the Bootstrap icon library directly as SVG in your Figma projects. It features a list of over 1400 icons and it’s open-sourced. So you can download, use, and extend it for free.

Share

20 Best Figma Plugins to improve your Workflow