Everything Here Is Flat

Figma posted a showcase a while back: designers building illustrations out of vectors, inspired by the Figma logo. I wanted to try it, but not as a style exercise.

I started as a designer in Photoshop and Illustrator. Vectors in Illustrator are a fight. Masking, blur, noise, background blur, all of it costs more time than it should. Figma handles the same things better, and I wanted to find out how much better by giving it something hard to do.

One constraint: 2D shapes only. No 3D software, nothing rendered.

Everything I know about lighting, shadow and depth comes from working in 3D. The question was whether that knowledge transfers when the tools are gone. Can flat vectors read as dimensional if the light direction, the shadow falloff and the composition are right?

That is the whole project. Depth, lighting, composition, shadow, effects, and vector manipulation, with no renderer underneath.

I dropped the Figma logo onto a canvas at low opacity and sketched over it in Procreate, pulling references from Pinterest as I went.

The sketch had to be settled before any vector work started. Fixing composition later, in shapes, is far more expensive than fixing it in a drawing.

First element built, and the one that set the rules for everything after it.

Before any shape went down, I fixed the light source: top left. Every highlight and shadow in the entire piece answers to that decision.

I built one segment properly, with its highlight and its shadow, then duplicated and masked the rest. Detailing all of them by hand would have cost hours and stalled the project. Knowing when to stop detailing is part of the skill.

The reference was a black cat with white markings. I went orange instead, pulling from Figma’s own palette without arranging the colours the way the logo does.

It originally had a mouth. I removed it. The face reads better with less in it.

The fox needed hypnotic spiral eyes. Figma had no good way to make them.

I searched for spiral generator plugins. Almost everything was paid, none of them did what I needed, and not one had stroke taper, which was the actual thing the eyes required.

So, the illustration stopped and a different project started.

I used Figma’s beta AI agent to generate a base plugin and a UI. It worked, badly, with a lot of bugs, but it worked enough to keep the illustration moving while I built the real version. That mattered. Waiting for the finished tool would have killed the momentum on the artwork.

Then I read Figma’s plugin documentation properly before writing anything, went into Claude Code, and built the real plugin: custom CSS, my own theme, functions written rather than generated.

That became Whorl, a spiral generator with 4 algorithms and 7 stroke taper profiles. It is published on Figma Community and it is free. Nobody else needs to go looking for a taper option that does not exist.

The eyes in this illustration were made with it. Get the plugin.

The most aggressive shape language in the piece. Curves, teeth, and depth carried entirely by where the light falls.

Noise across the whole thing. Figma’s noise is good, and it does more for the illusion of a real surface than any amount of extra detail.

The hardest one, and the problem was perspective.

Figma cannot skew a shape natively. There is no equivalent to Illustrator’s free transform. I used a skew plugin to push the blocks into the right angles, then built the form out from there: block out first, shadows and highlights second, noise last. The front sections came from unions and subtractions rather than drawn shapes.

It sat there flat and matte and it was fine, but fine was not what I wanted. Figma’s background blur is one of the best effects in the software, so the ghost became glass instead.

That decision cost more than it saved. Glass shows its own interior, so I had to build what was inside it and fake the physics by hand: refraction, dispersion, an index of refraction that reads as correct even though nothing here is being calculated. A flat ghost needs no inside. A glass one needs all of it.

Block lines finished it, cutting the form into readable sections.

[IMAGE PLACEHOLDER: Green Man Off Duty, final and dot matrix grid]

A pedestrian crossing signal with a laughing face where the walking man should be, and the dot matrix got built the long way for a reason.

Figma can generate a pattern from a single shape in the fill options, which sounds like exactly the tool for this. It is not. A pattern made that way behaves as one shape with rasterized tiles, so there is no putting an image inside it afterwards, which was the entire point.

So, I placed the shapes and spaced them into a grid by hand. Scaled it, flattened it, outlined the strokes and union the whole thing into a single vector, which is what makes it usable as a mask.

The long way is sometimes the only way that stays editable.

It finished as a wallpaper, downloadable, which was never the plan when it started.

I direct across 3D, motion and brand. No single tool defines the work, and this is the argument for that.

Nothing here came from software I use every day. The lighting knowledge did, the composition sense did, the eye for where a shadow has to land did. All of that came with me and none of it needed the renderer.

That is the case for trying everything. Sketch it, draw it, build the tool if the tool does not exist.

Your tools are not your ceiling. They are just where you happened to learn.