Illustrating in Figma
Tips & Tricks and the Tale of a Puppy and a Chameleon
Intro
My cursor moves over the coordinates X:316 and Y:270. With the sound of what feels like the five thousandth click of the night, I draw the last vertex. The vector is complete and the area fills green within the blink of an eye. It’s a light green that blends well with the shades of greens and blues of the rest of the low-poly chameleon I had drawn. Satisfied, I zoom out to admire my creation and lose myself in its entirety for a few seconds.
Then I remember what made me turn from a UX designer to an amateur illustrator. I look down at my lap, where our 10-week-old puppy has made herself comfortable. She’s sleeping quietly, and only occasionally demands my attention in the form of a light head scratch. I’m happy to follow that. Not only is she the cutest (and also bestest!) little doggo ever, but thanks to her, I took a few weeks off from work. To have time for her, and to give her and me a smooth start into our 4-paw 2-feet relationship.
In my preparations to become a dog father (not related to The Godfather), I found out that puppies sleep a lot. No, like really a lot. 22 hours a day isn’t even a real challenge! Therefore, I knew I would have a lot of free time on my hands to invest in a topic that I have always wanted to learn more about: Illustrating in Figma. So I set myself the goal to dive deeper into the art (and science) of creating illustrations with my daily design tool.
And so I did when the time came. Our new family member settled in, and soon established her daily routine of playing, eating, and most importantly, taking many extensive naps. I gladly used this free time to watch tutorials, read articles and think about how to put my newly learned design skills to work.
I’ve been a UX Designer at an international digital insurance for a few years now. Our team in Europe has a chameleon as our internal mascot for fun. And in the spirit of animals, I thought what better than to draw our cross-eyed friend ‘Cam’ in many different styles in Figma? This would give me a meaningful goal to work towards. Learning by doing along the way, and perhaps creating some usable assets for our company.
I didn’t have to think long about what tool to be using, it had to be Figma. In my life as a UX Designer, Figma is my daily driver. I use it all the time to create hi-fi design references, prototypes and so on. And I’m a huge fan of it. Now I learned that Figma truly is a blessing, not only for designing websites and apps but also for illustrating. It provides you with all the basic tools you need to turn your imagination into fantastic-looking pixels. And with a few tips along the way, your illustrations will turn out even better, and your experience will be even more enjoyable. So sit back, make your puppy comfortable and let’s dive right in.
Here are 6 tips to create illustrations in Figma:
1. Cut corners
Too long; didn’t read: Drawing nicely rounded shapes in Figma can be hard, but it doesn’t have to be. When creating smooth curves, editing the corner radius is your best friend. First, draw your shape with sharp corners, and only then make it round by adjusting the corner radii.
Task: When drawing rounded shapes such as waves or droplets, it’s tempting to try to draw each curve perfectly as you go. You select the pen tool and create a new vertex by clicking. But because you want to achieve vector perfection, you don’t let go immediately. Instead, you hold your left mouse button and start dragging in an attempt to create a good curve. It takes a few seconds, and once you are satisfied, you continue to the next point with the same procedure: click, drag, drag a bit more, and continue. After a few repetitions come the mandatory cmd ‘Z’ cmd ‘Z’. We’ve all been there. You undo what you did because it just doesn’t look as good as you aimed for. Not natural, not smooth, not consistent, simply not right.
Tip: Creating smooth curves doesn’t need to be a hassle. For easier shapes such as the droplets you see on our friend Cam, I found a technique to be much more effective than attempting to be a digital Davinci. First, you draw a vector with sharp corners. This means no dragging, only clicking. Once you’re done with your shape in all its edgy glory, you can either select all your corners at once or go through them one by one and tweak each radius to your liking. Additionally, you can press cmd to use the Bend tool, which gives you even more flexibility. I also found this technique to work well for other objects such as waves and clouds. And there you have it. My first tip and possibly the only case where cutting corners is a good thing.
Figma help: Adjust corner radius and smoothing
2. Scale wisely
TL;DR: Use Scale ‘K’ instead of Move ‘M’ to scale objects while maintaining their proportions.
Task: With some of my illustrations, I found myself copy-pasting and scaling a bunch of elements such as the bubbles for the soap-Cam above. Copy and paste, press ‘V’, grab a corner and scale the object while holding shift. The problem with that approach is that the scaled version often will look off; with lines too thick or thin, corner radii looking wrong and shadows out of scale. That’s because the values defining these attributes will remain unchanged, even when scaling the element it belongs to. Let’s take a square as an example: A corner radius of 4 will remain 4 no matter how big or small the object gets scaled, and so on.
Tip: The Scale tool can help you solve this problem. Once you’ve selected the object to resize, press ‘K’ on your keyboard, drag, and there you have it. With this method, you can scale your designs and not worry about messing things up. Everything scales perfectly and keeps its proportions. That’s because this tool preserves aspect ratios and ignores any constraints of nested layers. With no need to rework blurs, lines, radii, and shadows will always look right, no matter how big or small you make the object.
With this trick up my digital sleeve, I now can make sure that my illustrations are just as scalable as our insurance products.
Figma help: Resize layers with the scale tool
3. Wear masks
TL;DR: Masks in Figma are great to reveal specific areas of objects while concealing the rest.
Task: While working on different illustrations of Cam, the basic shape often remained intact and served as a guide for all the colours and shapes. I wanted everything that I drew to be automatically cut off by the outline rather than having to manually fit every shape I drew.
Tip: Keeping away from making a health-related joke, masks are the solution here once again. Like many other design tools, they act as a sort of picture frame with an opening for you to place anything inside. The great thing is that this process is completely non-destructive. Just as with a photograph that you place inside a frame, the concealed part of masked layers is not cut or modified but only hidden. Even parts that are not visible are still there and can be edited and moved normally.
Find more details on how to work with masks in the Figma help: Masks
A similar non-destructive way to combine a set of shapes is with Boolean Operations. There are four formulas: Union, Subtract, Intersect, and Exclude. Booleans are just as powerful and useful as masks and have made my illustration attempts much more convenient.
Figma help: Boolean Operations
4. Paint buckets
TL;DR: When in Vector Mode, you can use the Paint Bucket ‘B’ tool to fill or remove individual fills of any shape. And the coolest part is that you can colour each area separately.
Task: When drawing Low-Poly-Cam, drawing individual triangles and making sure they all meet perfectly in the corners would have been a hassle. I wanted all the triangles to be part of one object to guarantee pixel perfection and to keep my layers clean. At first, I thought this was impossible, as I wanted to give every triangle a slightly different gradient. I feared that there wouldn’t be any way around using masks or creating separate shapes, but I was positively surprised by this quality of life feature of Figma.
Tip: In Figma, you can create complex vector shapes by drawing paths with the Pen ‘P’ or by modifying the anchor points of simple shapes such as a Rectangle ‘R’. To edit, you need to switch into Vector mode by pressing ‘Enter’ on your keyboard, clicking ‘Edit object’ in the top tool panel or simply double-clicking.
Once you have a shape that is closed in itself — the simplest example would be the triangle — you can decide if you want it to have a fill or not. After pressing ‘B’ for the Bucket tool, you can hover over any area and toggle between filled or empty. I found this feature especially useful when doing complex unions to tidy up my vectors. However amazing this was, it was only a drop in the (paint) bucket.
What made the ocean’s level rise was the revelation that I could edit the fill of each triangle individually, while remaining part of the same object. It allowed me to give each a unique linear gradient with custom colours and directions. By doing this, Cam was able to show off his power to change colours and adapt to any environment.
Figma help: Vector networks
5. Shadows and gradients
TL;DR: Although Figma does not have any 3D capabilities, you can fool the eye and suggest three dimensions by using specific shadowing and gradient techniques.
Task: 3D is one of the most popular UI design trends of 2022. The style has been around for years, but this year it can be found even more often. With 3D elements, you can create wow effects and add new aesthetic vibes to your designs. You might want to design a 3-dimensional graphic in Figma to use as a hero image, to show off your product, or for small layout elements. While there are plenty of powerful programs that create “true” 3D graphics, Figma is not one of them. This means that you can’t achieve a 3-dimensional look the traditional way; you cannot sculpt, texture, set up light sources or use a virtual camera to capture your image, as you would in conventional software. The good news is, there are ways to make your graphics look and feel more than just flat, and I’m about to tell you how.
Tip: Following the principle “Fake it till you make it” I also set out to fake Cam into our 3-dimensional world.
Using gradients and shadows, you can simulate lights and shadows to create the illusion of 3-dimensionality. Lighting after all is one of the most critical elements of any visual representation that the human eye can perceive.
To achieve this effect you can add layers with a darker colour and set them to the Multiply blend mode to create the effect of a shadow. Here you can both work with stacking many simple shapes such as ovals or work with one complex vector shape that you blur. You can also play around with opacity. The same works to create highlights by using lighter colours and a blend mode such as Lighten.
By doing this, you can create depth and separation between the objects, and suggest their shape by the way they appear to interact with the made-up light source.
Using this method, I was able to give Cam dimension and bring him one step closer to the 3D realm in a world of 2D pixels.
6. Embrace limitations
TL;DR: Figma has its limitations when it comes to creating elaborate illustrations. But that’s not only bad. Embrace these limitations and you’ll find that you can create great work.
Task: As opposed to Illustrator or Procreate, Figma isn’t a traditional illustration program. It is a vector design tool with a limited number of features dedicated to illustrating. Because of this I sometimes found it challenging to achieve the look I had in mind. I felt that Figma wasn’t designed primarily for creating illustrations, whether it was due to its level of precision or control. For example, you won’t be drawing anything by hand. There aren’t any options for brushes or to free-draw by hand with pressure-sensitive line widths, so you can keep your graphic tablet and stylus tucked away. You won’t be doing any post-processing either, and miss smarter functionalities such as a Wand tool or the option to magically smooth out curves.
Tip: The term “limitation” has a somewhat negative connotation. As a UX designer, you learn that it’s not all bad. Contrary to popular belief, limitations can be beneficial to you. They act as helpful starting points that bring focus and clarity to the design process. Knowing what you can’t do also helps you determine what you can do.
I am convinced that limitations can improve the design process and that creativity often thrives off of them, and the same is true for Figma. Despite all its limitations, it remains an effective tool for creating illustrations for many reasons.
As it is vector-based, you can scale your illustrations to any size without losing quality. This makes it perfect for creating illustrations for both print and digital media. It still has a wide range of tools as well. From basic shapes to more advanced tools, you will find everything you need to release your inner creativity. Then it’s collaborative, allowing you to easily work with other designers on the same illustrations simultaneously. Finally, there are many plugins available that extend Figma’s capabilities even further.
Are you convinced yet that limitations are not only bad? If not, here’s more proof. The consequence of having to stay home to take care of a 2-kilo overenergetic biting machine you have in front of you.
Conclusion
All in all, Figma is a great tool for creating illustrations. When you keep in mind that it is free to use, it’s easy to forgive that it lacks features from other software such as built-in brushes or 3D capabilities.
And with the tips mentioned above, I hope that you will also have an easy time being creative. No matter if you are familiar with Figma from your daily work or not, give it a try and create beautiful illustrations! And by the way, you don’t need a puppy or a chameleon, but it sure helps!
