July 19, 2020 by Jason Gilmour
We all know that design isn’t about the tools we use, it’s about the things we create.
Our tools don’t necessarily make our designs better — but they can help us create more, faster. In this article, I’m going to share my favorite Figma plugins that help me work quicker and communicate ideas better.
If you’re a seasoned professional using Figma day in and day out, you probably have your own list of plugins that you find as useful as I find these. Please, feel free to share them with me on Twitter. If you’re new to Figma, and looking to kick start with your workflow, I’d encourage you to try some of these out.
For those new to Figma, and perhaps to the world of digital design, Figma plugins are tools that integrate with Figma and extend the core functionality of the application.
They range from very simple and focused plugins that check spelling or resize buttons, to plugins that let you work with motion graphic design or assist with developer handover and prototyping.
So, these plugins can dramatically increase the speed we can do work in Figma, and automate away some tasks that would be extremely time consuming otherwise.
Installing plugins in Figma is extremely easy.
First, navigate to the Community tab in the left hand menu of the Figma app home screen.
Then select the plugins tab to explore or search for a plugin.
From there, it’s as simple as clicking on the ‘Install’ button.
After that, plugins are installed immediately and are available to use in all your design files.
Plugins can be accessed in a few different ways from your design files.
1. From the top left hamburger menu
2. Right click context menu
3. Cmd + /, then search for the name of a plugin
4. Cmd + Option + P to re-run your last plugin
Personally, I find the keyboard shortcut is the easiest way to find and use plugins, but all the options above work just fine.
After opening a plugin, it’s interface will appear as a modal. Figma has taken the decision to not allow plugins to change anything in the toolbar to prevent the interface getting too cluttered.
Let’s try this out with the plugin I use the most.
Unsplash is a completely free service that’s great for filling your designs with beautiful, royalty free images from an extremely generous community of photographers and creators.
It’s great for filling up designs that rely on a lot of User Generated Content, as adding in a variety of photos really does help add life to UI designs. The plugin can also be great for finding the perfect stock photo for hero units, landing pages and much more.
Using Unsplash:
The plugin works by applying a Fill to your shapes in Figma, so all you have to do is select the shape you want to fill and the image to fill it with.
1. Select a shape or multiple shapes in Figma
2. Open the Unsplash plugin
3. You can choose to use a random image from a category, or search for a specific image
4. If you choose a random image from a category, Unsplash will fill all the shapes you have selected with different images.
5. If you search for an image, Unsplash will fill all the selected shapes with the selected image.
Content Reel was created by the design team at Microsoft and is great for adding realistic text content to your designs. You can add Names, Dates, Addresses, Icons, and more.
Combined with Unsplash, filling up UI designs with decent content is a breeze.
Using Content Reel
Similar to Unsplash, you select the object you want to fill (usually a text box) and select the type of content you want to use.
This is especially useful when filling up table designs with data, as it’s possible to select multiple text fields and immediately fill a table column with email addresses.
There’s also a library of user avatars and icons included in the plugin that can be used in your designs too.
PS: Looking for free Figma templates to kickstart your design projects? Check 'em out here!
Figmotion is a surprisingly powerful plugin for quickly adding animation to your designs.
It’s great for anything from creating simple loading spinners to prototyping complex UI animations.
Also, its familiar keyframe and timeline interface means it’s easy to pick up for anyone that’s used other animation tools, and conveniently can be used right inside Figma.
Using Figmotion:
This plugin works by first selecting a frame to animate, then allowing you to animate the layers inside the frame.
1. Start the plugin, and select the frame to be animated from the dropdown menu.
2. In this example, we want to make the loading spinner rotate. We select the ellipse layer in the plugin UI, and add a keyframe by clicking the diamond shape next to “rotation”.
3. We can add the next keyframe by dragging the playhead to the desired spot on the timeline, then clicking the diamond keyframe button again.
4. Next, we can set the values for the start and end of the animation. I’ll use -180º as the start, 180º as the end value and the default linear transition. This will make the ellipse rotate clockwise and the linear transition means that the animation can loop without the speed of rotation changing.
5. From there, I can hit the “Export” or “Render” button to share the finished animation or use it in a project.
That’s a very quick example of how to get started with Figmotion, but it’s way more powerful than that. Figmotion allows you to animate multiple properties on multiple layers, with custom easing functions and timing so it’s great for all kinds of animation.
Spellchecker is one of those plugins that I’m surprised Figma hasn’t implemented themselves, it simply adds a key feature that is still missing: spellcheck!
Fortunately, Spellchecker is very easy to use. Select the text object you want to check, and run the plugin. You’ll be presented with the plugin interface and able to replace misspelled words from the plugin.
Accessibility is vital to any good UI design, and Contrast is a great plugin for checking your design against Web Content Accessibility Guidelines (WCAG). There are a few similar plugins and tools for this, but I personally find Contrast fits in best with my workflow.
There are two ways to use Contrast, the first being to check a specific object, and the other is to scan an entire document with the plugin to check for text that fails the accessibility guidelines.
To check a layer, it’s as simple as running the plugin and selecting an object. The plugin will tell you what contrast guidelines pass or fail.
To scan your entire document, simply select the “Scan” tab and run the scan. You’ll be presented with a list of all the contrast warnings in your document after a few moments.
In conclusion, this list covers just a few of the great Figma plugins that are out there, but it’s some of the most useful in my day to day life at the moment. Button Resizer and Google Sheets Sync are also excellent for speeding up my workflow so deserve honourable mentions, and there are many more that I haven’t had a chance to try out yet.
Post last updated: January 10, 2021