Figma Plugins

summary_

When I learned about Figma supporting custom plugins, I decided to take the plunge and study the API. It is Typescript-based, which was ideal for me who coded predominantly in Angular. A few months later and 4 plugins were born! Most were utilities that reduces manual work except for one, which was my version of the game “Snake” ported into Figma.

Year 2020
My Role Developer
Language HTML, CSS, Typescript
Software Visual Studio Code, Figma

background_

In late 2019, my colleague and I participated in an event hosted by Figma Singapore. As avid users of Figma, we wanted to know how others were using this amazing tool and what were the best practices. This particular event was especially unique because the co-founder of Figma, Dylan Field, was in town and had agreed to come down to the event and give a sneak peek of what’s coming up in Figma.

During the event, besides managing to snap up a black Figma t-shirt, we got a glimpse of the beta version of Figma Community. However, the thing that most caught my eye was the presentation by Yuan Qing on Figma Plugins. During his presentation, he talked about how he used Figma Plugins to automate tasks that have fixed set of rules. He went on to showcase his portfolio of plugins, some of which had more than 10,000 installs! He even gave some tips on how we should think about usability when coding our own plugins.

I decided then and there that I would give coding my own Figma Plugin a try, and to make it valuable in the near future, I decided to try tackling the bottlenecks of our current mockup creation process back in the office.

research_

I decided to start by reading through the Figma Plugin API documentation to understand how to get started and how far can we go with what’s supported. I also looked through Yuan Qing’s code on GitHub to understand how he set his repository, and wow, he used so many tools I did not even know existed!

Having read through both, I decided to adopt the following for my Figma Plugin repository:

• Plain HTML, CSS, and Typescript for simplicity; Typescript because of strong typing which reduces mistakes
• All plugins shall be placed within the same repository, hence adopting a mono repository (monorepo)
• Lerna to manage packages across all plugins within the monorepo
• Travis CI for continuous integration, because it has free tier 🙂
• The repository will be hosted in my existing GitHub account

GridGen

GridGen was the first plugin I created to reduce the amount of work needed to mock a grid-like UI. Unlike other software solution providers, a grid-like UI was favored on our solutions because it provided a tried-and-tested way of displaying large amounts of data. However, Figma did not provide a convenient way of generating such a grid. This problem was especially exacerbated when we had to mock the data within the cells of the grid individually.

As such, I decided to code out GridGen in order to automate the tedious yet consistent steps of generating a grid. My idea was to then leverage on Microsoft’s Content Reel plugin to seamlessly generate mock data for the entire grid.

Hence I began by creating a simple plugin to generate a grid based on 3 sets of constraints: (a) cell dimension and number of rows/columns, (b) cell dimension and overall grid dimension, and (c) overall grid dimension and number of rows/columns. From then on I began adding customization capabilities such as whether the grid includes a header, whether the header contains a built-in filter, whether the grid’s background color is striped, the ability to change both the primary and secondary/stripe color, and the ability to change font name, size, and style of the header and body texts. I also added keyboard shortcuts and navigation to support usage without mouse or trackpad.

With a little bit of publicizing shortly after its release, GridGen quickly gained traction. So far, I had gotten and implemented one user’s feature request. It was the most installed plugin I had coded up till today, and I believed continued to serve the small group of Figma users who make grid-like UI regularly.

Retro Snake

The next plugin I coded may not be as utilitarian as the previous one, but it certainly helped when designers want to take a quick break and have a little bit of fun. Retro Snake was my attempt at recoding the once popular Snake game. I had never played with manually drawing out shapes on canvas using JavaScript, so this was the result of that learning.

Retro Snake is essentially the classic no-frills Snake game. You play as a snake, and your goal is to eat the fruit that spawns at a random place as soon as possible without biting your own body. The faster you eat it, the higher the score multiplier applied. As you eat more fruits, you grow in length, making it harder to not bite your own body. The game will end when you bite your own body, and your score will be displayed on the UI. Click on the “RESTART” button or simply press “Enter” on your keyboard to replay.

PageClone

PageClone might not be the most installed plugin, but it seems to be the most useful one amongst the plugins I’ve coded. I decided to create PageClone when we realized that we were having issues with freezing our mockups, which meant that the mockups handed over to developers were the very same ones that were being modified for future developments. Hence, there were occasions where the mockups changed midway through development, confusing the software engineers.

The idea of PageClone was simple: take any frames within a page, and clone it into a new page. The plugin was to support both “soft copy” and “deep copy”. A “soft copy” would mean that any instances that are linked to a main component will retain their linkage, whereas a “deep copy” would break that linkage. It is by using “deep copy” that I plan to support proper mockup freeze within our team. PageClone also came with additional useful options to (a) remove all hidden layers when doing “deep copy” and (b) automatically lock all copied instances/frames to prevent developers from messing the mockups accidentally.

When I launched this plugin, I was not aware that numerous designers were facing the same issue as our team. It was only until I listened to one of Design Details FM’s podcast episodes that I realized this plugin could really help a lot of designers. Despite having less than 500 installs, PageClone had more likes than GridGen, and I have gotten 1 bug report and 1 feature request respectively for this plugin; a testament to its value to the wider Figma Community despite being a small plugin.

GridMod

GridMod was coded to support GridGen’s usability. Whereas generating grid-like UI has been made simple with GridGen, the same cannot be said with modifying the generated grid. Things like increasing the height of all rows or reducing the width of the second column took as much or even more time than generating an entire grid. When I first coded GridGen, I had initially planned on adding the edit feature into it down the road. However, the code has since gotten too complex that I decided to create another plugin instead to support the modification of the grid.

GridMod is essentially a small plugin capable of detecting whether the selected frame is a valid GridGen-generated grid. If yes, then GridMod will be able to assist with changing the width and height of a single row/column, or of the entire Grid. The plugin works based on increment, meaning instead of defining the exact width or height desired, the user has to define the amount to be added or reduced from the width or height.

evaluation_

Ever since I started my professional career in software development, I have always wanted to contribute to the open-source community. I am extremely delighted what that dream finally came true through my Figma Plugins. Throughout the entire process, I have grown tremendously as a software developer, both through improving my proficiency in what I have already known and through learning new tools such as Travis CI and Lerna.

At the same time, I now understand the amount of ownership and responsibility needed to maintain an open-source repository. Even though I have only slightly more than 2500 users across all 4 plugins, I feel responsible for the experience these users have with my plugins. As an avid agile practitioner, I try my best to fix any bugs reported or implement any features requested as soon as possible. I don’t know how long will I be able to keep up with maintaining these plugins, but I will definitely try my best until the day comes when I had to inform my users that the plugins will no longer be supported.

If you are curious about the code or would like to contribute to the plugins, feel free to fork the repository and create a pull request! It will be my pleasure to have more contributors to these plugins ????