Using Component Properties Figma

Introduction

Figma has transformed the way designers approach component management through its powerful Component Properties feature. Before this capability existed, designers faced significant challenges when managing and customizing component variations. The traditional approach required manually selecting and customizing individual layers within component sets, resulting in time-consuming workflows and cluttered libraries.

Component Properties represent the changeable aspects of a component that can be modified without altering the fundamental structure of the design. These properties allow designers to control which parts of a component can be changed, how they can be changed, and what values are permissible for each customizable element. The introduction of this feature has fundamentally changed how design systems are built and maintained, enabling teams to create more flexible, maintainable, and scalable design libraries.

For teams building comprehensive design systems, understanding how to effectively leverage Component Properties is essential. Pair this knowledge with our guide on design systems to create cohesive, maintainable component libraries that scale across your organization.

The benefits of mastering Component Properties extend beyond individual efficiency. Design teams can create components that communicate their intended usage clearly, reduce the cognitive load on new team members, and ensure consistent application of design patterns across projects.

The Four Types of Component Properties

Figma provides four distinct types of Component Properties, each designed for specific customization scenarios:

• Boolean Property: Controls visibility of layers (show/hide)
• Instance Swap Property: Replaces one component with another
• Text Property: Controls text content within components
• Variant Property: Manages different states or versions of components

Boolean Property

The Boolean Property controls whether specific layers within a component are visible or hidden. This property type uses a true/false logic, presented as a toggle switch in the properties panel. When set to true, the associated layer is visible; when set to false, the layer is hidden.

Creating a Boolean Property

1. Select the layer you want to make toggleable
2. In the right sidebar, find the Layer section
3. Click the component property icon next to the layer's name
4. Select "Create Boolean Property"
5. Name the property descriptively (e.g., "Show Icon")
6. Set the default value and create the property

Use Case Example

Consider a button component that may or may not include an icon. Instead of creating separate variants for "Button with Icon" and "Button without Icon," a Boolean Property can control the icon layer's visibility. The same component serves both use cases, with the visibility controlled through a single toggle.

Boolean Properties are particularly valuable for managing optional elements within components. Icons, secondary text, decorative elements, and conditional content can all be controlled through Boolean Properties, keeping component libraries lean while providing necessary flexibility.

Instance Swap Property

The Instance Swap Property enables designers to replace one component instance with another within a parent component. This property is essential when components need to display different nested elements while maintaining the same overall structure.

Creating an Instance Swap Property

1. Ensure the element to swap is itself a component
2. Select the instance within your main component
3. Click the component property icon next to its name
4. Select "Create Instance Swap Property"
5. Name the property (e.g., "Left Icon")
6. Set the default instance
7. Define preferred values for curated options

Preferred Values

Preferred values are a powerful feature that curates which instances are appropriate replacements. Rather than searching through an entire library of icons, designers see only the icons appropriate for this use case. This guidance prevents inconsistent or inappropriate component usage while maintaining flexibility.

A button component might have an Instance Swap Property for its icon, with preferred values limited to a set of 8 approved icons from the design system. This prevents designers from accidentally using icons that break visual consistency or accessibility standards.

Text Property

The Text Property controls the content of text layers within components, allowing designers to modify text directly from the properties panel without accessing individual text layers. This property is invaluable for components that display dynamic content.

Creating a Text Property

1. Select a text layer within your component
2. Access the Content section in the right sidebar
3. Click the component property icon
4. Choose "Create Text Property"
5. Name the property (e.g., "Label" or "Button Text")
6. Set the default text value

Workflow Benefits

Text Properties support a streamlined workflow when editing multiple components simultaneously. Rather than double-clicking each instance to edit text, designers can select all instances and modify the text property once. This capability significantly reduces the time required for text updates across large projects.

When the same button component appears 20 times in a mockup with placeholder text, updating all buttons to their final labels becomes a single operation rather than 20 separate edits.

Variant Property

The Variant Property manages different states or versions of a component within a component set. While the other property types control specific aspects of a single component configuration, Variant Properties organize multiple related configurations into a coherent system.

Creating Variants

1. Select your component and choose "Add Variant"
2. Name the variant property (e.g., "Size" or "Style")
3. Define values for each variant (Small, Medium, Large)
4. Customize each variant independently
5. Use Auto Layout to ensure proper sizing

