Figma plugins are a recent addition to what’s becoming the go-to collaborative tool for UI designers everywhere. Plugins are built by the community (you can even build one yourself if you wish) and provide an easy way to extend your capabilities with Figma. Through this helpful update, designers can automate repetitive tasks, add accessibility features, and add helpful content into mockups.

“Figma plugins make it easy to advocate for myself and others by giving me the ability to create the design tools we need, rather than crossing our fingers and hoping someone else will make them for us.” – Tiffany Chen, UX Designer at Microsoft

Figma plugins

Top Figma Plugins

Here are some of the best Figma plugins which I recommend you check out, along with information on how to get started using them.

1. Unsplash

Insert beautiful images from Unsplash straight into your designs.

With Unsplash for Figma, you can insert a random image, from a given category, or search for something specific.

Unsplash plugin for Figma

2. Content Reel

Content Reel helps you pull text strings, avatars, and icons into your designs easily. First, select one or more layers in your design file, then choose from avatar images, icons, names, companies, phone numbers, numbers, date & time details and more, to replace standard dummy content.

Content Reel plugin for Figma

3. Image Palette

This is a perfect way of developing a solid color palette across your UI design. Image Palette extracts a color palette of five different colors from the selected images in Figma.

Image Palette for Figma

4. Super Tidy

Alignment is really important in design. Or rather, misalignment is absolutely something to be avoided! Super Tidy is a Figma plugin to easily align, rename, and reorder your frames based in their canvas position.

Super Tidy also renames your frames and reorders them in the layers list by their position in the canvas.

Super Tidy for FIgma

5. Figma Chat

Collaboration is definitely the name of the game with design applications nowadays. With Figma Chat you can interact inside your files with other people by sending texts and sharing actual frames or other elements.

Figma plugin Figma Chat

6. Able

Add considerations for color contrast and visual impairment to your workflow by automatically comparing the contrast between two selected layers.

Able  Friction free accessibility for Figma

Learn more about how to design for visually impaired users with this tutorial by Graeme Fulton:

  • With 4.5% of the global population experiencing color blindness, 4% suffering from low vision, and another 0.6% being blind, visual difficulties with using…

How to Install and Use a Figma Plugin

Let’s use the first in our list; the Unsplash plugin. It’s dead easy.

Begin by signing in at figma.com (create an account if you haven’t already). Then from the main downloads page, find the plugin you want to download. Hit Install to the right of the list.

install figma plugin

Open a design file or start a new one. Create an object to act as a placeholder on the canvas, then with it selected go to Menu > Plugins > Unsplash.

select unsplash placeholder

From the Unsplash panel which appears you can insert a random image, search for a specific image, or choose an image from a category:

unsplash select

The image is then applied to your object as a second fill:

elephant fill

That’s just one example of the many Figma plugins which are already available for free. They all work in a similar way; login, install, and you’ll find your plugin ready for use under the plugins menu.


I hope this sparks ideas for plugins you can try out today or even inspires you to create your own plugins. You can learn more about recent plugins and how to create your own from the links below.

Figma Plugin Resources

Learn More About Designing with Figma


Thomas Lowry

Thomas Lowry, Designer Advocate at Figma

Failing to thoroughly address accessibility in your design means a large demographic of users may be excluded from being able to use your product. Just specifying the right colors so that text has enough contrast, or providing a way for users to navigate your site with a keyboard can make all the difference in enabling them to use your product too. WCAG (Web Content AccessibilityGuidelines) publishes and maintains standards for creating accessible on-screen experiences and is a great resource to learn more. To meet these needs while working in Figma, there is a growing collection of accessibility-focused plugins to help you tackle these challenges in your own designs. In this weeks plugin-round up, we’ll take a closer look at some helpful plugins to help you make your designs better for everyone.

Let’s start with color contrast. An important part of choosing the right color parings between text and the surfaces/backgrounds they reside on, is ensuring there is enough contrast so that the text is legible and readable by users with varying levels of vision. These plugins will help you identify if particular color combinations meet WCAG AA or AAA standards. Each of these has their own unique features and user-interface, so feel free try them both to see which one works best for you.


Creator: Sondre Kvam

Able is plugin designed to check color contrast—it will analyze the color of any two objects that you have selected. One feature that I like most about this plugin is that it updates as you change your selection. The plugin also takes your colors and gives you a text/background preview and an option that enables you to simulate what those colors will look like through the lens of different types of color blindnesses. And, you can swap the colors between the text and background color. As a bonus, in the menu to select a type of color blindness to simulate, you’ll see a data point by each that indicates what percentage of the population is affected by each type of color deficiency.

Contrast Checker

Creator: Stark

If you’re coming from Sketch, you may already recognize this one. Stark displays the contrast ratio for any two objects that you select. It also gives you a contextual preview depending on whether or not one of your layers is a text layer or not. The plugin also displays a breakdown of your selected colors at both AA/AA and AAA/AAA ratings to show different levels of contrast ratios and a rating for if the font size used is over 18pts.

Color Blind

Creator: Sam Mason de Caires, UX Engineer at Cloudflare

