Infinite variable modes

About this plugin

1. enjoy infinite variable modes on any Figma plan (even Free)
2. apply modes to individual layers and sublayers, with native-like experience
3. reorder variable modes (drag & drop)
4. manage collections structure (create, rename or remove combined collections, variables and modes)

Demo video by Raul Marin https://youtu.be/oBsNb-wuqso?si=sx9yBvkEWSxff9EZ&t=400

(Video is in Spanish, but has generated and translated subtitles)

This plugin emulates additional modes available to the user by virtually connecting collections with the same name and structure.

From a user experience standpoint it mimics the native experience as much as possible.

In addition to the basic functionality of virtually connecting the collections and setting an explicit mode to a layer or page, the plugin also offers basic collection structure management features - adding, renaming and deleting modes and variables. These collection management features will display under the explicit modes panel, when there is no layer selected - you work with the whole page (similarly, you can access Local variables in Figma, when no layer is selected).

How it works:

Whenever you need to overcome the limit of modes inside a collection, you open the plugin, choose your collection and add the mode there. The plugin will create another collection with the same name and structure, but inside the plugin it will be one collection with more modes. Add as many modes as you need.

Since there are now multiple collections mimicking one, it could be hard to manage the structure of them - whenever you need to add/remove/rename a variable, you would need to do this in all of the connected collections. Luckily, you can do this inside the plugin, where it acts like one collection seamlessly.

For the plugin to connect the collections together, they need to have the same name and the same structure (if there is no pair for a variable in another collection, it will be indicated by displaying the variable in lighter gray color).

To keep things simple, setting actual values of the variables would happen still in the native Figma Local variables environment, because this is not a redundant work.

To navigate better between collections with the same name, you can add a unique identifier in parenthesis right after the name of the collections. The identification may be for example listing all the modes in that particular collection, or whatever you like, e.g. “My collection(en, de, es, it)” and “My collection(fr, pl, hu, cz)” etc.

Known limitations:

1. Infinite modes doesn’t work with variables bound to styles (currently not possible due to how styles and variables are implemented, planning a workaround in the future though)

1. When using bound variables in layout grids and switching from one type to the other (for example from Grid to Columns), always unbind all the variables in the former grid type (Figma Plugin API bug)

1. Explicit modes badges won’t display correctly in the layers panel, due to the nature of how the plugin works (connecting multiple collections into one). You need to orient yourself only by what the plugin is showing you. If this turns out as a serious UX issue, I’ll try to figure out an alternative way of displaying explicit modes in layers hierarchy.

1. If more libraries with the same name will be added to the file, the collections from these libraries will be grouped as if from one library, because current Plugin API doesn’t include a library id, just a name.

1. If there is a change made in any of the added libraries while you have your file opened, you need to close the file and open it again to get the library changes. This is an issue with Figma Plugin API, the updated version of the library simply isn’t available through the API unless the file is reloaded.

1. There might be some performance issues, especially on older machines, when you have selected layers that contain a lot of sublayers. This is due to the Figma Plugin API, that doesn’t offer properly working event notifications, and thus the plugin needs to go through every layer and sublayer of the selection to check for bound variables on a periodic basis (in contrary to event-driven basis) which is expensive in terms of performance. The refresh period is set to 1 second, so there might be up to about 1 second delay in refreshing the informations in the plugin, when you change something in the document. If you experience performance issues, deselect all layers when just moving through the document, or run the plugin only when you need to use it and then close it immediately.

1. Despite my efforts, there still might be some bugs found. If you find any, I would really appreciate if you report them to me. Thank you!

Roadmap:

1. there will be an option to automatically transfer the data from multiple collections created by this plugin into single collection (in case a user decides to switch to a Figma pricing plan, that offers more modes, or in case Figma changes the pricing model), or vice versa - from single collection into multiple collections (in case user decides to switch to a plan with less modes)

1. planning a workaround for currently missing support for bound variables in styles