Anyone with minimal experience organizing components in Figma knows that even in small systems there is no way to go without Figma variants. Besides being structurally beautiful and reducing the number of components, it also speeds up the customization of child components and makes it easier to find the right component. In a word, it is extremely practical. But what about icons?
Anron Icons latest version with 5,000 icons in 6 styles has been completely rebuilt on variants. This happened almost 8 months ago as of this writing. The rebuilding process was not quick, it was that routine and monotonous work that you are afraid to undertake because it seems like it will drag on endlessly. In short, it wasn't quick and it wasn't easy.
But I have never once regretted that I invested time here. During these 8 months, I actively used my icons in private mode. It's clear to me now that organizing icon styles using variants is generally the best way to work with large icon sets in multiple styles, although it's not without downsides. In this article, I want to share my conclusions.
What are variants?
Let's first just make sure everyone understands what we're talking about in this post. Here's a pretty accurate definition from Figma's official documentation. By following this link, you will also be able to learn all the details of how variants work in Figma.
Variants allow you to group and organize similar components into a single container. This simplifies your component library and makes it easier for everyone to find what they need.
To put it more simply, variants are just a group of components that live in a single container. This is how the difference looks visually for icon components in different styles.
Let's look at a short list of all the pros and cons of this approach, and then look at the key ones in more detail.
Benefits of using Figma variants for icon styles
- Quickly switch between icon styles without using the search.
- Ability to mass switch between styles using Figma plugins.
- You can clearly see all available styles for each icon and easily edit all of them at once.
- Significantly reduced the number of icons in search results.
- Faster search due to reduced number of components.
- Ability to add extra tags to all variants of the icon at once to improve search.
- Reduces the risk of inconsistent naming of icons in different styles.
- Easy to scale, add new icon sizes in a single component container.
Don't worry if you don't understand everything from this list, we will now go into a more detailed exploration of these features.
Quickly switch between icon styles
Anron Icons currently has 5,000 icons / 6 styles. Imagine that you just want to change the style of 10 icons in some app sidebar from Line style to Filled. Without variants, you'll have to search through the 5,000 Figma components to simply change the style of the icons. And this will have to be done for each icon!
The more often you need to switch between icon styles, the more obvious the imperfections of the classic approach will be.
Using Figma variants allows you to switch between icon styles without using search. This is just a super feature that saves a lot of time and energy. This difference in performance will of course be even more noticeable when dealing with large Figma libraries with thousands of icons.
Group switching between icon styles
This is only possible when your icons are organized using variants. Imagine the same example with 10 icons in the sidebar. With the help of plugins such as Variant Switcher, you will be able to play with the design much more freely. Just select the icons you want to change and specify the required style.
Significantly reduced the number of icons in search results
If the icon styles are organized using variants, Figma shows only one icon style in the search results. Using variants in the latest version of Anron Icons with 6 icon styles reduced the number of components from 5000 to 850. This greatly reduces the cognitive load when using search.
It is also worth mentioning right away that if you replace components through the Properties Panel or Resources Panel (⇧ + I), the style of the icon will be preserved.
Easily add tags to improve search
Each component has a separate field where you can add additional information about the component. Figma also looks at this field when searching for components. In the case of icons, this is a good opportunity to add "tags" to improve search results.
With the classic approach with separate icon components, maintaining such a tagging system requires a lot of time and energy, as you have to manually duplicate the icon tags for each icon style. It's quite easy to get confused here, simply miss a tag, or make a mistake. While when using variants, you set tags on a single container with all icon styles at once, which makes the whole process much easier to keep track of.
Easy and convenient scaling
In addition to being able to keep icons in different styles in one container, you can always expand and add icons in additional sizes, such as 20px and 16px, when required.
Cons of using Figma variants and how to work around them
- Inability to search for an icon in the desired style — you will see only 1 style in the search, instead of all 6 at once.
- Complicated visual search for the desired icon on the canvas — instead of 1 icon, you will see 6 at once.
- Naming problems during export, because Figma uses the name of the variant by default, not the component.
After some research, it turned out that all these cons are quite easy to work around.
Regarding the first point, yes, you will not be able to search for an icon in the specific style right away, but in practice, it turned out to be not so important. If you replace components via the Properties Panel or Resources (⇧ + I), the style of the icon will be preserved.
Regarding the second and third points, the problem of visual search and export is easily solved if you just create a page with icons in a single style.
For example, the latest version of Anron Icons has a Variants page and an Instances page. The first page contains all the icon styles organized with variants, while the second one includes only Line icons.
In this way, we get rid of the issue of visual search on the canvas and also allow exporting icon variants with original component names.
It is worth noting that the Variant Switcher plugin allows you to quickly change the style of all icons on the Instances page at once. That is, if desired, you can easily make separate pages with different styles, or simply switch to the priority style on this page.
So, as it turned out, the specified cons of using Figma variants are not such an issue, because they have almost no effect on performance and are quite easy to get around.
Conclusions
Using Figma variants is the most efficient way to organize large icon sets in multiple styles. This saves a lot of time and energy when switching between styles and simplifies the search process. Simplifies the process of creating new icons, naming, documentation, and allows easy scaling.