PearSonalities — Creating an NFT collection in Figma
A short introduction — What are PearSonalities?
Approximately three years ago I started making a few illustrations of funny-looking pears, as a fun exercise to improve my rendering skills in Photoshop.
Are you wondering why I chose pears? Well, I guess I liked the way they looked and I thought “wouldn’t it be cool if they had facial expressions?”
While I created the original four pears using Adobe Photoshop, this time I wanted to create them in a vector format.
Why Figma?
There are three main reasons why I chose Figma.
Firstly, I am used to doing all of my vector illustrations using Adobe Illustrator. However, I have also grown accustomed to using Figma, since I am using it every day, as part of my work routine (mostly for things that are more UI related). While working on this project, I wanted to see how far I could get using only Figma. It was also interesting to drill deeper and explore Figma’s vector illustration abilities. I wonder: could I use Figma to replace Adobe Illustrator?
Secondly, What better way is there to make really great mistakes and learn from them while discovering new helpful plugins and techniques that may make my workflow even better and faster as well? It’s a win-win, and it’s fun!
Thirdly, IT IS FREE! While Figma does offer several paid plans, its free version was sufficient for this test.
About the process
Smart preparation (sketching):
Before jumping straight into Figma and wasting time doing trials and errors, I created a few rough sketches on my iPad Pro using Procreate (see Figure 1 below) tweaking and adjusting until I found the right design to start with.
Figure 1 — The pear rough sketch created using Procreate
Elements built in Figma
Once I finished the sketch phase, I imported all of the different elements into Figma, and divided each of them into three main categories: stems, eyes, and mouths.
Here are the first rough sketches imported into Figma (Figure 2).
Element A: The stems
Element B: The eyes
Element C: the mouths
Figure 2 — The different facial parts imported into Figma
After I aligned them, I locked the layers and started working on each of the elements separately.
While I was working on the first designs, I created several local styles that I used to enable a faster illustration process, while making things more consistent and easier for me to repeat as well. These included the basic colors, gradients, and effects.
It’s time to build some components!
The pear body
To start, I decided to go with a frame size of 1000x1000 pixels, since it is not too small or too big.
I created the basic body silhouette using the pen tool, tweaking it until I managed to make a normal-looking shape on one of the sides. Next, I created a rectangle to cover the half I did not like as much and used it to subtract it. Then, I duplicated the remaining side, flipped it, moved it until it looked like a perfect mirror image, and combined the two halves together, using union selection that flattened it to a single shape. I also tweaked the shape a little to achieve a less symmetrical and more organic look.
Next, I also had to give it some value.
To achieve this, I used mainly gradients (some with transparency, some without), both on the inner part and for the outer rim (a lighter color helped to make it look as if there’s a rim light). I also added small details, on which I applied a blur effect (see Figure 3).
Figure 3 — The pear body in normal mode (on the left) and outline mode (on the right)
The pear stem
For the stems I tried to keep it very simple, adding a cast shadow that can be duplicated and used for all of the other stem versions I will build later on.
To achieve the gentle, soft color changes, I used a minimal blur effect and then duplicated the main silhouette of the stem shape as a mask to prevent it from “bleeding” outside the shape (see Figure 4).
Figure 4 — The stem in normal mode (on the left) and outline mode (on the right)
The pear eyes
Designing the eyes was a very similar process to designing the stem. Having many of the elements inside groups, that were nested within more groups.
Since the eyes are (usually) symmetrical, I saved time and work by creating one side only. I later duplicated, flipped, and grouped it into a new set of eyes, leaving only a few adjustments for elements, like the pupil and iris to fit the other side. For more eye sets I duplicated the entire set and made small changes, such as changing the eye colors, the direction to where they were looking, shifting the height of the eyebrows to change the expression, etc (see Figure 5).
Figure 5 — The eyes in normal mode (on the left) and in outline mode (on the right)
Tricky strokes
I tried achieving different stroke widths to my lines, a capability that can be achieved in Adobe Illustrator (simply by clicking Shift+W using the Width Tool). I was able to do this in Figma using a plugin named Variable-Width Stroke by Evan Wallace. It’s a really great plugin! This plugin allows to change the width of the stroke, and to edit the stroke path and its points.
A side note
I would like to point out that at this point the number of layers I had was getting really large, very quickly. So I was using “Resource use” to keep track of things before they started to get out of hand. Do keep in mind that even though you do not see all the layers, Figma still needs to calculate them, and it takes its toll on the memory you are using (see Figure 6).
Figure 6 — The Resource use panel
The pear mouths
Working on the mouth shapes was more of the same, using more gradients and even more masks for the teeth and tongue (see Figure 7).
Figure 7 — The mouth in normal mode (on the left) and in outline mode (on the right)
Setting up the components and variants
Now that I had enough elements to create a variety of mixed images, I made sure that each of the segments is sitting inside a fixed-sized frame. I did this to avoid any shift in the location of the elements when selecting a different variant. After setting the frame for each element, I turned them into components, and then set each set of the components as variants.
At first, I thought it would be enough to work with only three elements as I started. However, I discovered quite quickly that it will not be interesting enough visually. There for I decided to add several colored backgrounds, more eye variants, and freckles to the PearSonality (see figure 8).
Figure 8 — The variants set
Batch exporting
This part was the easiest since I already had everything ready. To export each of the image options, I used a plugin named: NFT Creator Unlimited by O, which worked like magic!
All I had to do is to set all of the elements in their right place and order inside of a single frame: the background, the pear’s body (this was the only component I didn’t have as a variant), then the eyes, freckles, mouth and the stem.
Another thing I really liked about this plugin is that it automatically calculated and presented how many options can be potentially created (in this case it turned out to be 900 different sets). To do this, I had to choose the number of images I would like to generate, and click the button… and just like that — I was done!
These are the final results with all of the potential options for every variant and component (see Figure 9). Pretty cool, right?
Figure 9 — This is what 900 PearSonalities look like!
To sum up
Figma is a great tool for creating these kinds of illustrations but since it is a web-based app, I wouldn’t use it for super heavy graphics — beacuse it does have its limits.
Sure, It doesn’t have all the bells and whistles Adobe Illustrator has, but it does not pretend to be its replacement, so If you need to create something simple in vector format, it just might be a good solution for you too.
I learned quite a lot from this process, especially how to use masks more efficiently in Figma, while also having tons of fun!
Thanks!
Special acknowledgment
I would like to give a special thanks to Ido Zaifman and Miki Padova, for their great input and support in writing this article. And, to my wife and daughters for inspiring me to create and keep inventing interesting characters.
Please feel free to contact me if you have any questions or just to say hi :)
https://www.linkedin.com/in/zivariely/
