Boosting your Figma workflow: Building your own plugin
The learning of a design system designer on automating tasks and helpful resources.
As a product designer working on design systems, I cannot deny that a huge portion of the work involves repetition. Tasks like creating button variants of different sizes, correcting multiple icon layers, and ensuring a consistent documentation language, etc., all require manual effort for an extended period. Even short tasks can add up quickly!
The nature of repetition makes the execution process for a design project longer. A longer progress means that it takes longer to make one thing available to colleagues. The article from Uber Design demonstrated to me how we can take better advantage of codes in design system work. By speeding up the execution cycle, it opens up the opportunity for design system designers to focus more on thinking and collaboration to achieve more useful outcomes.
But why build your own tool? Aren’t community plugins already helpful? Yes, they are super useful. However, at least for me, there is always a unique problem that requires integrating multiple plugins to accomplish an ideal outcome, or that I did not find any suitable one. It reinforces my idea that custom solutions could be better.
In this article, I want to share two approaches that have enhanced my workflow, even though I have only basic programming knowledge. One approach is using a no-code tool, and the other is building your local plugin. Please note that I have no affiliation with any tools mentioned below, and I recommend them based on my personal experience.
No-code tool: Automator
Similar to recording macros in Google Sheets, you can build custom scripts with the Automator plugin in Figma, which allows you to “build custom drag and drop automations that do time-sensitive Figma tasks for you in one click.” It’s a powerful tool that can save you time and energy by automating repetitive tasks, from changing a layer name based on its parent layers to adding component annotation.
While it’s marketed as a no-code tool, it can be used as a low-code tool if you dive deeper into it. It’s fun to use, and there’s a lot to explore! More on its website.
Although I started my Figma automation journey with Automator and created several actions, I eventually wanted more flexibility and customization options.
Making your own local plugin
Another approach to automate tasks is to make your own local plugin. Developing a plugin can be a steep learning curve, but it doesn’t have to be. When I started, I followed the official guide, but setting up a plugin development environment was much more difficult than I anticipated. I spent many sleepless nights scouring Reddit and Stack Overflow for solutions.
What if you don’t have to go through all the technical problems? The toolkit, Create Figma Plugin by Yuan Qing Lim, provides a pre-defined development environment and a library of utilities. By following Lim’s guide, you can skip the burdensome configuration and start exploring how to leverage Figma’s API to solve your problems. There are other toolkits available, but I stick with Lim’s because I found it first and satisfying.
In my exploration of coding, I found many resources that were useful while learning from others and reusing patterns. Many of them are open source, so please be thankful and respectful to these generous authors as I do. While I won’t cover the 101 tips of writing TypeScript, it’s a useful skill to have if you don’t.
- Figma Developers Official Doc
- Plugin example on GitHub
- More open repositories on GitHub
- Tutorial of Building Your Figma Plugin by Figma
Fitting into your workflow
Building your own Figma plugin can provide immense value by tailoring it to fit your unique workflow needs. As someone who has struggled with tedious and repetitive manual tasks, I found that creating plugins has allowed me to streamline my daily work. Here are some of my small achievements:
- Input texts in a matrix of 10000+ fields for token management
- Swap text styles to their pre-defined responsive styles
- Replace color values in 1000+ color styles
- Add my name and date to my selected layers (public version)
Thank you for reading this far! What are the things you want to automate in Figma? I hope my experience inspire you, and if you have any recommendations, feel free to comment and share with more people :))
PS: All statements here are my own and don’t reflect the opinions of my employer. See you next time 🍻
