Component Properties & Variants

Topics Covered in This Figma Tutorial:

Master Component Properties (Text, Boolean, Instance Swap, & Variant) and learn advanced techniques for Creating & Using Component Variants to build scalable design systems.

Exercise Preview

Exercise Overview

In this comprehensive exercise, you'll master component properties and variants—the cornerstone of professional design systems. These powerful features enable you to manage multiple appearances and states within a single component, creating the flexibility and consistency that modern product teams demand.

While you could manually modify individual component instances, this approach creates maintenance nightmares and undermines scalability. Component properties solve this by allowing you to define and name exactly which aspects of a component should be customizable. As of 2026, Figma offers four essential component property types that every design systems architect should master:

• Text: Enable dynamic content while maintaining typographic consistency
• Boolean: Create toggle states (true/false, visible/hidden) for conditional elements
• Instance Swap: Replace nested components with approved alternatives
• Variant: Manage multiple visual variations within organized component families

Understanding these properties is crucial for building maintainable design systems that scale across teams and products.

Opening the File

1. In Figma, navigate to the homescreen (file browser) using one of these methods:

   • 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 import your exercise file, click Import file (located near the top right).

3. Navigate to Desktop > Class Files > Figma Class and double-click Variants.fig to select it.

   Once the file uploads successfully, click Done and double-click the file thumbnail to open your workspace.

Creating Variants (Variant Properties)

Figma's official documentation states: "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." This organizational approach has become the industry standard for professional design systems.

Instead of managing dozens of disconnected components, we'll consolidate everything into one intelligent component with strategic variants. Our button system will feature variants for color (black, brown, and gray), appearance (solid and outline), and optional icon states—creating a flexible foundation that scales with your design needs.

1. At the top right of the window, click the zoom percentage dropdown and select Zoom to 200% for optimal working visibility.
2. Locate the button main component to the right of the Home Page frame and select it by clicking its name.

3. In the center toolbar, click the Add variant button.

   Notice that Figma automatically generates a duplicate component appearance in the canvas—this is your second variant.

4. In the Design panel, you'll see Figma has created a new property structure:

   • Locate the auto-generated Property 1 with the default value Variant2.
   • Change Variant2 to Brown to establish semantic naming.
   • Double-click Property 1 and rename it to Color (press Return on Mac or Enter on Windows to confirm).
5. Select the top variant in the canvas to configure the first color option.

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

7. Now we'll apply the visual changes to match our semantic naming. Select the bottom button in the button component set.
8. In the Design panel, locate the Fill property and click the Style button
9. When the Color Styles panel opens, select the Brown color swatch to apply the predefined style.

10. Click an empty area of the canvas to deselect all elements and review your progress.

Using Variants

Now that we've established our variant structure, let's see how intuitive the user experience becomes for designers consuming these components.

1. In the Home Page frame, select the SIGN UP button instance.
2. Examine the Design panel—you'll notice a component section labeled button, confirming the component relationship.

3. Within that section, locate the Color dropdown and change the selection from Black to Brown.

   The button should instantly transform to brown while preserving all text overrides—this is the power of well-structured component variants.

Adding Another Variant

Let's expand our color system by adding a third option, demonstrating how easy it is to scale variant properties.

1. Select the button component set by clicking on its name label to the right of the Home Page frame.
2. Click the Plus (+) button that appears at the bottom of the component set to generate a new variant.
3. With the new variant automatically selected, navigate to the Design panel and change Color3 to Gray (press Return on Mac or Enter on Windows to apply).
4. Click the Style button next to Fill in the Design panel.
5. Select the Gray color swatch from the Color Styles panel that opens.
6. Click an empty area of the canvas to deselect and confirm your changes.

Adding a Text Component Property

Variants handle visual variations, but component properties address specific interaction patterns. Text properties are particularly valuable for establishing clear guidelines about which content should be customizable in your design system.

1. Select the SIGN UP button to see the current user experience.

2. In the Design panel's button component section, you'll notice variant controls but no text options.

   This ambiguity creates friction for design teams. When building systems for multiple users, you need to explicitly communicate which elements are meant to be customized. Text properties solve this by providing clear, visible controls that signal "this content is meant to be changed."

3. Return to the button component set and double-click any text element to select the text frame (not the text content itself).

4. Click the target button below the selected text to automatically select the corresponding text elements across all three variants.

5. In the Design panel, locate the Content section and click Create text property .
6. The default configuration is appropriate for this use case, so click Create property to proceed.
7. Select the SIGN UP button instance again to test the new functionality.

8. In the Design panel, you should now see a Text property displaying Sign Up.

   This explicit text control communicates to other designers that button text is intended to be customizable. The absence of such a property would signal that text should remain unchanged—a crucial distinction for design system governance.

Adding More Variant Properties

Now we'll expand our button system to include outline treatments alongside our solid color options, demonstrating how multiple variant properties can work together to create comprehensive component families.

1. First, let's optimize our workspace for the expanded component set:

   • Select the button component set by clicking its name.
   • Drag the right edge to accommodate additional columns, providing space for roughly four button widths, as shown:
     

     

2. Select any variant within the button component set.
3. Press Cmd+A (Mac) or Ctrl+A (Windows) to select all existing variants.

