February 1, 2022
In January of 2022 I wanted to freshen up my rusty art direction skills and design 28 beverage cans in 28 days. I had done a lot of packaging when I was younger, but I’ve been working mostly in education and Web development for the last 15 years. The rules of this challenge were simple. Each day I would write a short creative brief or set some constraints about fonts, colors, or content. I would make a cursory statement on branding guidelines, quickly mockup a logo, scour the internet for a few free images, and only need to design the front of the can. While it’s true that there was no client feedback, I tried to stay within the rules at all times and keep myself honest. To make things more interesting, I decided to use only Figma as my primary design tool, without rushing back to Adobe Photoshop and Illustrator for those quick fixes so that many of have come to take for granted in our workflow. I was hoping that the pressure of a daily challenge would mimic a real world work situation and I would be faced with difficult decisions.
Spoiler alert: While I had heard about Figma’s rich plugin ecosystem, and assumed that I would find a plugin for every situation, I came up short. I did find some excellent plugins, but I occasionally found myself going back to my old habits in Photoshop and Illustrator. Nir Eyal wrote in his excellent book, Hooked, that our goal as UX designers is to understand people so that we can make habit forming products. I now have a deeper understanding of how smart the people at Adobe are and how difficult it would be to give up my Creative Cloud subscription. Specifically, Figma’s selection tools aren’t as powerful as Adobe’s and features like the Magic Wand, the Lasso tool, and the Clone Stamp tool are really essential. While Figma’s pen tool is pretty impressive, and deserves its own article, Adobe’s is still more flexible and versatile and I can quickly draw a bezier path around an object in either application.
In the program where I teach, I frequently tease my students that Illustrator’s Live Trace feature is for lazy cheaters, but I quickly realized that I was one of those cheaters. When you’re rushing to meet a deadline, honor flies out the window and a quick fix is very welcome.
So here are some of the lessons I learned about Figma (as well as myself), some plugins I discovered along the way, and why I’m not letting go of Adobe just yet.
Lesson number 1: Figma is still blazingly fast. If you would have told me 5 years ago that I would be designing collaboratively, in the browser, and feeling fast and fluid and absolutely loving it, I wouldn’t have believed you. Figma just feels so efficient, so smooth, so intuitive. Perhaps my experience is cumulative, or my workflow has matured, but I never felt this efficient in Sketch. Figma’s inherent structure of Interactive Components, Variants, and Auto-Layout make designing a breeze.
Lesson number 2: Figma’s answer to Illustrator’s Pathfinder palette (for merging or dividing shapes) is called the ‘Boolean’ tool. It’s a small icon at the top center of the workspace and it is NON-destructive. This means that after I choose ‘Union’, ‘Subtract’, ‘Intersect’, or ‘Exclude’ with two shapes, they remain true to their original contents, unless I ‘Flatten’ them. The same is true for its Crop and Mask tools. After cropping or masking, the original image is still hiding underneath in its entirety and can be dragged around or repositioned.
Lesson number 3: Figma’s Pen tool takes a little getting used to. While I thought I had mastered bezier curves years ago, I wasn’t as nimble as I had hoped. Adobe makes this easier with what I’ll call all it’s little ‘sub-pen’ tools such as those for adding or subtracting vector points or Illustrator’s separation between its Black and White arrows tools for direct selection versus sub-selection. Figma just has a pen tool and you need to tinker with it a bit until you learn to manipulate points and handles. Upon initiation, it adds another sub tool which looks like a curved handle called the Bend tool which is for pushing and pulling sections of the path. There is also a minimal diamond shaped icon which is supposed to be a paint bucket (I didn’t get it) which acts as a fill tool. Where Figma really shines is in its new concept called ‘Vector Networks’. While most vector drawing tools have one continuous path or loop of points, Figma has a network of points that converge on its fill but can be subdivided into separate regions either filled or not. Read more about them here.
Lesson number 4: Figma needs a better way to browse or preview fonts. While having hundreds of free Google fonts at your disposal might sound attractive to new designers, most seasoned designers rely on a small list of reliable favorites. Figma’s font picker has no inherent preview so you’ll be staring at a list of font names, most of which you’ve never heard of before. Those of us who’ve been working in screen design for the last few years will have no trouble finding Open Sans or Roboto, but if you’re looking for a display face for art direction, you’ll need to remember your favorites. Even the two plugins I discovered, ‘Better Font Picker’ and ‘Font Preview’ are clunky and unreliable. I found myself going to the actual Google Fonts website, browsing for a font I liked, and returning to Figma and loading it. However, once I found a font I liked, saving it as a type style was easy and intuitive.
Lesson number 5: Figma’s built-in gradients and blending modes are a breeze to use…if you can find them. Every shape in Figma can be filled, even an image is a ‘fill’ (or a background image to those of you who know css). It isn’t until you open this fill section that you discover all the different gradient options: linear, radial, diamond, and angular, as well as a tiny drop icon to indicate blending modes. All of these work like you would expect them to from your previous design tools and I was quickly using them with great results.
On to the Plugins.
Obviously, none of these cans would have been possible without the Vectary 3D plugin. Vectary is an online, browser-based 3D editor which is fast and intuitive. After installing the plugin, you can browse through 30+ pre-built models, load a frame of specified dimensions, add your design to that frame and quickly wrap it around the 3D object. You can rotate the object in 3D space, adjust its lighting, add a small shadow, and quickly render it as a (gigantic) png image. This process was so much faster and intuitive than tools like Blender. Even a Figma beginner could learn it in a few minutes.
Since I wasn’t nimble enough to manually draw a mask with Figma’s pen tool, I quickly became reliant on ‘Image Tracer’ and ‘Icons 8 Background Remover’. There are several other background removers, but this is the one I liked best. Both of these are good, but not as powerful as their Adobe counterparts, and at times when I was feeling rushed or frustrated, I reverted to my old habits.
Fast and Fluid Workflow
Each day I would choose a category (craft beer, cold brew coffee, etc), survey the competition, and write my assignment for the day. Some days I would finish in as little as 20 minutes and on others I would build multiple iterations and spend over an hour. However, I always found it was really easy to make a mood board and fill it with images by copying and pasting directly from the browser. From there I was able to easily eyedropper a few colors and save them as swatches (or color styles in Figma parlance).
I would then select a few fonts, vary the weights and sizes and save them as type styles. I would mock up a few logos (or word marks, to be precise), convert them to Components and combine them as Variants. This way it was really easy to toggle back and forth between different ideas without hunting for some additional element.
While manipulating individual images was occasionally time consuming, I was easily able to assemble the required cast of characters for the ‘front of can’ view with Figma’s Auto-Layout feature. The front of the can isn’t that different from a UI card and I was easily able to adjust spacing and padding until it looked ‘just right’. At times I would duplicate the entire Vectary frame and change a color and a flavor name and add a new illustration to quickly build out 2 or 3 additional flavors to create an entire product line. Sometimes I would post a rough draft to instagram for crowd sourced feedback and post a more polished version later that day.
To be clear, these experiments were never intended for print, and I never designed the back of the can. This was an exercise in branding and art direction and how I could use Figma as my primary tool to convey my design ideas to clients. Now that I have a procedural workflow in place, I’m looking forward to more ‘designing in the browser’ and teaching clients how to add comments to a Figma file. While I’m still a little dependent on Adobe’s powerful features, I’m really excited about how much I can do with Figma. If you’d like to see all of the cans in one place (actually a filtered collection of the best) you can view them here.
I offer training in Figma, Webflow, and Design Systems. If you’re interested in a custom workshop for your team, feel free to contact me at info@fadimantium.com