Utopia / Fluid type + space calculator

About this plugin

Utopia is a systematic approach to fluid type and space design. This plugin generates named type styles and space components from a handful of editable values. This kickstarts your design project with a palette of related building blocks for use at your minimum and maximum viewport widths.

The purpose of the plugin is to automate the laborious process of creating and organising an initial set of components and styles.

If you prefer, you can configure your type and space scales at utopia.fyi and paste the resulting URL into this plugin.

Values can be edited by running the plugin again. Changes made to the generated type styles will persist as long as the styles are not renamed. For instance you can change the font in Figma and re-run the plugin without the text reverting back to the default font. To reset everything, delete the artboards, the generated styles, and the generated variable collections.