Prop2Mode

About this plugin

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.Features:Generate multi-mode Variables by grouping existing Variables using naming patterns.Manage Variables created by Prop2Mode and help resolve issues caused by renamed, moved, or removed Variables.Benefits of using variable modes like Component Properties:Replace repetitive Component Properties with reusable Variable Modes.Reduce variant explosion dramatically.Replace multiple manual Variable selections with a single Mode change.Apply a Mode once at the top level and let Figma automatically propagate it through nested components.How to useCreate a Collection that represents a Component Property you want to replace.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 the assigned Modes and adjust them if needed.Apply the generated Variable to your Components in Figma. This step must be done manually.LimitationsProp2Mode relies on Variable Modes and therefore requires a Figma plan that supports multiple Modes (Professional or higher).Figma limits the maximum number of Modes available on each plan. Design your Mode structure accordingly.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.Prop2Mode does not currently support generating Modes directly from existing Component Property values.Due to limitations in the Figma Plugin API, Variable states may occasionally become out of sync. If this happens, restart the plugin.Important notesVariable 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 generated by Prop2Mode are not intended to be implemented directly. Developers should reference the actual Variables assigned to each Mode instead.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 TrialYou can create rules in only one Collection per file.You can create up to 3 rules in that Collection.You can update or delete any rule in that Collection, even if it was not created by you.