Figma

To illustrate my knowledge of Figma, here's a component/module from an email design system that I'm designing for my employer. I created it by using Variant properties, Boolean properties, Text properties, Instance Swap properties and Nested instances. By using components and component properties correctly, I was able to create a module that didn't require hundreds of Variant properties.

‍

First, let's look at Variant properties.

Variant properties allow you to define attributes of your variants, such as color, state, size, etc.

In the example below, I have four different Variant properties...

• Viewport: Desktop

• Viewport: Mobile

• Image Position: Top

• Image Position: Bottom

‍

‍

Next, let's look at Boolean properties.

Boolean properties allow you to toggle elements on or off. In the example below, The Eyebrow type (the all caps type above the headline) is turned on.

‍

‍

In the example below, it is turned off...

‍

If you pay attention to the right hand panel, you'll notice that the Type property "Eyebrow Copy" collapses when the toggle switch is turned off,. This keeps the user from having too many options to choose from. This is done by using Figma's Nested Instances feature. When the property is turned on, the user can see the Text property again which helps them discover nested instances without having to deep-select layers to find them.

‍

Next, let's look at Text properties.

Text properties indicate which text layers should be edited, so I applied Text properties to each field of text (Eyebrow, Headline, Body, Button). This gives the user the ability to edit the text fields directly from the top level (Directly from the right side panel).

‍

‍

Finally, let's look at Instance Swap properties.

Instance Swap properties indicate which instances can be swapped. In the example below, I applied an instance swap property to the icon that's located in the Urgency messaging section. This gives the user the ability to swap the icon out for any other icon within our icon library. Again, this is all done from the top level. The user no longer has to manually click through layers just to get to the icon layer. This also saves the user time and frustration.

‍

‍