Illustration in Figma
Figma is a web‑design tool. So naturally, I used it to draw vector illustrations.
Figma is a relatively recent design tool, marketed and used as software for designing and UX‑ing web pages, apps, etcetera. And Figma does all of that very well. But — can you use it as a proper vector illustration tool? Turns out, yes. Here’s my story about finding that out the hard way.
It all started with a tweet
In March 2020, I posted a tweet showing a knob I’d drawn in Figma. I usually don’t get much feedback on social posts — the occasional “sure man,” “great,” maybe a like or two.
But this one was viewed more than 66,000 times. Like, what?! I also received several DMs asking me if “you really did this in Figma” and if “could you please make a tutorial on how to lorem ipsum”.
It’s all good for the egosystem®, I guess, but I then thought — perhaps I should dive a bit deeper into creating vector artwork in this piece of software that’s really aimed at web designers.
So, off for a vector journey.
But, what to draw?
It needs to be something that allows for some level of mimicking a real‑world object. A cat? No. A car? No, I don’t like cats nor cars.
Perhaps a pseudo‑real object? Like, a digital something that is interactive? Perhaps I just should try to reverse‑engineer the visual look of a music creation tool. Why not try to get going on one of the Reason Studios modules? And so I did.
A rack module, redrawn
After a few evening sessions with Figma, I had my own rendition of the Reason MClass module. It’s all vectors — apart from the wood texture, for which I used a tiled bitmap. Cheating a little felt ok.
If you’re interested in getting a copy of the illustration above, feel free to download it from the Figma Community. And to be clear — I take no credit for the original design. Reason Studios owns all rights to the name, design and functionality.
On to the next project
Drag the slider in the middle of the image to see the vector outlines vs. the finished design.
The image above was created by first 3D‑modelling the text, then rendering a reference image with shiny reflections. After that, the tedious work of redrawing everything in Figma began — adding vector paths, colouring them, layering blurs, and whatnot.
But what’s a “Reko”? How should I know. It’s just a fictional name I made up.
Then, put the thing in another thing
Another illustration showing what fictional device the Reko logo could live on. Visual errors here and there, but overall I’m pretty happy with the finish. 100% vectors — no bitmaps were harmed.
Anything else?
A few more small creations, just for fun and practice. Then life got in the way — my wife’s illness, a frustrating house rebuild, lots of day work — so the illustration output slowed down. Hopefully picks up again sometime. 🙃
