Component Variables

A plugin that helps customize Figma components in an orderly and automatic manner.

Create and edit preset variables within your component without the hassle of going through groups and autolayouts.

__________________

HOW TO USE

• TEXT VARIABLES

Assign a variable name to a text layer and change the text content through the panel.

Name the text layer wrapping it in curly brackets. The name inside will be assigned to the variable.

E.g.: {label} will create a variable `label`.

• SELECTOR VARIABLES

Create grouped options which only one is shown at a time.

Wrap the layer name in brackets, the first name should be the group name and the second the variable name. Separate the names with a '.' .

When selected, all layers will be hidden, expect the chosen one.

E.g.: [Color.

Blue], [Color.

Green] creates a group 'Color' in which you can choose between 'Blue' and 'Green' colors.

• CONDITION VARIABLES

Show or hide a layer based on a condition.

Name the layer wrapping it in parenthesis. This will create a toggle for the variable name which you can show/hide on the panel.

E.g.: (disabled)

You can create an inverse condition by naming the layer starting with a '!' .

E.g.: (!disabled)

__________________

NOTES

• The variables should be created on the master component, keeping in mind not to rename the layers on the instance.

• The configuration panel works only with instances.

• You can create multiple layers with the same name to get the same behaviour on them.