How to Create and Use Properties in Figma Variants

Properties in Figma allow you to define specific attributes or characteristics that differentiate each variant of a component. These properties can be anything from the state of a button (e.g., "Default" or "Hover") to the size of an icon (e.g., "Small" or "Large"). By organizing your variants with properties, you can streamline the process of switching between different versions of a component and maintain a more organized design system. Here’s how to create and use properties and the different types of properties in Figma:

1. Create Your Component and Variants

• Start by creating a base component that you want to have multiple variants of, such as a button, toggle, or icon.

• Convert it into a component by selecting the element, right-clicking, and choosing “Create Component” or using the shortcut Cmd + Option + K (on Mac) or Ctrl + Alt + K (on Windows).

• Add variants by selecting the component and clicking “+” under the "Variants" section in the right-hand properties panel.

2. Understanding Properties in Figma

• Properties: These are attributes that define the differences between each variant in a set. For example, a property could be “State” with values like “Default,” “Hover,” and “Pressed.”

• Types of Properties: Figma allows you to create several types of properties to differentiate variants:

  • Boolean: Represents an on/off state (e.g., "Enabled" vs. "Disabled").

  • Text: Defines different text labels or content variations (e.g., "Primary" vs. "Secondary" button labels).

  • Instance Swap: Allows you to swap different components or icons within a variant (e.g., changing an icon within a button).

  • Color: Represents different color options for a component (e.g., "Blue," "Green," "Red" button backgrounds).

  • Size: Defines different size variations (e.g., "Small," "Medium," "Large" buttons).

3. Creating Properties

• Select the Variants container that holds your component variants.

• In the right-hand properties panel, find the "Properties" section.

• Click on “Add new property” to create a new property.

4. Define Property Types

• State (Text Property): Create a "State" property to differentiate between states like “Default,” “Hover,” and “Pressed.”

  • Add "State" as the property name.

  • Define the values (e.g., "Default," "Hover," "Pressed").

• Size (Text Property): If your component comes in different sizes, create a "Size" property.

  • Name it "Size" and add values like "Small," "Medium," and "Large."

• Enabled (Boolean Property): For a toggle between on/off states, create a Boolean property.

  • Name the property "Enabled."

  • Define the values as "True" (on) and "False" (off).

• Icon Swap (Instance Swap Property): If your component allows swapping icons, create an "Icon" property.

  • Choose the "Instance Swap" type.

  • This allows you to swap out icons within the component while keeping the same structure.

• Color (Color Property): If your component needs different color variations, create a "Color" property.

  • Add values like "Primary," "Secondary," "Tertiary," and assign different colors to each variant.

5. Assigning Properties to Variants

• Once you've created the properties, select each variant and assign the appropriate property values.

• For example, select the "Default" button variant and set the "State" property to “Default.”

• Select the "Hover" button variant and set the "State" property to “Hover.”

• Do the same for other properties like "Size" or "Color."

6. Using Properties with Variants

• To use the component with its variants, drag the component from the “Assets” panel onto your canvas.

• Select the component instance, and in the right-hand properties panel, you’ll see dropdowns corresponding to the properties you’ve defined (e.g., "State," "Size").

• Choose the desired property value from the dropdowns to switch between different variants quickly.

7. Editing and Managing Properties

• If you need to adjust a property or its values, select the Variants container.

• In the properties panel, you can rename the property, add or remove values, or delete the property if it’s no longer needed.

• Changes made to properties will automatically update across all instances of the component.