10 Reasons We Switched to Figma For Icon Design
- Written:
- on
Bright light! Bright light!
We’ve tried keeping them out of sunlight, never giving them water or feeding them after midnight. Still, somehow the icon count at Font Awesome continues multiplying with new styles and categories.
With these Gremlin-esque changes, managing our design workflow and asset library has become more cumbersome, while the tools we’ve traditionally used to create icons haven’t kept pace.
To help streamline our process, we recently switched to Figma to design and manage our icons and wanted to share ten reasons why.
Finding the Right Design Software For Our Needs
The design team here at Font Awesome started using Figma a couple of years ago to create visual assets and design mockups and prototypes. We were drawn in by its ease of use and its collaborative features.
The design direction of our new version 6 site was created and iterated in Figma, and we even built a simple icon component that has made integrating icons a breeze.
And as we spent more and more of our time designing in Figma, I started wondering if we could move all of our design work into the program, icons included. Figma’s interface is both intuitive and powerful, and its focus on collaboration has made working on a fully remote design team a non-issue.
After talking in-depth with some amazing and talented icon designers who extolled Figma’s virtues, I spent time putting Figma to the test and began weighing its pros and cons regarding icon design. The ah-ha moment came when I realized we could keep icons completely editable while still exporting simple, usable SVGs. On top of that, Figma’s built-in tools feel almost custom-built for icon creation.
For these reasons, and those listed below, we’ve decided to make the complete transition to using Figma for our icon creation at Font Awesome.
The Top 10 Reasons We Moved our Icon Design Work to Figma
1. Boolean operations create compound shapes while remaining editable.
Most vector editing tools include some variation of this general toolset (in Illustrator, you can find them in the Pathfinder panel), and their functions are all pretty similar. Grab a few elements and combine them, subtract them, intersect them, etc. Simply put, it’s a way to take multiple elements and merge them into one.
Unlike other programs, when you apply a boolean operation to a set of shapes in Figma, it’s non-destructive. Combined selections become a boolean group that is treated as a compound shape (and can be exported as such) while remaining completely editable.
Not only that, but you can combine both shapes and stroked paths in a boolean group and still export a single shape layer. This feature alone is worth the price of admission. It allows you to benefit from an outlined stroke without, ahem, having to outline the stroke.
2. Vector paths can have independent end caps, and corner joins.
Another area Figma shines in is its ability to assign unique endpoints and corners to vector paths. When constructing an icon, these parameters give you a lot of freedom over individual elements by allowing you to mix-n-match stroke properties.
One endpoint of a path can have a rounded cap, while the other end is squared or not capped at all. One corner can be sharp, while another is mitered. It’s like dogs and cats living together. But instead of mass hysteria, there’s perfect harmony.
3. Frames are styleable and nestable.
In Figma, frames are essentially powerful groups. They’re similar to the more traditional “artboard” in many ways, but in Figma, you can nest frames within other frames. When it comes to icon design, this is useful for organization and presentation.
Frames in Figma also have the added benefit of being styleable. Add strokes, fills, and rounded corners to your frames.
4. Components make reusing design elements a breeze.
Components are reusable design elements you can share across files and projects. Make changes to the main component, and those changes get reflected across any instances of said component.
What makes components powerful in icon design is that a component of a boolean group still acts like a single shape layer. So, you can combine components with other elements using boolean operations, which is especially helpful when creating different but similar versions of an icon.
5. Variants create alternate versions of components.
Component variants are a relatively new feature to Figma that allows you to group similar components. At Font Awesome, we’ve started using component variants to define reusable modifying elements for our icons.
For example, an icon modifier that we often use is a little circle with a plus. We need to use that modifier with multiple icons and across our different styles. A component variant means we can store those variations together in a single place. And if we ever need to update the component, the changes are reflected across all icons.
6. Snap to grid makes me a better icon designer.
As an icon designer, my very best friend is the pixel grid. (No offense, bézier curves. We’re still TOTALLY buds.) In design programs, the ability to “snap to grid” makes all the difference. It helps to ensure consistency and applies helpful constraints that enhance creativity.
When drawing an object or line, the endpoints of your object will gently snap to grid coordinates to ensure elements remain pixel-perfect.
The way Figma handles snapping to the grid is some of the best we’ve seen. Most programs will snap solely to grid points at 1-pixel increments. By default, Figma snaps to ½ pixel increments, which is YUGE. It allows you to be much more intentional with object placement.
Figma assumes you want things to line up with the grid, and it’s right on the money with this assumption.
7. Nudge amounts are customizable.
When you have an object or point selected and tap on one of the arrow keys, the nudge amount is how far the selected element will move. The default nudge amount is 1 pixel (with a “big” nudge — shift + arrow key — set to 10 pixels).
I have my default nudge amount set to ¼ pixel and my big nudge (shift + arrow key) set to 1 pixel, which is amazingly helpful when designing teeny-tiny icons.
8. Vector networks are the new black.
What follows is a straight cut-and-paste from the Figma documentation because they explain it better than I ever could:
Vector networks are one of the most unique features in Figma. Most pen tools draw paths in a loop with a defined direction, always wanting to reconnect to their original point. Vector networks do not have a direction and can fork off in different directions without requiring a separate path object to be created. Complex objects can then be created within the same object and with the same properties much faster than they could be drawn using traditional vector path tools.
9. Plugins add new functionality to Figma.
If a feature isn’t available in Figma, or if you have a unique use-case, there’s likely a plugin that exists to help out your workflow. And if not, you can always build one yourself.
Some of the plugins we’ve been using recently (and which helped with our initial switch) are:
10. Commenting makes feedback easier.
The ability to leave comments directly in a design file has been a huge time saver for our team and has helped to destigmatize the magical world of icon design.
Before Figma, I would toil away in the darkness, concocting new icons using eye of newt and toe of frog, wool of bat, and tongue of dog while occasionally posting screenshots of in-progress icon design work. Now, when I ask for feedback, comments can be made (and responded to) in the same place the work is happening.
I’m a big believer that it’s not about the tools you use to create. Whatever works for you works for you. But by moving icon design to Figma, working has certainly been a lot more fun.
Do you use Figma for design work? What are some of the features you like best? Let us know on Twitter!
In the meantime, check out our official icon component that uses the Font Awesome Pro OTF files and ligatures to make adding icons (and swapping styles) simple and easy.
Check out the component