When you first start using Figma, the concept of "Components" can be a little confusing. You may have wondered why the Component properties panel looks so different, even though you're still working with a "Component." As you become more familiar with Figma, you learn that there are Components as master components and Instances that reference them. Even then, the differences between their Component properties panels can still feel arbitrary.

While building a plugin related to these panels, I took a closer look at how they differ and what each panel appears to be designed for. This note summarizes how the panels differ depending on what you select and considers what each panel appears to be designed for.

1. Properties panel for standalone Components and Component sets

‍

When you create a component, it starts as a standalone Component. Once you add a Variant, Figma converts it into a Component set. Although a standalone Component and a Component set are different objects, both serve as top-level objects for defining and managing Component properties. Their UI appears to be designed around that purpose.

‍

The Component properties panel for a standalone Component or Component set has the following characteristics:

• It shows all properties defined on the selected Component or Component set.
• For each Variant property in a Component set, it shows all values defined for that property.
• When a property is defined on a Component or Component set but is not actually used within the component, Figma marks it as "Not used within component."
• The visual hierarchy emphasizes property names more than property values.
• Interacting with a property leads to renaming it. In other words, the panel focuses on managing properties rather than assigning their values.
• When a child Instance is exposed as a Nested instance, the panel shows the name of that Instance layer. It does not show the Nested instance’s own properties.

2. Properties panel for Variants in a Component set

‍

A Component set contains multiple Variants that represent different states or configurations of the same Component. Each Variant is identified by a combination of Variant property values. Users must assign values so that every combination points to one specific Variant. Therefore, the Component properties panel appears to focus on defining the value of each property for the selected Variant.

‍

The Component properties panel for a Variant has the following characteristics:

• It shows every Variant property defined in the parent Component set.
• It shows the values assigned to each Variant property for the selected Variant.
• The visual hierarchy emphasizes property values more than property names.
• Interacting with a property leads to editing its value. In other words, the panel focuses on managing the values assigned to the selected Variant.
• Non-Variant properties, such as Text, Boolean, Instance swap and Slot properties, are not shown.
• Nested instances are also not shown.

3. Properties panel for Instances

‍

In actual UI design work, designers usually do not place main components (including Variants) directly. Instead, they use Instances that reference those Components. Designers then customize each Instance for its specific context. This may involve selecting different property values, changing boolean values, replacing Instances, editing text, or adjusting exposed properties from Nested instances. Unlike the panels for main components, the Instance panel appears to focus less on managing the design system and more on configuring the selected instance for actual use.

‍

The Component properties panel for an Instance has the following characteristics:

• It shows all properties that are directly relevant to the selected Instance.
• Properties that do not affect the current Instance are hidden from the panel, even if they are defined in the main Component—for example, when the related layer is hidden.
• Variant properties with only two possible values, such as "true/false", "on/off", or "yes/no", are displayed as Switches rather than Dropdowns in the Instance panel.
• The visual hierarchy emphasizes property values more than property names.
• Interacting with a property leads to changing its value. In other words, the panel focuses on customizing the selected Instance.
• When a child Instance is exposed as a Nested instance and is relevant to the current Instance, the panel shows both the Nested instance layer name and its properties.

Summary

‍

The differences can be summarized as follows:

‍

Although these three panels look similar, each is optimized for a different stage of working with components: defining properties, defining values for those properties, and using those values in instances.

‍