Figma plugins were officially launched in August 2019, going public with 40 plugins available to the Figma community. Since then, hundreds of Figma plugins have been published to help automate and streamline your workflows. Here are a few useful things to know about Figma plugins if you’re coming in as a beginner, or if you just want to refresh your memory.
How Figma plugins work
Before we get into how to install Figma plugins and use them in your designs, there are a few basic (but often missed) principles about how Figma plugins work. It’s worth covering those first, in case you have any of these questions while you’re getting started.
Who can use Figma plugins?
If you already have a Figma account, you can install Figma plugins via the browser or the Figma desktop app. If you don’t already have a Figma account, you can sign up for free via the Figma website.
Edit access is required to run Figma plugins
While anyone can install a Figma plugin, it’s worth noting that you can only run Figma plugins in a file that you have Edit access to. If you’re inside a Figma file that you only have View access to, you won’t be able to run any plugins inside that file. The reason for this is that using Figma plugins very often leads to modifying the contents inside of the design, so it makes sense that you can’t do this until you’ve been given Edit access.
”Why can’t I install this Figma plugin?”
Sometimes we’ll get asked a variation on the question: “Why can’t I install Figma plugins?” The most common reason for not being able to install a Figma plugin is due to being a member of a Figma Organization; sometimes there are restrictions setup by the organization that may only allow you install Figma plugins from an approved list. If this is the case, and you really want to try out a restricted Figma plugin, you should reach out to the person in your company that manages the Figma Organization permissions.
You can only run one Figma plugin at a time inside a document
Unlike some other software you may be used to, plugins in Figma are not designed to run in the background, or be used over long lengths of time. Typically, a Figma plugin will be built around an idea of automating, enhancing or augmenting a single task or series of tasks that either would simply not be possible without a Figma plugin (eg. the Bannerify Figma plugin), or would usually be done manually through a series of painful, manual extra steps (eg. the HyperCrop Figma plugin).
As mentioned previously, Figma plugins can be run in any Figma document that you have Edit access to; with a key point being that you must be inside the editor itself to run a Figma plugin. For example, you can’t run a Figma plugin from your Figma drafts page, or search page.
How Figma plugins are built
The great thing about Figma plugins is that everyone has access to build and publish their own plugins in the vibrant Figma Community ecosystem.
What are Figma plugins written in?
As Figma itself is built on web technologies (which is awesome), the plugin ecosystem for Figma is also run entirely on web technologies. This means that under the hood, every Figma plugin is comprised of HTML, CSS and Javascript.
As the plugins announcement post from Figma put perfectly:
We wanted our plugins to be secure, stable, and performant, of course. But we also wanted Figma plugin programming to feel like web programming. Our internal motto is: “If you can code a webpage with basic HTML and JavaScript, you can build a Figma plugin.”
This is a really neat innovation in the world of design tools, as it lowers the barrier of entry for aspiring Figma plugin developers who are already familiar with writing HTML, CSS and Javascript.
Of course, while there are varying levels of plugin scope and complexity, every Figma plugin developer has access to the same APIs and technologies at their disposal to turn their Figma plugins ideas into reality.
Using private Figma plugins internally at your company
If you have a very specific automation task at your company that you could solve by building a Figma plugin, but you don’t necessarily want to make it public, or know that it wouldn’t be useful in a broad context, you can use Figma plugins privately amongst your own team without needing to publish it in public to the rest of the world.
This can be done even without having a Figma Organization plan, simply by zipping up your plugin development build folder and sharing it with members on your team. They can manually install your plugin by navigating to their Figma user page, clicking the Plugins tab, and then clicking the Create new plugin button. After the Create a plugin modal loads, you can click the Click to choose a manifest.json file box to browse for the “manifest.json” file that was included in the Figma plugin zip file to install it locally.
How to find Figma plugins in Figma Community
The Figma Community is a place where Figma users can publish their Figma files and Figma plugins for other Figma users to duplicate and install. Once you’re in the Figma community, you’ll be able to browse, search and filter all of the available Figma plugins to install.
Navigating to the Figma Community
If you navigate to your Figma file browser page, then click on the Community page in the left sidebar, you’ll be taken to the Community section of Figma. If you click on the Plugins tab (the tab defaults to Files), you’ll be able to see a list of all the Figma plugins available to install.
Find Figma plugins using a search keyword
If you know the name of the plugin you’re looking for (eg. “pitchdeck” would find the Pitchdeck Figma plugin), or just want to search for a keyword (eg. “sketch” would find the Convertify Figma plugin), you can use the search field at the top of the Community page to search for a keyword. After the results are shown, you’ll need to click on the Plugins tab to only show the Figma plugin results (by default it will show Figma files).
Finding top Figma plugins by install count
On the Figma community page, you can click the Explore button near the top of the page, and then click on the Plugins tab, which will display a list of all the Figma plugins available to install.
If you click on the Installs text at the top of the list, this will sort the Figma plugins by the highest number of installs to the lowest number of installs per Figma plugin. Clicking on Installs again will flip the order to the least amount of installs to greatest amount of installs per plugin.
Following plugin creators to discover Figma plugins
You can also discover Figma plugins by following creators in the Figma Community that you think is cool. You can click on the Explore Creators button on the Figma Community home page to show a list of trending creators.
You can also visit a creators page directly if they share their Figma handle anywhere online; for example, you can follow Hyperamtic by checking out @hypermatic on the Figma Community and keep an eye on all of the new Figma plugins that we publish.
Finding recently updated Figma plugins
On the Figma community page, you can click the Explore button near the top of the page, and then click on the Plugins tab, which will display a list of all the Figma plugins available to install.
If you click on the Last Updated text at the top of the list, this will sort the Figma plugins by how recently the plugin creator has updated them. Clicking on Last Updated again will flip the order to show the plugins that have not been updated recently.
Finding Figma plugins from website links
Because the Figma and the Figma Community is built on the web, you can find URLs pointing to many Figma plugins in blog posts, lists, YouTube videos or online discussion forums. For example, linking to the CopyDoc Figma plugin here will allow you to land directly on the plugin installation page in Figma by clicking on it.
How to install Figma plugins
Once you’ve found the that you want to install, you can either install it from the Figma plugins list, by clicking the Install button on the right hand side.
You can also do this directly from a Figma plugin detail page (eg. the Favvy Figma plugin detail page) and clicking on the Install button in the top right.
Once the button text changes to say Installed, you’ll be able to switch back into your designs and use the Figma plugin straight away.
How to uninstall Figma plugins
If you decide to uninstall a Figma plugin, The other method to uninstall a Figma plugin involves returning to the plugin page (or the Figma plugins list) and clicking on the Uninstall button there. Once the button text reverts back to Install, your Figma plugin has been successfully uninstalled.
How to run Figma plugins
After you’ve installed your Figma plugin, you can switch back to a Figma file that you have edit access to. If you right-click anywhere in your Figma design editor canvas, hover your mouse over Plugins, then find the name of the Figma you just installed and left-click on that once, this will run Figma plugin.
How to easily re-run Figma plugins
To re-run the last Figma plugin you ran, you can use the keyboard combo of “Option + Command + P” on Mac, or “Ctrl + Alt + P on Windows. This will automatically run the last Figma plugin without needing to use your mouse to navigate through the plugin menu again.
Some plugins also contain a feature which allows them to be re-run directly from the right hand side column in Figma. This functionality depends entirely on if a plugin creator has decided to include it, and how to include it.
For example, in the TinyImage, if you use the Figma plugin to export compressed images for a certain Figma layer, after you close the plugin, you’ll be able to click on that layer and see a new clickable “TinyImage” menu item under the Plugins subheading in the right hand side column in Figma, which will re-run the plugin and allow you to easily re-compress that image again.
Some plugins will also allow you to re-run the plugin from the right-hand Figam column button without having any layers selected at all. For example, the Crypto and Pixelay Figma plugins will show up as a button after the plugin has been run at least once on the current Figma page, allowing you to quickly re-run the Figma plugin at any time on that page.
Start using Figma plugins to automate your design workflows today!
Those are most of the useful basics to help with understanding Figma plugins for beginners, and hopefully it shows that anyone can create, install and use Figma plugins to help automate workflows for themselves, their team or their company. Once you’ve discovered the power of using Figma plugins, you’ll leap from beginner to superhuman in no time at all.
Pro Bundle