Pixel Grid Shaper

Figma Plugin • Developer at Securitas IS • Sweden 2020
My Role:

Research, Testing, Development

Company:

Securitas

Year:

2020

Team:

Solo project

Time:

1 Week

This plugin allows you to rapidly rearrange things according to your desired grid.

Add the plugin to your Figma!

The problem

The design system of the organization needed to be changed from a 6px grid to an 8px grid. While continuing to work on my project, I noticed that switching to the 8px grid required more time to adjust component sizes, padding, and margins to the proper pixel values. To get an idea of the extra effort, I started recording the workload I have on pushing pixels by maintaining our components in the design system. On an average workweek, I adjusted 23 components where I spent 3,1 minutes on average. This resulted in 1h 11min per week and 4h 45min per month.

Manual adjustment of components from 6px to 8px.

How to approach this problem?

I looked into some exciting plugins but could not find anything that supported such a problem at this time. After looking into how difficult it is to create a Figma plugin, I discovered that it is in fact relatively simple. Figma has a well-documented process for creating plugins, as well as tools built into the software to support the development of Figma plugins.

Design process overview

The Solution

To make things efficient I focused on the two things I did the most, which are sizing shapes to the next bigger or smaller 8px grid value. For this purpose, I created a button that does this automatically, and then 4 additional buttons making it possible to change this value in the X/Y direction to the next bigger or smaller 8px gird value to make a visual adjustment possible. Luckily this was not a big effort and just an easy mathematical equation on the current values of a shape.

Change the size of the input fields with the plugin from 6px to 8px

Impact

It took me about 5 hours to learn and develop. If the results of the tests are correct, the tool will increase productivity after 5 workweeks. Furthermore, the tool enables you to focus on what is truly important rather than being distracted by calculations or pixel-by-pixel item movement.