4. Hold Option (Mac) or Alt (Windows) while dragging to create duplicates in a second column. Position them as shown below, leaving adequate spacing for future icon additions:

   

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

6. The stroke effects aren't visible yet because we need to configure the stroke properties. In the Design panel, locate the Stroke section and apply these settings:

   • Set the stroke weight to 3 for sufficient visual weight
   • Change the alignment from Center to Inside to maintain consistent button dimensions.
7. For optimal contrast, we need to adjust the text color. In the Design panel, locate Selection colors, click the white swatch (FFFFFF), and change it to black for improved readability.
8. Close the color picker to return to the main interface.

9. Add a white background to ensure proper contrast. With the three outline buttons still selected, click the Plus (+) button next to Fill in the Design panel.

   Verify that the fill color is set to white—adjust if necessary.

10. Now we need to create the property structure for our new appearance options. Select the button component set by clicking its name.

11. In the Design panel, click the Plus (+) button next to Properties and select Variant from the dropdown.

    • Enter Appearance for the Name field
    • Set the Value to Solid
    • Click Create property to establish the new variant property.
12. Select the black outline variant (top button in the right column).

13. In the Design panel's Current variant section:

    • Hover over the Color value, click the dropdown arrow, and select Black.
    • Click in the Appearance field, replace Solid with Outline, and press Return (Mac) or Enter (Windows).

14. Select the brown outline variant and configure its properties:

    • Set Color to Brown using the dropdown menu.
    • Set Appearance to Outline using the dropdown menu.

15. Select the gray outline variant and complete the configuration:

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

Trying Out the New Property

Let's test our multi-dimensional variant system to ensure the properties work seamlessly together.

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

2. In the Design panel variant properties section, experiment with these combinations:

   • Change Appearance from Solid to Outline.
   • Change Color from Black to Brown.
   • Try different combinations to verify that you can access all six possible appearance states we've created.

This demonstrates the power of well-structured variant properties—designers can mix and match attributes to create exactly the appearance they need without requiring additional component creation.

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

Boolean properties are essential for managing conditional interface elements. They provide clean toggle controls for features that should be either present or absent—like icons, badges, or interactive states.

1. Locate and select the arrow component positioned above the button component set.

2. Our buttons use auto layout, which means we can add the arrow using Figma's intelligent insertion system.

   Hold Option (Mac) or Alt (Windows) and drag the arrow toward the first button (white background). Position it after the text until you see a blue insertion line, then release to place the arrow:

   

3. For the remaining variants, we'll use a more efficient approach. Select the arrow component again:

   • Press Cmd+C (Mac) or Ctrl+C (Windows) to copy it.

4. Select the five variant buttons that don't yet have arrows.

5. Press Cmd+V (Mac) or Ctrl+V (Windows) to paste the arrow into all selected variants simultaneously. Auto layout will automatically position each arrow after its respective text.

6. The dark gray arrows lack sufficient contrast against the solid background buttons. Select one arrow from the left column, then hold Shift while clicking the other two to select all three solid-background arrows.

7. In the Design panel, locate Selection colors, click the gray swatch (555555), and change it to white (FFFFFF) for optimal contrast.

   Your button variants should now match this configuration:

   

Making the Boolean Values Work

With our visual designs complete, we need to create the boolean property that will control arrow visibility across all variants.

1. Select any arrow within the button component set.
2. Click the target button below the arrow to select corresponding arrows across all variants.

3. In the Design panel, locate the Layer section (above Fill) and click Create boolean property .

   • Name it Has Icon for semantic clarity
   • Confirm that Value is set to True
   • Click Create property
4. Click an empty canvas area to deselect all elements.
5. Test the functionality by selecting the Shop New Collection button in the Home Page frame.

6. In the Design panel, locate Has Icon and click the toggle switch to hide and show the arrow.

7. Verify that the boolean property works in combination with other variant properties by testing different Color and Appearance combinations while toggling the icon.

   Pro Tip: Variant properties can also use boolean values by entering true and false (or on and off) as the variant names. While our Appearance property currently has only two states, we're maintaining flexibility for future expansion by using descriptive variant names instead of boolean values.

Adding an Instance Swap Component Property

Instance swap properties represent one of Figma's most powerful features for design system flexibility. They allow users to replace nested components with approved alternatives while maintaining all other property configurations.

1. In the button component set, select any arrow component.
2. Click the target button below the arrow to select all arrow instances across variants.

3. In the Design panel, locate the instance name arrow and click Create instance swap property .

   • Name it Icon for intuitive user experience
   • Confirm Value shows arrow
   • Click the Plus (+) next to Preferred values
   • Check the email component to add it as an approved alternative
   • Click Create property
4. Now let's test the complete system. Select the SIGN UP button in the Home Page frame.
5. Change Appearance to Outline to see the button structure.

6. In the Design panel, click the Icon dropdown and select email.

   The icon should swap seamlessly while maintaining all styling properties.

7. Change Appearance back to Solid.

   Notice how the icon color automatically adjusts to maintain appropriate contrast—this demonstrates the sophisticated property inheritance that makes component variants so powerful for design systems.

You've now created a comprehensive button component system with multiple variant properties, boolean toggles, text customization, and instance swapping capabilities. This foundation represents professional-grade design system architecture that scales efficiently across teams and products.