Figma variants and other properties: 5 Cool hacks to create design library efficiently

Learn how to create a design library efficiently using Figma variants and other properties

Illustration by Rosina Esquivel

Do you want to make your Figma library design work 10x faster and much more efficient?

If yes, then you are at the right place.

A few months back my team made a decision to shift from Sketch to Figma. It was a big decision as we would need to transfer all the files to Figma along with design libraries. Many of us have never used advance Figma features before. We had to learn advance Figma features to shift to Figma. We spent many hours on it and now I can say it was worth shifting to Figma.

Using Figma advance features we are able to reduce design time by 58% while still maintaining the quality of the design as well as making the design library adaptable for future changes.

I’m writing this article to share my experience of leveraging advanced Figma features which has helped us to create a design library much more efficiently.

Hopefully, this article will help to avoid teething ache while getting started with Figma.

1. It started with “Why? “

When we decided to use Figma instead of Sketch I asked my mentor why do we need to shift to Figma?

His answer was if you have 2 different software Paint and Procreate Which one would you use? Figma has advance features like Auto layout, Variants and Properties which can make our work much more efficient.

Benefits of using Figma

2. How to shift from Sketch to Figma:

After porting Sketch files to Figma we noticed the components designed in the sketch have one extra layer created as shape/container.

In Figma we use frames instead of shapes/artboards because of this we decided to create components from scratch to avoid the usage of one extra layer ( Rectangle shapes/artboards).

3. Are we using Variants in the right way?

Most of us create variants of the same component which is included in the variant frame. The major Drawback of this approach is any style applied to the main component gets directly related to its variant properties.

What if we want to make changes in all variants in one go without making any changes in the first component which is included in the variant frame? if we use this style then we have to manually change/update the variants one by one.

The above example showcases the Wrong approach of creating variants

Hack 1: A better way of using variants is to keep the main/master component intact:

Create a duplicate of the master component and then create variants of its duplicate component. In this way, you would be calling out master components in your variants.

The above example showcases the best approach of creating variants.

Through this approach changes made in the main component will get applied to all variants.

In the above example, you will see that once the “Text” is changed in the main component it automatically updates the text in variants. Similarly, If we want to make other changes in all variants (i.e Colour, Font, Size etc) that can be applied by making a one-time change in the main/master component.

If you want to make any changes in specific variants you can apply the changes to the variants directly.

In the above example even though the colour of the pressed button is changed then also it doesn’t impact other variants. Properties of specific variants can be applied directly.

Since the main component does not come under the variant frame any changes applied to one variant do not impact other variants.

4. Are we making the best of the “Properties”?

Are you someone who is creating multiple variants same as multiple components? I have got other cool hacks for you!

Making the best of properties can help us to reduce the number of variants.

Figma offers the below properties to make our work easy.

1.Boolean

2.Text

3.Instance Swap

Hack 2: Use Boolean to show or hide the content of components.

As the name suggests Boolean property work in 0–1 manner.

Now Let's find out how to apply the Boolean property through the below example.

The above example depicts how to apply the boolean property. To create boolean property click on “+” icon beside the properties panel on the right side then select Boolean. Apply Boolean on layers to show or hide the layer.

The best approach of using the Boolean property while creating a Design library is to include all the content in the Master component and then apply the boolean property for the layers which we want to show or hide, in this way we will be able to show or hide layers for variants of the components as well.

While publishing the component you can hide .master/main component. Let’s see the below example to know how does work in real time.

Hack 3: Use Text Property:

Using the Text property you can add text to components from the right panel itself. Multiple clicks on the component are no longer required to go to text layers. In the case of complex components, you can use the nested instance to showcase all the properties on the right panel.

In the below example, we have used the Text property for Button Label similarly it can be used for paragraph text as well.

The above example depicts the process of applying the “text” property. Select the “Text” property by clicking on the “+” Icon beside the properties panel on the right side then add Name and Value. Apply created text property to content; once it gets applied the text value can be changed from the right side panel.

This feature makes collaboration with content designers much easier, as without touching the actual design then content can be changed from the right-side panel itself.

Hack 4: Use Instance swap:

This property allows us to swap different icons without creating variants for different icons/images. We can also select relevant icons in preferred values to directly swap them whenever required. It also helps to group relevant icons so that new designers are not exposed to other icons which are not relevant.

Let’s see the process of applying the Instance swap property in the below example.

The above example depicts the process of applying the Instance swap property and its usage. The “Instance swap” property can be selected after clicking on the “+” icon beside the properties panel.

Hack 5: Use Nested instances

In complex components, many components are grouped together.

While grouping them together make sure you use the original components or it’s variants instead of creating them from scratch so that changes made in the original components will get reflected in the complex components as well.

The above example showcases the usage of Nested Instances. Once the colour in the base master component is changed it gets changed across the other components wherever it is used as a nested instance.

Now let's find out the best practices to be followed while designing complex components:

1. While creating complex components it is better to show the properties of all the nested instances on the right-side panel upfront.

Let's see how to expose the properties of nested instances.

The above example depicts how to apply the Nested instances for complex components. To apply nested Instances click on “+” icon beside the properties panel and then select “Nested instance”. Select nested instances from the popup to expose properties.

In this way we don’t need to dig into nested components to find out the properties, this way showcase the properties of nested components upfront which increases transparency and eases the work.

For now, Figma has provided this feature in the beta version only. To enable it go to Figma settings and enable Component Properties-Beta Version.

The above screenshot taken from Figma Seetings, Red Box highlights the option to enable new component property (Beta) .

2. When we nest components the original name given to layers remains as it is, but it may not be meaningful always in the context of complex components. which makes the right panel look more confusing for new designers as the headings are not relevant in the context of the complex components. Hence change the heading of nested component properties by changing the layer name in the context of the complex component.

The above example showcases how to add relevant property headings on the right-side panel. Property headings can be changed from the layers panel on the left side, which makes the properties understandable for the new designers.

Best practices to be followed while creating a design library in Figma:

1. Make sure for the entire library creation we use consistent language. Use constant patterns for variant properties.

2. Use component configuration to add details or guidelines for using components.

The above example depicts how to add component usage guidelines or reference links using component configuration.

3. Use the Variant Organizer plugin to organize variants as per their properties and preference.

The properties will be showcased on the right-hand side panel; only after clicking on the variants. It does not make the design library comprehensive. Every time to know the properties of variants new designer might need to go through them one by one which makes the job tedious.

Using the “Variant Organizer” plugin we can organize variants by choosing properties which will get displayed column-wise and row-wise which makes the design library much more comprehensive.

Figma

I’m very much sure Figma will come up with many more features which will make our work easy so that we can invest more time in strategic design thinking rather than screen design.

Till that time let’s make the best use of advance Figma features to make us and our client happy.