🚧 A few new component property features have landed in open beta. Learn what they are and how to try them out →
Before you Start
Who can use this feature
Users on any plan
Anyone with edit access to the Figma design file can create and manage component properties
New to component properties? Learn how component properties works by exploring the different types, preferred values, exposed nested instances, and more.
Component properties are the changeable aspects of a component, so you know which parts of a component — like icons or text — can change.
When editing an instance containing component properties, the their component properties controls appear in a single section of controls in the right sidebar. This makes it easy to know what is changeable and to make those changes in one place.
This also removes the need to select and override individual layers, reduces time needed to refer to documentation, and removes the guesswork out of design systems!
When editing an instance, you can check any available descriptions or documentation to ensure accurate use of the asset. Component documentation can include a description, a link to external documentation, or both. Learn how to view documentation →
When you select an instance containing component properties, the Properties section of the right sidebar will populate with different component property controls. Use the accompanying dropdowns, toggles, or text fields to make changes, and they will be reflected in the instance.
- Boolean property: Allows you to set true/false values to turn a specific property on or off. Currently only available for layer visibility. Use the toggles to turn a setting on and off.
- Instance swap property: Indicates which instances can be swapped. Dropdowns with a denote instances that you can swap.
- Text property: Indicates which text strings can be edited. Update the text in text fields to directly change the string of text that appears on the canvas.
- Variant property: Allows you to define specific values and attributes to your variants, such as state, color, or size. Dropdowns with no icon denote variant states that you can change.
You can still make overrides to non-component properties of a single instance. Figma records the changes you make to an instance and preserves them, even when you swap between instances or select different variants.
Tip! Component properties are supported in Figma's plugin API. Learn more from Figma's plugin developer docs →