An illustration showing a series of building blocks stacked together. Three people sit among the building blocks, working on their laptops. — Illustrations by Alisha Giroux.

The Figma plugins that make me a better designer

9 utility plugins I developed to work more effectively in Figma

Published in

Shopify UX

5 min readMar 10, 2021

Shopify officially shifted from using Sketch, InVision, Abstract, and Zeplin, to Figma at the end of 2019. This was after months of user research and testing by the Polaris tooling team. Figma is now Shopify’s default tool for product design and prototyping. Multiplayer editing eases collaboration across our remote teams and, because Figma documents are just URLs, they’re accessible to everyone, not just designers.

Although Figma has grown to be an indispensable hub for collaborating on design, it isn’t without limitations. Ever lost resolution when bringing a large image into Figma? Or been frustrated at not being able to directly input a spacing value for your layers? Or perhaps you’ve been unable to resize a frame independently of its contents?

Fortunately, Figma’s comprehensive plugins API allows us to customize Figma and build simple workarounds. In this article, I’m going to share 9 utility plugins I’ve developed to help me work more effectively in Figma as a product designer at Shopify. Let me show you how!

1 / Move layers with pixel precision

Moving layers is an action that you’ll do extremely often when working in Figma, using either the mouse or the arrow keys on your keyboard. To precisely move a single layer, you can directly edit the x and y properties in Figma’s Design panel. However, this technique will not work if you want to move multiple layers.

A solution is the Move Layers plugin: Select the layers you want to move, run the plugin, enter an x and/or y pixel offset, then hit Enter.

Set the space between layers

If the layers you selected are already evenly spaced out, you can click and drag on the magenta vertical bar between the layers to adjust the space between them. To be more precise, you can also directly edit the layers’ Space property in the Design panel. A problem with this technique is that the Space property will only appear in the panel if your selected layers are already arranged in a row or column.

A more predictable and straightforward workflow is possible with the Distribute Layers plugin: Select your layers, run the appropriate plugin command (Distribute Layers provides 4 plugin commands for distributing layers up, down, left, or right), enter your desired Space value, then hit Enter.

2 / Resize frames without also resizing their contents

When resizing a frame in Figma with your mouse, the default behavior is that the contents of the frame will be resized as well based on the constraints that were set. To change the size of the frame without affecting its contents, press and hold the Command key (Ctrl on Windows) when dragging with your mouse.

Ignoring constraints is not possible when changing the width or height via the Design panel. To precisely set the size of a frame, you can use the Set Layer Size plugin. This plugin allows the width and/or height of the frame to be set to a specific pixel value while ignoring all the constraints set on the frame’s contents.

3 / Copy a component

Exhaustive iteration is part and parcel of my design process. For every feature and UI component that makes it to production, many design options and variations will have been explored and considered. When working in Figma, it’s often useful to make multiple copies of a component in order to quickly test out different variations. Unfortunately, Figma does not provide a native way to do this:

Holding the Option key (Alt on Windows), clicking a component, and dragging produces an instance of the component.
Selecting a component, then performing a copy and paste, also produces an instance of the component.

A solution to this problem is the Component Utilities plugin: Just select the component you want to make a copy of, then run the plugin’s Copy Component command.

4 / Insert big images

I often need to bring high-resolution screenshots into Figma when compiling competitive research or doing a UX audit of existing workflows. A limitation in Figma is that images can only have a maximum dimension of 4096 pixels. Any image with a dimension larger than 4096 pixels will be downsized, resulting in a blurry image.

The Insert Big Image plugin is a workaround for this: Run the plugin, then drag and drop your image into the plugin UI to insert the image at its full, original resolution. (Behind the scenes, the plugin intelligently divides your original image into multiple smaller images that can be inserted without downsizing.)

Flattening layers at a high resolution

Another limitation when it comes to images is that Figma’s built-in Rasterize Selection command only allows layers to be flattened at 1x resolution. Use the Flatten Selection to Bitmap plugin to flatten layers at a resolution greater than 1x (eg. 2x, 3x, 4x): Simply select the layers you want to flatten, then run the plugin.

5 / Make quick and precise selections

There have been many occasions when I’ve had to make changes across multiple layers at once. This usually involves selecting layers by hand, which can be tedious and time-consuming, particularly when you’re working in a large document with many frames on the canvas. Select Layers is a plugin to help you make quick and precise layer selections. It allows selecting layers by name, by type, or by similarity to the currently-selected layer.

6 / Get organized

Exploring solutions in Figma often leaves my document in a mess. But why spend time tidying things up by hand when the Clean Document plugin can do the work for you? This plugin deletes hidden layers, ungroups heavily nested layers, make layers pixel-perfect, and fixes the layer names and the ordering of layers in the layer list. With just a couple of clicks, your document can become a lot neater and easier to work with.

If you’re maintaining a page of components, organize your components using the Organize Layers plugin. If you’ve named your components properly, you’ll also be able to see the different states of each component alongside each other.