Integrating Figma plugins into your workflow can enhance your entire design process. In this tutorial I’ll show you how to easily install and use different kinds of Figma plugins. 

How to Install and Use Figma Plugins

With Figma plugins you can generate content placeholders, device mockups, isometric illustrations or animations for interactive prototypes, just to name a few. 

Here’s a quick guide on how to install and work with some of the best Figma plugins online. 

Step 1: Install Your Figma Mockup Plugin

Head over to Figma plugins and chose the one you’d like to try out. For this mini tutorial we’ll be using Artboard Studio Mockups. Click on the Try it out button.

This will take you to Figma where you’ll click on the Run button. A pop up window will open which takes us to our next step.

Step 2: Generate API Key

To install this Figma plugin, you’ll need to create an account with Artboard Studio. Click on the secret API link to generate one and install this plugin. 

This will direct you to your Artboard Studio account. Go to the left sidebar menu and click on Integrations. Then click on the Generate API Key button. 

Copy the code, go back to Figma, and paste it into the field. Click on Save and continue and this will activate your plugin. If this API key doesn’t work, you can go back to Artboard Studio and generate as many as you need. 

You’ll find the library of available items ready for you to use. There’s the option to go premium and pay to unlock all the library. But you can also filter your search to only see items available for free. 

You can filter the type of items you’d like to see: print, electronics, packaging, etc. Also choose filter if you’re looking for a Front View or a Top View. 

Step 3: Let’s Test It Out! 

So let’s see how this Figma plugin actually works. I’ll use this Travel Mobile App in Figma from Envato Elements. Start by opening your Figma file.

Now, we’ll create an iPhone mockup with our recently installed Artboard plugin. Go to the top tool bar and click on the Resources button and then on the Artboard icon. 

Choose the mockup that you like and click on the thumbnail. This will import the item to your canvas. You’ll get two frames: one with the mockup image and an empty one for you to paste your design. 

To see your design adjusted to the mockup, you’ll need to right click on your design and select Plugins / Artboard Studio Mockups / Add Mockup Item. 

Then click on the Render Figma Selected Frame button and finally see how the magic happens! 

You’re all set! Wether it’s a Figma mockup plugin or a Figma animation plugin, you’re ready to test out the best Figma plugins available online.