Vector illustration in Figma

This headline might seem a bit … strange? But then again, perhaps not. Figma is a pretty recent design tool, and is marketed and used as a software for designing & UX:ing web pages, apps etcetera. And, Figma does all of that very well.

So, what's with this page then? Perhaps I'm wrong assuming that 'noone think you can create illustrations/art/whatnot in Figma' (I know that isn't true), but anyway – here's my own story regarding all of the above.

In March 2020, I posted

this tweet.

Now, I normally don't get more feedback on my social media posts than the occational "sure man", or "great", or perhaps even one or two likes.

But this post got viewed more than 66 000 times. Like, what?! I also got a number of DM:s asking me if "I really did this in Figma" and "could you please make a tutorial on how to lorem ipsum".

All good for the egosystem® I guess, but I then thought – perhaps I should try to personally dive a bit deeper in creating vector artwork in this piece of software that really is aimed for web designers.

So, off for a vector journey.

But, what to draw? It need 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.

After a some evening sessions with the vector tool in Figma, I was finished with my own rendition of the Reason module. It's all vectors, apart from the wood texture for which I used a tiled bitmap (it felt ok to cheat a little). The design itself is a bit sloppy here and there, but as a practice piece it worked great.

If you're interested to get a copy of the illustration above, please feel free to download it from the Figma Community.

And, just to be clear – I take no credit at all in the original design of this piece of software. All rights of the name, design, functionality etc is owned by Reason Studios. All I did was to redraw a bitmapped screenshot I took from my own copy of Reason.

On to the next project!

Drag the slider in the middle of the image to see the vector outlines Vs finished design.

The logotype above was created by me first 3D-modelling the text, then rendering an image of it so that I got a reference image that had shiny reflections. Then, I started the tedious work of redrawing everything in Figma, adding vector paths, colouring them, adding layer blurs and whatnot.

So … what's a "Reko"? How should I know. It's just a fictional name I made up.

Then, put the thing in another thing

Below is another illustration I made just to see what strange device I could come up with while learning the vector tool(s). There's visual errors here and there, but as a whole I'm quite happy with the finish and overall look. And yes, it's 100% vectors. No bitmaps were harmed in the illustration process.

Anything else?

I messed around with a few more small creations, just because it was fun & good practice. However, time and inspiration has been quite low the past year due to wife's being sick in Covid, frustrating re-build of my house, lots of daytime work etc, so I haven't created anything more like the following examples over the past 7-8 months. Hopefully, it'll change some time in the future. 🙃