Color Blind is a plugin designed to help you understand how your colors will look from the perspective of different types of color blindness. One of the unique things about this plugin is that it doesn’t just give you a preview of the colors you have chosen, but actually generates visuals on canvas based on whatever elements you have selected. The plugin will create duplicates of your design and change the colors to reflect each type of vision in an appropriately named group.

Focus Orderer

Creator: Tiffany Chen, UX designer at Microsoft

Shifting gears from colors, let’s move on to Focus Orderer. Focus Ordered lets designers annotate their designs to indicate where and what order the browser should change the focus to. With this plugin, you can select an element and use the plugin to create a focal point. If you need to change the order of the focus, you can do it all in the plugin UI by dragging to change their order and Focus Orderer will take care of renumbering them all on canvas. You can also use the plugin to test and tab through all the elements as well. This is a great way to treat accessibility as a first-class citizen during your design to implementation process.

We hope that these accessibility plugins find a place in your Figma workflow. Stay tuned next week for another round up of useful plugins, and if you missed last weeks, be sure to check out our post on 5 helpful utility plugins.

P.S: If you’re thinking of developing your own plugin, be sure to check out our Plugin API documentation to learn how to get started. There is also an online Slack community of plugin developers to connect with, too! If developing your own plugin feels intimidating, remember you can launch the console in Figma and try a few commands to get a feel for how it works. If you’ve ever used Javascript to interact with the DOM on a website, interacting with the Figma canvas works almost the same.


Helping teams can build a faster workflow

Deep Joshi (Product Designer)

When I saw the Figma Plugin launch event, I completely feel grateful for the Figma design team and Figma growing insanely great as an amazing collaborative platform for the designers so after that I stared explore the plugin area and I built my own list of plugins and these plugins made my design workflow faster and better. I just love that and I wanted to share with you so you can make your workflow faster and design better interface and experience.

  1. Autoflow

Autoflow makes it easy to draw flows. Simply select 2 objects, hit a hotkey, and a line will be magically drawn between them.

To use 1. Select 2 objects 2. Right-click, find Autoflow in Plugin menu 3. Wire up all your screens by hitting ⌥⌘P to run the last plugin

2.Able — Friction-free accessibility

We made Able to help designers add accessibility to their workflow with as little effort as possible. Open the plugin and Able will automatically compare the contrast between the two layers you select. This way, you can keep Able open, and casually select layers to compare without re-running or updating the plugin!

3. Remove BG

Remove the background of images automatically with just a single click — using the remove.bg API. Note: You will need a remove.bg account for this plugin.


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.


isometric allows you to create isometric layers without manually having to set them up. How to Use Isometric: 1. Choose Your Layer 2. Right Click > Isometric 3. Select Your Perspective This project is open source and MIT licensed.

6. Content Reel

Need content for your layouts? Content Reel helps you easily pull text strings, avatars and icons into your designs. First, select one or more layers in your design file, then choose from the Content Reel palette to apply.

7.Rename It

Keep your Figma files organized, batch rename layers and frames.

7.Color Palettes

Find the best color palette from the huge list of best color palettes Fill beautiful color from “Color Palettes plugin” straight into your design. With Color Palettes for Figma, you can search for your favorite color code, palette number or name that you remember from Color Palettes plugin and apply it on your design and make it awesome

8.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’ll be assigned to a new copy of their original master component. You can also just make a clone of a component.


Insert beautiful images from Unsplash straight into your designs. With Unsplash for Figma, you can insert a random image or search for something specific. The Unsplash License allows images to be used freely for both commercial and personal projects.

10.Brands Colors

Find the best color from the world’s best brands and cool apps Fill beautiful colors from “Brands Colors plugin” straight into your design. With Brands Colors for Figma, you can search for your favorite brand’s colors or app’s colors and apply it on your design and make it awesome


Create a bar chart, scatter plot, or line chart easily with your own data! Or use a random set of data to quickly create shapes or dummy data (for example, sparklines for a dashboard mockup). When you upload your own data (CSV or JSON file), we’ll grab any numeric keys and allow you to choose one for each relevant dimensions.

12. Icon Resizer

Resize icons into a standard size and bounding box on your design. It’s much easier to work when all your icons are the same size and have a square bounding box. Select one or more frames, and set the icon and bounding box size. That’s it!

13. Image Palette

Extracts a color palette of 5 different colors from the selected images. Note: This uses a median cut algorithm, which roughly approximates the most prominent different colors in the image. The algorithm is fast but can sometimes lead to unusual results, such as with low-color images, images of vector graphics, and so on. The extracted colors may not exactly match the hex codes in the image.

14. Viewports

Make sure that your mobile designs are covering a reasonable share of the market! Select one or more frames and Viewports will let you change their sizes to your preferred device. Simple! Currently supported: Apple iPhones Google devices Next up: Samsung devices Desktop devices

15. Interplay

Interplay connects with your design system code repository to let you access and use your design system code components right within Figma. From the plugin, you can browse code components, edit properties, change content, and drag the configured component onto the Figma canvas. Interplay generates a Figma component on the fly and keeps it connected with the related code component so that your design is always in sync with your production code.

This was my list for now. I am so excited about new cool plugins! Hope you guys find useful ?