Scripting / Plugins
Intro
I am always an advocate of the "Work smarter, not harder" approach, and this can apply to the design too. As a designer myself, I am looking for ideas to improve how are we working as designers and how are we working with design tools. In my past I've written and/or utilised scripts (written in Javascript) for some mundane and repetitive tasks (InDesign, Illustrator), this is no different for more modern tools - such as Figma, with a solid API and great documentation!
After all, designing meant to be fun and not a chore right?...
Theme Flipper (at Truepill)
Tools used: JavaScript, Figma APIs
The concept of changing themes in Design is nothing new and, when I first joined Truepill we just started using a v1 of the plugin (forked from Tom Lowry's Themer plugin) and called it Theme Flipper.
The idea behind it was to create a separate Figma library for storing Text, colour, effects styles and publish it as a "Shared library". The issue with this approach was that we would have a lot of libraries available that may not be relevant to the project we work on. Also with this workflow, any changes done in the library had to be published and then all these changes had to be updated in the project file.
Designers in our team were complaining about the steps involved in this process, including a switch between two Figma files (Shared library and Project file). Another hindrance in this workflow was that designers couldn't see the updates immediately (changes on the fly). Over the course of a few months I've collected some feedback from my colleagues and started conceptualising a new (faster) approach.
Results and outcomes
In total, we reduced the number of steps (by 3!) taken in the process of "flipping" and reduced time in flipping (on avg we've saved 10-20sec per flipping operation). When speaking to my teammates, they were delighted to see the changes happen instantaneously in the project, and not have to juggle between Figma files (project file and the dedicated shared library of styles). Projects were getting out of the door faster and working with them was less stressful. On the plug-in side: less maintenance overhead, thanks to the simpler code-base, and the plugin was faster to use overall (no custom UIs or clicks involved).
Rad Dude - an open source Figma plug-in
Tools used: JavaScript, Figma APIs
The idea behind "Rad Dude" was simple: allow a designer to change the radius in Figma with ease (using the plugin parameters). At the time of writing (2022-08-11), in Figma, we can't create a style for radius and there is no easy and fast way of changing these in bulk or on a selected layer.
Results and outcomes
This was a pet project of mine, I always wanted to add something beneficial to the Figma community and learn JavaScript on the way. One of them was the concept of recursive functions and a better understanding of how we can modularise the code (split into different modules/js files). I am immensely grateful to Luke Brobbin and Gustavo Cejas who helped me build the plug-in :).
Figma community:
https://www.figma.com/community/plugin/1077975285276991020
GitHub repo and source code:
https://github.com/peterstnsz/rad-dude/