Component Properties & Variants

Topics covered in this Figma tutorial:

Component Properties (Text, Boolean, Instance Swap, & Variant), Creating & Using Component Variants

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to use component properties and variants, so you can manage numerous different appearances and states for a single component.

While you can go into instances of a component and make changes, that’s not a great way to great an easy-to-use, scalable design system. Component properties let you define (and name) what aspects of a component should change. Currently there are 4 types of component properties:

• text
• boolean (true/false, visible/hidden)
• instance swap (swap a nested component with an alternative)
• variant

Opening the File

1. In Figma, if you’re not on the homescreen (file browser), do the following:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and choose Back to files.
2. To open a local file, click Import file (may be an icon near the top right).

3. Navigate into Desktop > Class Files > Figma Class and double–click on Variants.fig to choose it.

   Once the file has uploaded, click Done and double–click on the file to open it.

Creating Variants (Variant Properties)

According to 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.” tinyurl.com/fig-variant

Instead of many unrelated components, we’ll keep everything together as one component with variants. We’ll make a button with variants for color (black, brown, and gray) and appearance (solid and outline), and with/without an arrow icon.

1. At the top right of the window, click on the zoom percentage and choose Zoom to 200%.
2. To the right of the Home Page frame, select the button main component by clicking on its name.

3. In the middle of the toolbar, click the Add variant button.

   In the canvas notice a second button appearance has been created.

4. In the Design panel:

   • Notice a new Property 1 has been made with a value of Variant2.
   • Change Variant2 to Brown.
   • Double–click on Property 1 and change it to Color (hit Return (Mac) or Enter (Windows) to apply it).
5. In the canvas, select the top variant.

6. In the Design panel, click on Default and change it to Black (hit Return (Mac) or Enter (Windows) to apply it).

7. Now that things are named properly, we must change the design. We have 2 colors already saved as color styles. In the button component set, select the bottom button.
8. In the Design panel, to the right of Fill click the Style button
9. In the Color Styles panel that opens, click the Brown circle.

10. Click on an empty area to make sure nothing is selected.

Using Variants

1. Now that we have 2 variants, let’s use them in our design. In the Home Page frame, select the SIGN UP button.
2. In the Design panel, there’s a component area labeled button (because that’s the component we’re working with).

3. In that section, to the right of Color change the menu from Black to Brown.

   The button should now be brown, and the text overrides are kept. Nice!

Adding Another Variant

Let’s create some more variants, starting with a third color option (gray).

1. To the right of the Home Page frame, select the button component set by clicking on its name.
2. At the bottom of the component set, click the Plus(+) button that appeared.
3. The new variant will be selected. In the Design panel, next to Color change Color3 to Gray (hit Return (Mac) or Enter (Windows) to apply it).
4. In the Design panel, to the right of Fill click the Style button
5. In the Color Styles panel that opens, click the Gray circle.
6. Click on an empty part of the canvas to make sure nothing is selected.

Adding a Text Component Property

Variants let you create multiple variations within a component, but there are some types of changes that Figma has pre-built for you so you don’t have to create too many variants. These are called component properties and there are 3 types: text, boolean, and instance swap. Let’s look at text first.

1. Select the SIGN UP button again.

2. In the Design panel on the right, component area labeled button you see the variant option we just made, but there’s no option regarding the text.

   When making a design system that will be used by many people (not just yourself), for some components you may not want people to change the text. For other components (like this one), you expect people to change the text. So how are others to know when they can or cannot change the text? Let’s make that obvious by showing them a text option.

3. To the right of the Home Page frame, in any of the 3 variants, double–click on the text to select it the text frame (without highlighting the text inside).

4. Below the text, click the target button to select the same text element across all 3 variants.

5. In the Design panel, to the right of Content click Create text property .
6. The default options are fine, so click Create property.
7. Select the SIGN UP button’s instance again.

8. In the Design panel, notice there’s now a Text property that says Sign Up.

   Whenever you use an instance of this button component, you can change the text either in the Design panel or by double–clicking the instance and changing it. If there’s not a Text property in the Design panel, this indicates to others they should not change the text.

Adding More Variant Properties

Now that we have 3 color options, we want each color to also have a version that uses a outline appearance instead of a solid background.

1. We’re going to add more variants to our button component set, so let’s make it bigger so we have room to see them all:

   • Select the button component set by clicking on its name.
   • Drag the right side over (with room for more a bit more than 2 columns), like this:
     

     

2. In the button component set, select any of the variants.
3. Hit Cmd–A (Mac) or Ctrl–A (Windows) to select them all.

4. Hold Option (Mac) or Alt (Windows) and drag a set of copies to the right so you end up with 2 columns as shown below (leave a bit of room between for when we add icons into the buttons):

   

5. With the 3 new variants still selected (the right column), at the top left click the Main menu and choose Object > Swap fill and stroke.

