Using Artboard Studio’s Figma Plugin

7 min readJul 10, 2023

A couple of years ago, I ignited an firestorm within the UX community by stating in my LinkedIn Learning Course, UX Design for Non Designers: “UX is nothing more than common sense.” There was a solid reason for that assertion.

Back in my College days, my Economics professor led a session on business and dropped this little gem from Peter Drucker on us:“The purpose of business is to create and keep a customer.” As you may have guessed it stuck with me because, if you really take the time to think about Drucker’s claim, you arrive at the core of why UX has become so important. In fact, the words “customer” and “user” mean the same thing. Common sense.

UX supports marketing and Drucker has some thoughts on that as well.

“Because the purpose of business is to create a customer, the business enterprise has two — and only two — basic functions: marketing and innovation. Marketing and innovation produce results; all the rest are costs. Marketing is the distinguishing, unique function of the business.”

Peter Drucker on Marketing
Forbes Magazine,
July 3, 2006

One thing about UX Design, is it’s basic function is marketing and how we do it in UX Design is through innovation. Yet I rarely, if ever, encounter that acknowledgement. Which brings me to the subject of this article. Artboard Studio gives you the ability to support both Marketing and innovation in Figma.

Late in 2022, my Content Manager at LinkedIn Learning asked me to check out Artboard Studio and to see if there was the possibility of developing an Artboard Studio course. After a couple of weeks of “playing around” with the application I concluded: “Oh boy, was there ever.” The deeper I got into the application, the more convinced I became Artboard Studio is something you really should take a look at.

For example, assume you are developing a site or app that gives users the ability to purchase logo merchandise. These items are usually presented using a series of cards. Seeing as how prototyping software gives you the ability to show your intent, you really don’t need the actual items… they can be added just before handoff to development.

Let’s face it, heaving a logo onto a coffee cup and getting it just right in Photoshop is not exactly up there with cool things to do. There is a lot of fiddling around to get the proportions and perspective just right.

With Artboard Studio you find a coffee cup, put the logo into a template, drop it onto a coffee cup and it is done. What is even more interesting , if you use Figma, you can do the whole thing right in Figma without a trip to Artboard Studio.

Before we get going you need to have an Artboard Studio account. If you just want to try this out, you can get a free account but a paid account opens up the entire Artboard Studio collection of templates and mockups.

Installing the Artboard Studio PlugIn

You connect Artboard Studio to Figma through the use of a plug in. Just do a search in Figma.

You only need to enter Artboard to find the Artboard Studio plugin.

When you first open the plugin you will be prompted by Artboard Studio to get a free “Secret API Key” which you copy and paste into the dialog box in Figma.

Click run to obtain your secret API key.

Remember, Artboard Studio and Figma are browser-based applications. The key allows Artboard Studio to connect with Figma’s API. You will only have to do this once.

Reveal the key and copy and paste it into the Figma dialogue box to activate plugin.

Getting to work

With that out of the way, let’s look at a practical use case well beyond the usual “Isn’t this app cool?” stuff that is so prevalent these days. We have all been there. Pick up the cool application, figure it out, do cool stuff and a couple of weeks later it is sitting in your applications folder and starting to tarnish like the silver tea set at the back of your china cabinet. You won’t be doing this with Artboard Studio.

In this example the “mythical” Mountain Coffee Co. has decided to offer branded merchandise one of which is a Trail Mug. The great thing about prototyping applications is the Designer can whip up the concept to demonstrate what the card would look like well before the mugs are purchased and photographed. Here’s how:

Step One:
We start in Figma with a simple card design and the logo sitting on the canvas.

Step Two:
Open the Artboard Studio plug in and do a Search for Cup.

Select the mug and the various bits and pieces associated with the Mug land as frames on the Figma Canvas. The actual image is the mug. The other two frames allow you to change the Mug’s Color and the Mug Design frame is where the logo will be placed. It is also important you not dismiss the Mockups window. Keep it open.If you look at the Mug frame you will see it contains the mug and the shadow. I don’t need the shadow and that layer can either be deleted or turned off.

Select the cup and the Artboard Studio frames are added.

Step Three:
To get the logo onto the mug drag it into the Design frame.

To put it on the cup, select Design frame and click Render Selected Frame. The logo appears on the cup. If the logo is too small scale it up and click Render Selected frame again.

Click Render Selected Frame and the logo appears on the cip.

Step Four:
Change the color.

What does the Color frame do? Let’s see. Select the Color Frame and change its color to 9370F4. With the Color frame selected click Render Selected frame. All it does is change the Handle and the Rim’s color. I prefer a Black rim and handle so I change the color to Black in the Properties and click Render Selected Frame.

Changing the Color frame’s color from white to black affects only the handle and the rim.

Step Five:
Change the cup’s color.

You can also change the Cup’s color. Select the Design frame and change the Frame’s fill to C2EDFF which is a light blue. Click Render Selected Frame and the cup has a new color.

What you should have gathered from this is, any time you make a change to an Artboard Studio frame you have to click the Render button meaning you need to keep that window open until you are finished.

Before we drag the Cup into the Card frame let’s do a little housekeeping. Group the Main,Design and Color layers and name the group Mug. This way we can easily rescale the image to fit the card.

Let’s finish this project.

The Design frame is where the cup’s color is changed.

Step Six:
Add the Cup to the Figma card.

Drag the Cup frame into the Card frame and select the group. Scale it to fit. Resize the Cup frame and add a light background color to add some contrast. You might want to select the Cup group and move it where you want it.

Conclusion:

So there you have it using the one of the thousands of mockups in Artboard Studio directly in Figma using the Artboard Studio plug in. Though I have created a single card to demonstrate the technique you could easily duplicate the Card Layer and use Artboard Studio to create branded Golf Shirts and other merchandise. You can also use Artboard Studio’s Electronics Mockups to create static renderings of a screen on an actual device, Tablet or computer screen and share it with the team and stakeholders to provide that important context..

The only thing you need to know is that for this to work you need an Artboard Studio account and to obtain the “Secret API Key” to connect the two applications.