Utopia Spacers

The Utopia Spacers plugin uses the Utopia Fluid Space Calculator to generate a variable collection of number variables across a variety of comp size modes.

How to UseVisit Utopia.fyi and create a system of spacers using their fluid space calculator linked above.

By default, spacers are only shown at their min and max size. To use this plugin, add one or more custom viewport sized by clicking the black + in the top right of the calculator's calculated values (see images).

Once you're happy with your system, copy and paste the URL into the plugin. A new set of variables called "Utopia Spacers" will generate in your Local Variables.

Use the spacers as normal variables. If you need to update values or add sizes, you can update the calculator and copy/paste the new, updated URL to bring in your changes.

TipsMake sure the first viewport you enter is the size you'll be designing in (we use 1440px).

If you have a Starter Figma account, you're limited to only 1 mode. If you have a Professional or Organization level account you can use up to 4 modes. Enterprise accounts can use up to 40 modes.

We use 390px for mobile, 768 for tablet, 1440 for desktop, and 2560 for XL desktop.

Make sure to save your most-current Utopia URL somewhere so you can reference it easily.