Creative coding with figma — part. 1: iteration.

Loïc TORRES
5 min readOct 6, 2021

--

Part 1: Iteration

Last week, we saw how to draw a shape with scripter. It took more time than using the UI, so you can legitimately wonder… why? You will find the answer in this article: iteration. Even if figma is great to realize repetitive actions, scripting them is definitely the best option to earn time if you want to realize complex shapes or automatize your workflow.

Today we’ll learn how to create a hundred of stroked circles in a blink (or even more, you’re only limited by your processor). We’re gonna arrange them and create an interesting composition.

This article is a part of a series called “Creative coding with figma.” We strongly recommend you to read the series from the beginning as some part of code is reused from one article to another. You can find the previous article here and the introduction here.

Creating the shape

To do that, let’s create a function called createEllipses which takes the number of ellipses we want to create as argument:

function createEllipses(number) {}

Looping

We’re gonna reproduce what we saw on the square example to iterate over an array by using the range function. Add this line into your newly created function like so:

function createEllipses(number) {
range(1, number).map(i => {}
}

We add inside our loop what the piece of code we used last week to create a stroked circle:

function createEllipses(number) { 
range(1, number).map(i => {
Ellipse({
strokes: [ { type: “SOLID”, color: BLACK } ],
fills: []
})
})
}

Here, we not gonna see any differences because those circles are the same dimensions and coordinates. We have to use the parameter i to shake a bit what happen here. Add those lines to increment the diameter of the circle by 35px over each iteration:

function createEllipses( number ) {
range(1, number).map(i => {
Ellipse({
width: 100 + (i * 35)
height: 100 + (i * 35),
strokes: [ { type: "SOLID", color: BLACK } ],
fills: []
})
})
}

If you run the script now, you might be surprised (and pleased ?) by the result. Make sure to call the function by adding this line at the end of the script before running it:

createEllipses(100) // create 100 ellipses

Here, the circles “grows” but they don’t move. To make them concentric, we have to tweak our circle’s coordinates over each iteration. Add those parameters inside the Ellipse function:

x: (i * - 35/2)
y: (i * - 35/2)

Now we talk ! Here’s my result:

If you’re lost, just copy/past the final code in scripter:

function createEllipses( number ) {
range(1, number).map(i => {
Ellipse({
x: (i * - 35/2),
y: (i * - 35/2),
width: 100 + (i * 35),
height: 100 + (i * 35),
strokes: [ { type: "SOLID", color: BLACK } ],
fills: []
})
})
}
createEllipses(100) // create 100 ellipses

Playing with strokes

Now, we want an even more interesting result. Let’s say we’re gonna start by playing with the stroke width.

There’s a parameter for that, and it’s called strokeWeight. We want to start with a thin stroke and make it thicker over iterations. We’re gonna use our variable i in this way:

strokeWeight: 0.15*i

We’re saying: “start with a stroke that’s 0.15px thick, and add 0.15px each time you create a circle.” Let’s run it.

My result for 100 iterations

Playing with colors

To play with colors, we first need to understand how colors works in scripter. Let’s take this line:

strokes: [{ type: "SOLID", color: BLACK }]

In scripter, you can see by his purple colour that BLACK is an existing variable available through Figma’s API. If you go to the reference (⌥ + click), you see that BLACK is in fact the result of a function called RGBA executed with 0, 0, 0 as parameters, which stands for r: 0, g: 0, a: 0 (red, blue and green).

If it doesn’t ring a bell, I recommend you to take 5s and read this article on rgb colours in css.

Usually, each parameter (red, blue and green) are in a range from 0 to 255. In scripter, it’s computed from 0 to 1: it means that if you have a value of 180 for red, it will be 180/255 = 0.7.

In conclusion, this line of code above is equivalent to:

strokes: [{ type: "SOLID", color: RGB(0, 0, 0) }] 
// black = rgb(0, 0, 0)

So, to change colour on each iteration, we’re gonna use this typo. To go from blue in the inside to red at the outside, for example, we’ll write:

strokes: [{ 
type: "SOLID", color: RGB((i/number), 0, (1-(i/number)))
}]

In this way, the red colour will increment with i and blue will decrement as we reach the end of the loop. If you run the script:

Nice gradient from the inside to the outside

Here’s the final code to achieve what you see above:

function createEllipses( number ) {
range(1, number).map(i => {
Ellipse({
width: 100 + (i * 35),
height: 100 + (i * 35),
x: (i * - 35/2),
y: (i * - 35/2),
strokes: [{
type: "SOLID",
color: RGB((i/number), 0, (1-(i/number)))
}],
fills: [],
strokeWeight: 0.15*i
})
})
}
createEllipses(100)

I hope you enjoyed what you’ve learned today, and remember: you’re free to play with this piece of code to achieve some mind-blowing results. I would love to see your art pieces in the comments!

I look forward to seeing you next week, we’re gonna go wild by coding a well-known mathematical form in figma.

Have fun coding ❤️

--

--