Creative coding with figma — introduction.
Part 0: Introduction
Figma is one of the most popular tools for prototyping and designing interfaces. Today, you’ll learn how to raise your game by automating your design process with a plugin called scripter. Let’s start by drawing some circles!
About scripter
Scripter is a tool that allow you to play with Figma’s API by writing scripts. You can do almost anything, from drawing a circle to manage mind blowing animations. Most of Figma’s plugins use this API, so it’s a good way to start if you want to develop your own plugin.
Scripter use relaxed TypeScript, so you don’t need to rock TS to use it, but you might have to use some knowledge of Javascript’s basics. I do not know TypeScript myself and I’m perfectly fine using scripter.
Before we start, make sure to visit and save the Figma API documentation in an unused tab of your browser, it could eventually be helpful.
Installing scripter
You can find scripter here or simply browse it on the Internet. Once you’ve reached the page, press the install button on the top right corner. Then, in one of your project, make a right click in your central window and go in the plugin section: you should see scripter. Click on it and wait for the interface to show.
Scripter comes with some exemples so you can sneak around to find inspiration and have a first understanding of how things work here.
Draw your first shapes
Let’s start by walking through the “create rectangle” exemple. If you select the script and run it (⌘ + ↩︎ or ▶ button top-right corner), you’ll see 5 squares appear:
Here, we iterate over an array containing numbers from zero to four (five items) created with the function range(0, 5). We’re gonna use similar methods to make repetitive actions.
Over each iteration, we use the Rectangle() object wich, by default, creates a squared shape 100*100 at the coordinates x: 0, y: 0. With the so-called variable i, which increment from 0 to 4, we increase the distance from the origin by 150px on the x axis.
How? We use parameters. This function accepts an object that can pimp our shape. We can change position, color, size, borders, rotation and much more.
We can list available parameters directly on the documentation or by typing the function and use the autocomplete feature.
Draw a stroked circle
Now that we learned how to draw simple forms using scripter, let’s step up in terms of creativity: we’re gonna create a concentric circles pattern. Start by creating a new script (press the + button top left).
The Ellipse() object comes in. Similarly to the Rectangle() object, it will create a 100px wide gray circle at the coordinates x: 0, y: 0.
Add a stroke:
First, we want to add a stroke to this ellipse. To do that, we use the “strokes” parameter. Pass this object to your Ellipse object and run it again.
{ strokes: [{ type: “SOLID”, color: BLACK}] }A stroked circle should appear. “Strokes” parameter awaits an array (we can add multiple strokes in Figma). Type is the type of the color we’re gonna use to fill this stroke. Here we use “SOLID”: a solid plain color. Other types are available, like “LINEAR_GRADIENT”, but we’re gonna keep that for later.
Remove color:
By default, scripter creates a grey filled shape. To remove this color, we’re gonna use the “fills” parameter. Like “strokes”, we have to pass an array, but an empty one:
{
fills: [],
strokes: [{ type: “SOLID”, color: BLACK}]
}Make sure to delete all of your previous shapes before running the script, and you should see this:
Of course, those parameters could be given to Rectangle(), Ellipse(), Line(), Star(), Vector(), Polygon()… If you’re looking for something in particular, you may find it on the API documentation or with the autocomplete function.
This introduction to scripter ends here. In the next article, we’re going to create some interesting shapes that would take ages to realize with bare hands, but a second with scripter 🤟
I hope you enjoyed what you’ve learned here, have fun coding ❤️
