How to invent a Figma plugin

At Free Association, we partner with growing technology companies to supercharge their product design. Often this includes customized tools that tackle our partners’ unique design challenges. Specialized design tools can exist as their own independent apps (for example, these applications we built for eBay), but so often it makes sense to meet your designer where they are. The amazing Figma plugin ecosystem lets us easily extend the tool designers already use with custom functionality. Figma exposes so much power to its plugins, though, it can be daunting to imagine exactly what to make. Today we discuss some simple strategies to help you invent an amazing Figma plugin.

Think analog

Generally speaking, every great design tool abstracts a time-honored, analog solution. As pieces of the design process evolve to become too time consuming and too repetitive, software steps in to assist. The best design tools do not try to replace a designer’s creativity. Instead, these tools strive to make design operations easier in a manner that ultimately facilitates creativity. This is an important concept that focuses on a plugin’s usefulness, and shows us where to look for plugin ideas.

As a plugin builder, ideas are often literally at your fingertips. Notice the analog aspects of the design process. What are your designers doing with their keyboards? How are they moving the mouse around? Where are their eyes? Keep track of the physical design work, and imagine how the application could streamline that effort.

Be on the hunt for repetitive sequences of tasks that kill momentum and efficiency. Pay attention to situations where a designer is performing the same operation multiple times. Then reframe the steps in an analog way.

I reached into all the boxes and grabbed the circles that are all the way at the bottom of each one. Then I opened my box of crayons, reached in and found the yellow one. Next, I colored each circle yellow with the crayon…

Recasting your actions in this way can uncover slow and inefficient ways of doing simple design tasks.

Have a scratch pad

Figma plugins are meant to be polished, packaged and used by many designers. It’s easy to overlook, though, how a quick-and-dirty plugin can aid your design process. The Figma plugin API is robust and can perform all the same operations as the main UI. Use it! It’s good practice to keep a local development plugin on your workstation all the time. You can quickly code up a specific design operation to save time right now. For example, tedious assembly tasks like building out a table or a chart can be faster and easier to script with the plugin API!

The added benefit of integrating the plugin API into normal design work is that plugin ideas will spring forth naturally. Our Selective Surgery plugin was born in exactly this way! It began as a three line script to select a few deeply nested layers. Then the script got tweaked to select something else. The next day it was altered to take an input or two. Eventually it was useful enough to polish and package. Great plugin ideas will often come from day-to-day design work when you treat the API as its own useful tool.

Consider the designer experience

As it is in any product, there is a strong temptation to remain highly focused on what your plugin does and how it works under the hood. But equally important is how the designer interacts with the plugin. Careful consideration of the designer’s experience will make the plugin a true efficiency driver.

Convention vs Configuration

How much information does the plugin need from the user to operate? A lot? A little? Regardless, it’s important to think about how the user supplies it. The plugin should find the right spot between a configured experience (where the user makes most of the decisions), and a conventional experience (where the plugin makes most of the decisions). The goal is to be faster and easier than the “analog” method, and simultaneously facilitate creativity. Here are some useful questions to ask:

• Can we infer information from the current selection or other object on the canvas?
• Is it obvious to the user what the plugin will do with the input?

For Selective Surgery, we chose a configuration experience tightly coupled with Figma’s parameterized input.

What is the user designing?

A platform like Figma can be leveraged to create design for many mediums. What are your users likely to be creating? Designers building brochure websites will approach their work differently than those working on advertisements or mobile applications. Tailor the experience of a plugin to fit a specific type of design. For more general utility plugins, find the crossover commonalities between different design mediums.

Find more perspective

If you can develop a website using JS, HTML and CSS, you can likely build a Figma plugin already. If you’re not comfortable doing it yourself, don’t let that stop you. Find an engineer who loves design, and enroll them in the process. Working with an engineer will add useful UX perspective as a core type of plugin user. In fact, so far engineers make up almost half of the users who have installed Selective Surgery.

In closing

If creating design software like Figma plugins excite you, join us at Free Association! The best teams in the world come to us when they need to level up digital design. As a result, we live on the cutting edge of design tooling, automation, and product design. Work across a range of exciting product challenges, from anywhere you want, by applying for one of these open roles.