Skip to main content


[DEPRECATED] This property is deprecated for instance nodes. Use componentProperties instead.

Variant properties and values for this node. Is null for nodes that are not variants.


variantProperties: { [property: string]: string } | null [readonly]


Variant properties define attributes of variants in a component set. For example, a component set for a button might have variant properties such as size and state, with different possible values for each property (e.g. default, hover, pressed, and disabled for the state property).

Variant-related properties and methods for component sets, components, and instances

// Output
Size: {
values: ['Small', 'Medium', 'Large']
State: {
values: ['Default', 'Hover', 'Pressed', 'Disabled']

// One of the variants / component nodes in the component set

// Output
{ Size: 'Small', State: 'Hover' }

// variantProperties also works on an instances of variants

// Output
{ Size: 'Medium', State: 'Default' }

// Use setProperties on an instance of a variant to configure it
instance.setProperties({ Size: 'Large' })

// Output
{ Size: 'Large', State: 'Default' }

On this page