Overview

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 practice stay organized and improve my workflow.

Project Info

Objective - Design and Develop

Tech - Figma, VS Code, Typescript, Node.js, Javascript, HTML, CSS

Duration - 2 Days

The  Problem

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.

  • Managing a consistent naming format through the project document
  • Organizing multiple instances of any design element
  • Maintaining consistent margins, paddings over all the frames/ artboards
  • Exporting Presentations to power point presentations
  • Organizing components and instances of the components
  • Finding specific elements form a huge project file (going through the layers window)
  • Creating multiple sticky notes for managing the day-to-day to do list

Brainstorming

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.

Framing the functionalities

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.

Getting Started

Writing the Figma plugin

Next I moved to the VS code editor as suggested by the Figma setup guide. The plugin has a simple file structure.

  • code.ts - the typescript file where the functionalities of the plugin runs. This file is compiled into code.js which is required by Figma application.
  • ui.html - the HTML file where you can work with HTML, CSS, javascript to create the user interface of your plugin

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.

Designing the plugin Interface

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.

Testing the plugin

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.

Final Design

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.

Reflections and Takeaways

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.

  • Update the plugin to support components and groups
  • Make the paddings persistent allowing responsive nature of the design

Thank You