Are you suffering from variant explosion? Have you moved properties into Variables, only to manage multiple Variables for a single change?

Use Variable Modes like Component Properties. Group existing Variables into a single multi-mode Variable and use its Modes like Component Properties.

Benefits of using variable modes like Component Properties
Reusable modes

Replace repetitive Component Properties with reusable Variable Modes.

No explosion

Reduce variant explosion dramatically.

Single change

Replace multiple manual Variable selections with a single Mode change.

Inherited modes

Apply a Mode once at the top level and let Figma automatically propagate it through nested components.

How to use
Create collection

Create a Collection that represents a Component Property you want to replace.

Define pattern matching rule

Enter a Variable name pattern and Wildcard text based on the common and unique parts of the Variable names currently used for that Property.

Review rule results

Review the assigned Modes and adjust them if needed.

Apply variables to component

Apply the generated Variable to your Components in Figma. This step must be done manually.

Limitations
Professional or higher

Prop2Mode relies on Variable Modes and therefore requires a Figma plan that supports multiple Modes.

Mode limits

Figma limits the maximum number of Modes available on each plan. Plan your Mode structure accordingly.

Rename

Figma plugins cannot rename Variable Collections. Collections created by Prop2Mode will include "(Prop2Mode)" in their names by default. If you want a different name, rename the Collection manually in Figma.

Component-based rules

Prop2Mode does not currently support generating Modes directly from existing Component Property values.

Important notes
Environment vs Property Modes

Variable Modes are typically used for themes such as Light and Dark Mode.

Be careful not to confuse environment-related Modes with Modes created to replace Component Properties.

Variables in Dev mode

Variables generated by Prop2Mode are not intended to be implemented directly.

Developers should reference the actual Variables assigned to each Mode instead.

Naming suggestion

To make these relationships easier to understand, we recommend using a Wildcard text that is unlikely to appear in real design token names, such as "()".

Free trial

Each trial user can use single collection in each file. That user cannot create rules in other collections in the same file.

Each trial user can create up to 3 rules in a collection.

Each trial user can update or delete rules in collection that user can create rule, although the rule is not generated by specific trial user.

Tags
component properties
components
variables
variants
Published on
June 6, 2026
Works