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

Becoming one of the handiest apps for UI and UX designers, Figma. The ability to use the app straight on a browser without any platform or hardware limitations unquestionably made this SaaS app definitely one of the best design tools available now.

Comparable to Sketch, Figma additionally has a wide collection of third-party plugins. Using these plugins, you can increase the features of the app to supercharge your design workflow. Which definitely help get work done more easily.

There are more than 500 various plugins available on the official plugins library. So in today’s post, we’ll take a look at some amazing and most useful plugins. That you can use to build up your own workflows and design systems. All of these Figma plugins are free to install and use.

1. Color Palettes

Color Palettes

With Color Palettes for Figma. You can search for your favourite colour code, palette number or name that you remember from Color Palettes plugin. And then apply it on your design and making it more awesome.

2. Product Planner

Product Planner

Product Planner makes the process more comfortable. Get started with product planning, product insights, identifying risks, setting goals and identifying and solving problems. Use the pre-built template relevant to your tasks.

3. Blobs

Blobs

With this plugin you can create organic blob shapes with a click of a button. Each and every shape that been generated are unique to the last one. You can control how unique a shape is along with how many points it has. Shapes are created using SVG.

4. Time Machine

Time Machine

Time Machine saves and organises the work that you want to look back on. You will no longer need to manually copy a version of what you were working on to a new page to reference for later. Any time you want to save a version, just make a selection and activate Time Machine.

5. Wireframe

Wireframe

This wireframe plugin is the best plugin for creating beautiful wireframes, user flow, prototypes and basic structures, so no other kits, files or skills are required! It’s just drag and drop to add it on Figma, all the Wireframe can be used freely.

All files are SVG hence they are easily editable and the user can manage easily all wireframing and prototyping activities as per his/her needs

6. Artboard Studio Mockups

Artboard Studio Mockups

Create mockups in Figma easily by getting access to thousands of world-class quality Artboard Studio mock-up items right inside your Figma files. Easily render Figma frames into real-life product mock-ups with a click of a button.

7. Find and Replace

Find And Replace

Search for texts on your page and replace them just like a text editor. You can search for objects on your page by either text content or layer name. Click on the … button next to each section to display more settings.

8. Contrast

Contrast

Contrast makes it easy to check the contrast ratios of colours as you work.

Select a layer and Contrast 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).

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

9. 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. You can filter by age, gender, emotion, etc.

10. Figma Chat

Figma Chat

This plugin helps you to interact inside your files with other peoples. It’s a simple chat with the ability to send text and the current selections of frames or other elements. Just select the elements you want to send to other people and tick the checkbox.

11. Font Scale

Font Scale

Font Scale is a tool to generate a harmonious and consistent typography hierarchy. This is useful when you want to keep the proportions between your body text and headings the same, whether its on screen or paper.

12. Similayer

Similayer

This plugin takes Figma’s in-built ‘Select all with…’ command to the next level. Select similar layers based on a whole range of properties. After selecting a layer. Run this plugin to select all other layers based on specific properties and you can select multiple!

13. Spellchecker

Spellchecker

Spellchecker uses the Yandex API.Speller helps to find and correct spelling errors in Russian, Ukrainian or English text. Language speller models include hundreds of millions of words and phrases. The plugin checks the selected text layer for spelling errors and offers to correct them.

14. Figma Measure

Figma Measure

A plugin for easy measurement of sizes. The simple user interface allows you to add easily redlines for heights and widths, fill spaces, measure distances between elements and more.

15. Automatic Style Guides

Automatic Style Guides

Preparing formal style guide documentation from your local styles (and keeping it updated!) has always felt like double entry to me. But thanks to the Figma API you can now prepare a presentable style guide for clients & developers with a click of a button.

16. 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.

17. Breakpoints

Preview responsive layout inside a Figma frame and share animation prototype with a team. Works even without the opened plugin window and anyone in your team can resize frame without the installed plugin. For the rest, you can share an animation prototype.

18. Mapsicle

Mapsicle

Never take a screenshot of a map again! With Mapsicle, you can quickly and seamlessly place maps in your mockups. An interactive map lets you pan to the perfect location, or you can search for a place anywhere in the world. Once you’ve placed a map in your designs, head back into Mapsicle to adjust the location, style, zoom level and more. Mapsicle uses Mapbox maps to give you a variety of customization options.

19. Blush

Blush

Create and customise illustrations in your designs with Blush. Just choose a collection, pick a composition, and place it on the canvas. You can keep playing with the variations in the illustration to create something unique that fits your brand.

20. Component Cloner

Component Cloner

Ever wanted to iterate upon an idea made with components without messing with existing ones and copy variations between its instances.

With component cloner, you can select component instances you want to copy and they will be assigned to a new copy of their original master component.

Share

20 Best Figma Plugins for UI & UX Designers