Used in this video
Bannerify
バナー
Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.
Try BannerifyGet started today
Video Transcript
Today I'm going to be showing you the new way to install, and also uninstall, Figma plugins based on the latest Figma update that changes the way this works from the way that you're probably used to doing it.
To get started we just go to the Figma Community, and you can get there by just clicking on this little "Community" icon or text at the top, and that's going to bring you to the page that we're looking at now. Then, to find a Figma plugin you can either use the search box if you know what Figma plugin you want to install, or to browse Figma plugins, you can just go to the "Plugins" tab up the top here, click on that and that's going to bring up a list of all the available Figma plugins that you can install into Figma.
Today I'm just going to be using the Bannerify Figma plugin as an example to show you how to install a Figma plugin with this latest 2022 update. knowing that I want to install this Bannerify Figma plugin, all I need to do is click on the Figma plugin, go over to the detail page here and then you just need to click on this new "Try it out" button; this is where the "Install" button used to be, so you used to be able to just click on this button that said "Install" and that would just immediately install it to your Figma account and you could just start using it right away. They've just swapped this out for every Figma plugin, so every Figma plugin you want to install or use is now this "Try it out" button instead.
It's a little bit of a funny wording, but I'll walk you through how it actually works. All you need to do is click on this new "Try it out" button; I'm going to click on that, and that's going to bring up a prompt for you to select the Figma account or the Figma team that you want to install the Figma plugin to. I'm just going to select my account that I'm already logged into, which is where I want it to be installed; I'm going to click on that, and what this does is it actually creates a brand new totally blank Figma file, and it names it what to be the same as whatever the Figma plugin you just clicked is.
It'll create this brand new empty Figma file, so that'll be in your Figma drafts if you want to delete that later if you don't need it, and it automatically opens up this new "Resources" panel, which is located in the top of the Figma toolbar; this resource panel contains links to different Figma plugins and things like that. What you want to do is go down to this little three dot icon which says "More options", so if you hover over it, click on that, and to install the Figma plugin you just have to click on this little "Install" link here; and if we click on that, you'll see it's giving us a notification that it's installed the Bannerify Figma plugin.
Do make sure that you click on that little three dot icon if you want to install the Figma plugin properly. The alternative, as you can see here, is this new default action of "Run"; the "Run" button basically allows you to run the Figma plugin in your file without installing it, but that means it's not going to be there in your installed Figma plugins list the next time you want to use it again. You kind of have to go back and find it each time, which I think is a little bit more inconvenient than just having it installed if you know that you're going to be using on a regular basis.
Once you've already got a Figma plugin installed and you want to also uninstall that later down the track, or right away, you can uninstall it by doing the same thing. To uninstall a Figma plugin that you've already installed, you just need to find it under this "Resources" tab that we're already in, find the Figma plugin that you want to uninstall; it'll bring up this prompt when you click on it, and it'll look exactly the same, just click on that three dot icon again, and click on the "Uninstall" link this time. That's just now uninstalled the Figma plugin, but for now I'm just going to leave that Figma plugin installed. Again, I'm going to install the Figma plugin by clicking on the three dot icon, clicking on "Install", and that will install the Figma plugin for me.
As you can see here it's just a blank Figma file; for this particular Figma plugin it's probably not that useful to run it in a blank Figma file. If you do have another Figma file that you want to actually run the Figma plugin in, all you need to do is close off that new Figma file and delete it if you don't want it, jump back into a Figma file that you do want to run the Figma plugin in, and you'll be able to do that normally from then on. You can basically just right click anywhere, go down to "Plugins", then go down to "Installed Figma plugins", and then you can then go over to your Figma plugin that you just installed. Just click on the Figma plugin and that will load it up as you'd expect.
That's what that looks like there; as I said, it's a little bit of a extra step in order to install the Figma plugin, but once you've got it installed it should be basically installed and accessible the way that you've already been used to running the Figma plugins. If the Figma plugin automatically adds itself to the column on the right hand side, you'll still be able to access it from there as well; that's just another way you can open up the Figma plugins if you do want to do that as well.
As I mentioned, if you do want to access the Figma plugins from this new "Resources" menu, you can go ahead and click on that up here, and that's going to open up a list of all the recently installed or used Figma plugins. You can do that, and you can also change this "Recents" option to "Installed", so you can get a list of the installed Figma plugins that you've actually got installed on your Figma account, and that way it's going to be an easier overview of actually auditing what Figma plugins you've got installed, and giving you a much easier way to then jump into that Figma plugin and once again uninstall it if that's something you'd like to do. To uninstall the Figma plugin, you can just click on that "More options" icon, click on "Uninstall", or if you've already uninstalled it and you want to install it again, you can do the same thing; you just have to click on that icon, and then click on "Install". I'm just going to leave that installed, and we don't have to touch that again.
Okay, so that's basically the new process for how to install and uninstall Figma plugins based on this new mid-year 2022 update of the Figma app. This will work in the browser or in the Figma desktop app, which I'm using at the moment. It's really up to you, but once you do have the Figma plugin installed you'll be able to access that Figma plugin under your installed Figma plugins list regardless of where you login. That'll carry over wherever your Figma accounts being logged into and you don't have to worry about reinstalling the Figma plugins each time. Make sure you do install the Figma plugin if it's something you want to use, because just clicking on the "Run" button each time is going to kind of be a little bit annoying if you know that you actually want to keep that closely accessible in your installed Figma plugins list. That's how to install Figma plugins in 2022, if you're wondering what the new changes were and how to navigate them that's a basic overview of what it looks like.
I'll keep this Figma tutorial pretty short today. I hope that you've learned something if you're wondering how to install Figma plugins in 2022 with this new Figma update; this is currently how it works. It may change again in the future, and if it does I'm happy to record another video to go through it so you can see any other updates that are made at that point; but thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.
Adam Brock
Founder of Hypermatic
The secret weapons used
in high performing teams.
World-class teams of designers, developers and copywriters use our Figma plugins to 1,000x their daily workflows.
TinyImage
タイニー
Export compressed JPG, PNG, SVG, WebP, AVIF, GIF and PDF files from Figma, reducing sizes by up to 95%.
Try TinyImageGet started today
Pitchdeck
ピッチ
Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.
Try PitchdeckGet started today
Convertify
コンバート
Export Figma to Sketch, XD, After Effects or Import XD, Illustrator, Google Docs, PDF to Figma.
Try ConvertifyGet started today
Emailify
メール
Easily create and export responsive, production ready HTML emails (eDMs) from Figma.
Try EmailifyGet started today
CopyDoc
コピー
Everything you need to easily export, import, localize and update text in your Figma designs.
Try CopyDocGet started today
Bannerify
バナー
Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.
Try BannerifyGet started today
Crypto
ロック
Securely share your Figma designs and prototypes as password protected URLs or PDF files.
Try CryptoGet started today
Favvy
ファビー
Export production ready favicons (with code) for your website or PWA from Figma in seconds.
Try FavvyGet started today
Pixelay
ピクセル
Compare and visually QA your Figma designs against real website URLs using smart overlays.
Try PixelayGet started today
HyperCrop
クロッパー
Batch crop/resize multiple images into multiple sizes with presets, smart cropping and face detection.
Try HyperCropGet started today
Commentful
コメントフル
Supercharge your Figma comments and gather external feedback from stakeholders.
Try CommentfulGet started today
Weblify (Beta)
サイト
Inspect your Figma layers as clean HTML, Tailwind, React or Vue code in one click.
Try WeblifyGet started today