Figma plugins are very useful addition to the application as it supports designers personalized design workflow. Padderr is a Figma plugin that allows designers to maintain consistent paddings over your frames.
I've been using Figma as my goto design tool because of its accessibility being a browser-based tool and ease for collaborative work. As a designer, I often tend to do things manually while using design tools. For example, following a proper naming convention for the different frames/artboards, resizing the elements for maintaining the layout throughout the designs, maintaining the consistent paddings through all the frames. I often try to stay organized and improve my workflow.
Objective - Design and Develop
Tech - Figma, VS Code, Typescript, Node.js, Javascript, HTML, CSS
Duration - 2 Days
Being one of the potential users I started off breaking down my design workflow into small parts. Identifying my use of the application for the designing process. The goal was to identify the pain points of my process. I started identifying different sections consuming more time and effort. Some of the identified pain points of my use of design tools were:
I decided on tacking the pain points on by one. I arranged the pain points based on the difficulty. And so I picked my problem statement of maintaining consistent margins and paddings over all the frames. I decided to create a Figma plugin to automate the process.
Tackling the pain points one by one, I started defining the pain points and the use cases. Brainstorming how the problem can be eliminated by automation. I identified a simple issue of maintaining consistent margins and paddings over all the frames, which with automation could help me save time and increase the quality of my designs.
After identifying the target problem I started defining the problem and visualizing the impact in various use cases. And how can a plugin help to eliminate the problem.
From the insights of the brainstorming process. I derived the initial set of required features for the plugin to work successfully. The initial features were focused on creating consistent padding on desired frames.
Next I moved to the VS code editor as suggested by the Figma setup guide. The plugin has a simple file structure.
The comprehensive documentation made it really easy for writing the plugin, understanding the API references. The primary aim was to design a solution for maintaining consistent paddings on a Figma frame to maintain the quality of the design and at the same time increase the efficiency of the designers workflow.
I started writing the solution and testing the plugin with some use cases. I created some dummy frames with content to test the plugin in various cases. It turned out I had to tweak the logic to make the plugin work in all the use cases.
I started with sketching the UI of the plugin. Sketching helped me in framing the layout and to increase the usability of the plugin. Also, writing some notes and incorporating them in a iterative process.
Finishing the development of the plugin. It was time for the final testing of the plugin with some use cases. I tested the plugin with my existing projects. It did work for most of the use cases but it did throw some unexpected results for some use cases.
The final design for the plugin included the proposed feature set. I published the plugin in the Figma community so that other awesome designers in the community can use the plugin to make their workflow efficient. Currently, I am working on writing an update for the plugin to eliminate errors in some use cases.
This was my first Figma plugin where I learn to design and develop a solution to create impact leveraging the technology. I learned to adapt the evolving technology and developing the confidence to write codes. Some of the features for the update of the new version of the plugin.
