On April 16th 2023, I released my first Figma plugin to the Figma Community. This is a little article about why I created it, why and what it allows you to do.
Some context
Since 2014 I have embarked on the journey of creative coding and generative design. The idea of being the creator of the rules through which something manifests itself has since then fascinated me. And from that moment I constantly tried to improve my coding skills and use this medium as a channel to express myself.
In April 2023 while working on a 45 minutes UI exercise at EGGS Design, I realised how difficult it can be for people with no coding skills to create generative design assets to use in their project. I usually default to P5.js a graphic library for Javascript whenever I need to create something interactive or just outside of the ordinary.
It was at that moment that I realised that there is a general lacking of generative design tools, especially in software with a (relatively) short history, like Figma, for example.
I, therefore, decided to develop my own little tool specifically tailored to create (at least one kind of) generative design assets.
After a weekend of exploration, diving into the Figma APIs and, to be frank, some quite extensive chats with our friend "Chat GPT" I had my first prototype of what I called "Noise Grid Generator", a generative tool for the creation of generative noise-displaced grid of dots.
Design and development
I quickly sketched the UI in Figma (Duuh...) and I jumped as fast as I could into Visual Studio Code. I started from the sample project that Figma provides, as it was the easiest way for me to learn about plugins and how they work.
In its simplest shape, Figma plugins do not have an interface, and you can run them once as long as the logic doesn't require any user input (other than maybe an element selected on the canvas).
However, this was not the case for my plugin. I needed two main elements:
1 - A control panel
This is to allow the user to specify the desired parameters
for their generative grid. The parameters I settled on are:
X and Y count, to specify the resolution of the grid
X and Y gap, to define the distance between the elements
The dimension of the different elements
A displacement amount
The smoothness of the displacement noise
And a seed, to add some variation to whatever is generated
2 - A preview area
The way I achieved this is by using an HTML canvas, and drawing on it using P5.js, the above mentioned graphic Javascript library.
The script takes in the values inputed through the interface and there are used to create scaled preview inside the canvas.
Particular effort was put into always allowing the grid to fit the canvas so that the outcome is always fully visible.
The way the plugin works is simple: in the main project folder, there are two files that you really care about, the UI.html which, in a simple plugin like this, contains all the interface code, with styling and scripts. And a code.ts, a typescript file that takes care of interfacing the plugin with the Figma APIs.
The way these two files are talking to each other is via the postMessage() method which can send data from the HTML file to the Typescript one. There the message is received and interpreted.
The grid generation
The code that generates the grid is relatively simple and is usually a good exercise to do while learning creative coding. Here is an interactive example of the code, and you can see the basic elements of it.
Examples
And here are some examples of what people can create with this plugin and all of these images are entirely created in Figma using gradients, filter effects and so on.
Conclusions
This was surely a nice exercise for me and I am proud to see how many people have been using this tool. Feel free to try it at this LINK
I believe that generative design is a powerful tool to create engagement, amazement and sometimes just a "WOW" in people using it and observing it. I believe that this is a gap that needs to be filled. Providing new tools to designers that have no coding experience can be a powerful way to spread and introduce generative design elements to everyday products, and I am surely excited about the idea.
Thank you! :)