When to Use Variants

Variant Properties are appropriate when fundamentally different configurations are needed:

• Size variations: Small, Medium, Large buttons
• Color themes: Primary, Secondary, Outline buttons
• State representations: Default, Disabled, Loading states
• Style variants: Contained, Text, Outlined button styles

Each variant maintains its own configuration of other properties, allowing for optimized customization while remaining part of a cohesive component family.

Tutorial: Building a Button with All Property Types

Let's create a comprehensive button component that demonstrates all four property types working together.

Step 1: Set Up the Component Structure

1. Create a new frame with Auto Layout (horizontal padding: 16, vertical padding: 8)
2. Add a text layer for the button label
3. Add two icon instances (left and right)
4. Convert the frame to a component

Step 2: Add Text Property

1. Select the text layer
2. In Content section, click the property icon
3. Create Text Property named "Label"
4. Set default value to "Button"

Step 3: Add Boolean Properties

1. Select the left icon layer
2. In Layer section, click the property icon
3. Create Boolean Property named "Show Left Icon"
4. Repeat for the right icon with "Show Right Icon"

Step 4: Add Instance Swap Properties

1. Ensure icons are componentized
2. Select left icon instance
3. Create Instance Swap Property named "Left Icon"
4. Set default and preferred values from your icon library
5. Repeat for the right icon

Step 5: Add Variants (Optional)

1. Select the component and add variants
2. Create Size property (Small, Medium, Large)
3. Create Style property (Primary, Secondary, Outline)
4. Adjust padding and styling for each variant

The resulting component provides a powerful, flexible button that can be customized entirely through the properties panel--no layer editing required.

Advanced: Nested Instances and Property Exposure

Understanding Nested Instances

Nested instances occur when components contain other components within their structure. A card component might contain a button component, which itself contains icon components. Managing properties in such hierarchical structures can become complex without proper organization.

When building complex component hierarchies, consider how your design tokens will cascade through nested components. Design tokens provide consistent values for colors, spacing, and typography that can be referenced by properties across your entire component library.

Exposing Nested Instance Properties

1. Select the parent component
2. In Properties section, click the add property button (+)
3. Select "Nested instances" under "Expose properties from"
4. Choose which properties to expose
5. Click "Expose"

Once exposed, properties from nested components appear directly in the parent component's properties panel. This means you can edit a button's text without double-clicking into the button--just find the Text Property in the card's properties panel.

Best Practices for Nested Properties

• Expose only the most commonly customized properties
• Use clear naming that indicates which nested element a property controls
• Consider visual grouping of related properties
• Document the nesting structure in your design system

Best Practices for Component Properties

Naming Conventions

• Use descriptive, action-oriented names for Boolean Properties (Show Icon, Has Badge)
• Use content-focused names for Text Properties (Label, Title, Description)
• Use category names for Instance Swap Properties (Icon, Avatar, Thumbnail)
• Keep names clear but concise

When to Use Each Property Type

Common Pitfalls to Avoid

1. Overusing properties: Too many properties create overwhelming component interfaces
2. Skipping preferred values: Without curation, instance swaps lead to inconsistent usage
3. Ignoring Auto Layout: Property changes break layouts without proper constraints
4. Inconsistent naming: Different naming conventions across components confuse users

For teams using Figma professionally, mastering these techniques alongside our guide on slice tools in Figma will dramatically improve your design workflow efficiency.

Conclusion

Figma's Component Properties represent a fundamental advancement in how designers create, manage, and maintain design systems. By providing four distinct property types--Boolean, Instance Swap, Text, and Variant--Figma offers versatile tools for enabling appropriate customization while maintaining design consistency.

The practical implementation of Component Properties requires thoughtful planning, consistent naming conventions, and attention to organizational structure. By following the best practices outlined in this guide, designers can create component libraries that are both flexible and maintainable.

Mastering Component Properties takes practice, but the investment pays dividends throughout the design process. Start with simple components using one or two property types, then gradually incorporate more advanced techniques as your design system grows. The principles remain consistent: clarity, consistency, and appropriate flexibility.

If you're looking to build a comprehensive design system for your organization, our web development services can help you establish the foundational components, documentation, and workflows needed for long-term success.

---

Sources:

• Figma Help Center - Explore component properties
• Figma Help Center - Guide to components in Figma