6. We won’t see the strokes, because there’s no thickness. In the Design panel, scroll down and under Stroke:

   • Set the stroke weight to 3
   • Change Center to Inside.
7. Let’s change the text color to black. In the Design panel, below Selection colors, click on the white switch (FFFFFF) and change it to black.
8. Close the color picker.

9. Let’s add a white background to these button. With the 3 buttons still selected, in the Design panel, to the right of Fill click the Plus(+) button.

   If the Fill color is not already white, set it to white now.

10. Now we must create a property to control the outline appearance, and set the values for it. Select the button component set by clicking on its name.

11. In the Design panel, to the right of Properties click the Plus(+) button and choose Variant.

    • For Name type in Appearance
    • Change Value to Solid
    • Click Create property.
12. In the canvas, select the black outline variant (top of the right column).

13. In the Design panel:

    • Under Current variant, to the right of Color hover over the value and from the menu (the down arrow) choose Black.
    • To the right of Appearance, click on Solid and type Outline (hit Return (Mac) or Enter (Windows) to apply it).

14. In the canvas, select the brown outline variant and in the Design panel:

    • To the right of Color, hover over the value and from the menu choose Brown.
    • To the right of Appearance, hover over the value and from the menu choose Outline.

15. In the canvas, select the gray outline variant and in the Design panel:

    • Set Color to Gray.
    • Set Appearance to Outline.

Trying Out The New Property

1. In the Home Page frame, select the Shop New Collection button.

2. In the Design panel, in the variant properties area:

   • To the right of Appearance change the menu from Solid to Outline.
   • To the right of Color change the menu from Black to Brown.
   • Feel free to change both properties to any value to see you can mix and match them to choose any of the 6 appearances we created!

Setting Up the Design for Boolean Component Properties (Toggle On/Off)

Properties with only 2 values: true and false (or off and on) are called a boolean. They’ll give us a toggle switch instead of a menu. Let’s add an arrow icon for our button, which we can turn on or off using a boolean.

1. We must add an arrow into each of our variants. Select the arrow component (it’s above the button component set).

2. Our buttons were made with auto layout, so we can add the arrow into that in a couple different ways.

   As shown below, hold Option (Mac) or Alt (Windows) and drag the arrow into the white background button after the text… and when you see a blue line, release to place the arrow there.

   

3. Let’s see another way to add the arrow. Again select the arrow component:

   • Hit Cmd–C (Mac) or Ctrl–C (Windows) to copy it.

4. Select the 5 variant buttons which don’t have the arrow yet.

5. Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste the arrow into all of them at once! Auto layout places it after the text.

6. The very dark gray arrow is hard to see on the solid background buttons (left column). Select one, then holding Shift and click on the others (so the 3 arrows on the solid background buttons are selected).

7. In the Design panel, towards the bottom under Selection colors click on the gray (555555) and change it to white (FFFFFF).

   Your button variants should now look as follows:

   

Making the Boolean Values Work

Now that we have the designs, we need to finish setting up the variant properties.

1. Select any one of the arrows in the button component set.
2. Below the arrow, click the target button to select them across all the variants.

3. In the Design panel, to the right of Layer (the section above Fill) click Create boolean property .

   • Name it Has Icon
   • Value should already be set to True.
   • Click Create property.
4. Click in an empty area to deselect.
5. In the Home Page frame, select the Shop New Collection button.

6. In the Design panel, to the right of Has Icon, click the toggle switch off and on to hide or show the arrow.

7. In the Design panel, change the Color and Appearance to see they still work with the arrow. Nice!

   NOTE: Variant properties (like the Appearance property we made) can also be made with boolean values by typing true and false (or on and off) for the values. Our Appearance property currently has 2 states (Solid and Outline), so we could have used boolean values. We may add more appearances in the future though, so we’ll keep the flexibility of how it’s currently set up.

Adding an Instance Swap Component Property

We want this button to able to able to use another icon in place of the arrow. We already have an email icon component we can use, but we need to update the button component to allow for instance swapping.

1. In the main button component, select any one of the arrows.
2. Below the arrow, click the target button to select them all.

3. In the Design panel, to the right of arrow instance name, click Create instance swap property .

   • Name it Icon
   • Value should already be set to arrow.
   • To the right of Preferred values click the Plus(+).
   • Check on email
   • Click Create property.
4. Now let’s try it out! In the Home Page frame, select the SIGN UP button.
5. Change Appearance to Outline.

6. In the Design panel, to the right of Icon click on the menu and choose email.

   The icon should update!

7. Change Appearance to Solid.

   The icon color should update to stay in keeping with the text.

8. Change Appearance back to Outline.

   NOTE: The icon should change color (black or white), but if it does not:
   • Double–click into the instance and select the nested icon component.
   • Change the color in the Design panel manually (by changing the color found under Selection colors).