fig-gen

Sixty Gens in Two Hours

fig-gen is a small generative series I made in Figma with Automator, a plugin that builds designs from stacked actions. One-pixel frames, placed by the trig functions I last used on a graphing calculator in high school.

3 minute read Source

I spent an evening trying out Automator, a new Figma plugin from Jordan Singer. You build a design out of stacked actions (create a frame, repeat, set a variable) instead of drawing it. A minimal generative series, made from pixels and equations, seemed like a good way to find out what it could do.

Twenty-six gens in two rows: tall black frames with thin white borders, each holding a different scatter of short white dashes. Some form chevrons and fans that open from one edge, some trace arcs, one collapses into a single horizontal line.

Nesting and rotating

I started by nesting shapes. What happens when you nest a shape and rotate it, over and over? Some of the results were good, but they all started to look alike, because rotation was doing nearly all the work.

A Figma window with the Automator panel open beside the canvas. The canvas shows a dense spiral of yellow rings and magenta strokes around a cyan starburst. The panel lists the actions: create group, create frame, set clips content, repeat 48 times, duplicate, set position, set rotation, repeat 12 times, create text, set position, repeat 12 times, create frame.

Fig. 1. The gen3 recipe and what it draws. Each pass places one mark: x is the index, y is a function of it. The dots are computed from the saved recipe.

Back to the graphing calculator

Then I remembered playing with graphing calculators in high school. Sin, cos and tan gave me interesting results right away.

Once I had a few directions I liked, I wanted them to sit together in a series, so each one needed a frame. I used the simplest outline I could, to keep everything monochrome and on theme.

What one gen is

None of the final gens use nesting. Each one is a black frame, 128 by 512, with a one-pixel white border inside it. A Repeat action runs 256 or 512 times, and on each pass it places one white mark. A mark is a frame one pixel tall. Its x position comes from the repeat's {{index}}, so the marks march along the x-axis like a plotted graph. Its y position is a function of the index.

The functions are mostly sin, cos and tan, a random variable and {{index}}, combined in different ways. The simplest saved recipe, gen3, sets two variables and places a one-pixel dot:

sin = Math.sin(2 * index)
cos = Math.cos(index)
y   = cos * (index + sin) + 256

Multiplying by the index makes the swing grow as the index climbs, so the dots open out into a chevron. Later recipes give each mark a random width, from a fraction of a pixel up to 6, 8, 16 or 32 pixels, depending on the recipe. The width is the product of two random numbers, so most marks are short and a few run long. Some recipes give each mark a random opacity too.

Sixty in two hours

My favourite thing about Automator was how fast it let me explore. I made about sixty gens, with a lot of variety between them, in under two hours.

The whole session laid out in three rows of labeled frames, gen3, gen4, gen5 and gen6, about sixty in all. The gen3 row is chevrons; one in the middle is flooded with long white bars. The gen4 and gen5 rows drift from scattered dashes to single horizontal lines to arcs. The gen6 row is fans and sweeping curves.

Favourites

A single gen: a sparse dotted line climbing from the left edge into two broad arcs, with loose dashes trailing down the left side.

A single gen: short horizontal dashes scattered thinly at the top, crowding into overlapping arcs at the bottom of the frame.

A single gen: an almost empty frame, with a faint band of dashes just below the middle and three stray marks above it.

A single gen: the top half empty, the bottom half filled with dashes and dotted arcs that start at a hard horizon across the middle.

A single gen: dashes fanning out from a point on the left edge, like rays.

The files

I saved some of the recipes as I went. Six of them are in the fig-gen repo as Automator JSON, which you can load from Automator's settings with Import JSON. Do whatever you want with them.

Automator is gone now; its site survives in the Wayback Machine. The recipes in the repo are a record of how each gen was built rather than something you can still run, and the images below are what they made.