Utopia Fluid Type + Space Calculator now supports Figma variables

We're pleased to announce that the Utopia Fluid Type + Space calculator now supports Figma variables. Variables are a long-awaited Figma feature. Although still in beta, the benefits of using them are already clear and significant enough to incorporate them into our plugin.

When generating artboards through the plugin, three variable collections will be created: "Utopian size", "Space @min" and "Space @max". The first collection contains the raw pixel values generated by Utopia. You're unlikely to use these directly, so you're welcome to "hide from publishing" should you wish.

"Space @min/@max" are mapped to the raw values. When working on a design for a min/max viewport, grab the values from the respective collection and apply them to your work.

These variables are applied to the space components generated by the plugin, as well as the grid layouts demonstrations. Variables don't yet work with grid layout directly, so these values are handled by the plugin as before.

If you re-run the plugin, the variables will be updated and all connected components will automatically inherit the new sizes. This is a mixed blessing as not all Figma numerical inputs can accept variables, meaning that certain values still need to be manually updated. We're hopeful that these remaining parameters will be updated by Figma in time.

This plugin is also fully compatible with the Utopia Kickstarter file.

No modes?

We've chosen not to support modes just yet. Firstly, they can be a little temperamental, which we hope will be resolved as variables move towards a production release. Secondly, variables don't currently work with typographic values, where modes are most useful. Finally, using multiple modes is locked behind a paywall and we didn't want to exclude users who can't afford a paid subscription. We'll be keeping an eye on how modes develop and will look to support them appropriately for all users in the near future.