Responsive variables

About this plugin

The plugin is designed to streamline the management of typography and sizing variables in responsive design projects. With this plugin, you can efficiently create and manage typography and sizing variables using standardized naming conventions and automate the creation of styles with linked variables.

Demo file https://www.figma.com/community/file/1419690653122064051/responsive-variables-demo

Key Features:

1. Automatic Variable Creation: Generates typography or sizing variables based on a predefined naming convention.
2. Linked Styles: Automatically creates text styles with linked variables, ensuring consistency and ease of updates.
3. Parameter Multipliers: Manages parameters like line-height and letter-spacing using multipliers, allowing the plugin to calculate pixel dimensions.
4. Style Guide Generation: Automatically create a style guide that's synced with all typography and spacing styles, giving you a quick overview of the design elements. This functionality will generate a new page called "Responsive variables".
5. Used styles report (beta): This functionality allows users to generate a detailed report listing all the occurrences of different sizes used within a document, providing a comprehensive overview for analysis or optimization purposes

How it works:

1. When the plugin starts, automatically load all local variables.
2. The plugin automatically creates a new "Variables" collection where all the variables are stored.
3. Every time you create a new variable, a text style is automatically created, and all the individual variables are bound to the corresponding property.
4. Upon plugin load, the plugin generates a fileRefId variable containing a hash. This hash is used as a reference to store ordering data in the plugin’s local storage, ensuring data is kept separate for each file. If you encounter any issues, click the menu icon in the top-right corner of the plugin window and select “Reset Storage Data.”