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
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.
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.
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.
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.
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.
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.
Add considerations for color contrast and visual impairment to your workflow by automatically comparing the contrast between two selected layers.
Learn more about how to design for visually impaired users with this tutorial by Graeme Fulton:
How to Install and Use a Figma Plugin
Let’s use the first in our list; the Unsplash plugin. It’s dead easy.
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.
From the Unsplash panel which appears you can insert a random image, search for a specific image, or choose an image from a category:
The image is then applied to your object as a second 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.
To learn more, check out our comprehensive (and free!) Figma tutorial, which takes you through everything you need to know about Figma from a beginner's perspective.
Figma Plugin Resources
Learn More About Designing with Figma
- Web Typography Basics in FigmaKezz Bracey20 Aug 2019
- Quick Tip: How to Use Adobe Illustrator Files in FigmaKezz Bracey16 Jan 2019
- Best-Selling UX and UI Kits for Sketch, Photoshop, Illustrator, XD, and FigmaIan Yates09 Nov 2018
- Which of Figma’s Pricing Tiers is Right for You?Kezz Bracey25 Feb 2019