Figma Plugin Development, Sweden 2020

Pixel Grid Shaper

Year: 2020 | Time: 1 Week | Team: 1 Interaction Designer | My Role: Research, testing, development

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

Add the plugin to your Figma!

Manual adjustment of components from 6px to 8px.

The problem

While we maintained our design system from 6px grid to 8px grid I realized that the designers including me in our teams spending hours on changing the sizes, padding, and margins in the components to the right pixel values. I started to track the workload we have on pushing pixels by maintaining our components in the design system by recording a whole work week. On an average workweek, we adjusted 23 components where we spend 3,1 minutes on average to adjust and check all different elements in a component. This resulted in 1h 11min per week and 4h 45min per month of being busy pushing pixels around.

This was a shocking result, as a UX designer I like to think about how things should work and don't like to waste hours on fixing visual details. On the other hand, developers care about details and when this needs to be changed later, it creates extra cost which could be prevented. For these reasons, I spend some of my time outside of work to help myself and others to make work a bit more focused on the fun things.

How to fix this problem?

I did some research on exciting plugins but could not find anything at this time which will solve the problem so I spend some time learning how to develop Figma plugins and was surprised how easy it was. Figma has a well-documented process on how to create a plugin and there is a very easy way to develop and debug inside Figma.

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

The MVP towards a 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 is doing this automatically, and then 4 additional buttons make 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 current values.

Impact

It took me around 5 hours to complete the study and development. If the test results are right, the tool will increase productivity after 5 work-weeks of everyday use. Furthermore, the tool allows you to focus on what is truly important rather than being distracted by calculations or pixel-by-pixel movement of items.