top of page

Figma plugin for generative design assets. This is Noise Grid Generator.

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.


Noise grid generator plugin cover image

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.

An animated GIF of the plugin being demoed.
Here is the plugin, in it's latest version, doing its thing

 

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.


A snapshot of the quick interface design made in Figma
A snapshot of the quick interface design made in Figma


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:

  1. X and Y count, to specify the resolution of the grid

  2. X and Y gap, to define the distance between the elements

  3. The dimension of the different elements

  4. A displacement amount

  5. The smoothness of the displacement noise

  6. 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.



Diagram of how the communication between HTML and Typescript files works and how messages are exchanged (Credits: Figma Developers Documentation)
Diagram of how the communication between HTML and Typescript files works and how messages are exchanged (Credits: Figma Developers Documentation)

 

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! :)




Comments


bottom of page