TypeScale Generator

The problem

Every design system starts with type, and type is where the busywork piles up. You pick sizes for headings and body, then do it all again for mobile, then create text styles one by one, then build a specimen page so developers can see what you meant.

None of that is hard. It's just slow, and the desktop and mobile scales drift apart easily because they live in different places. I wanted one screen where both scales sit next to each other, and output that lands in Figma as real, usable tokens.

What it does

• Dual-mode scales: Desktop and Mobile type scales generated side by side, so you judge them as a pair.
• Live split preview: both scales rendered in your chosen font while you adjust.
• Google Fonts, auto-loaded: pick a font and it loads for the preview, no manual setup.
• Native Figma Variables: sizes are created as float Variables, ready to bind.
• Text styles: matching text styles are created so the scale is usable right away.
• Specimen frame: an auto-layout typography frame documents the whole scale on canvas.

How it works

1. Open TypeScale Generator from the Figma plugins menu.
2. Pick a font. It loads from Google Fonts for the preview.
3. Set up your Desktop and Mobile scales and watch the split preview update.
4. Generate. The plugin creates the float Variables and the text styles.
5. Share the auto-layout specimen frame it places on the canvas as documentation.

Settings and live preview

The generated Desktop and Mobile specimen frames

Building it

The first decision was to show both modes at once. Splitting the preview down the middle makes the relationship between the two scales visible, which is the whole point: a mobile H1 should feel related to its desktop sibling, not like a separate guess.

I kept the UI compact. A plugin lives in a small panel next to your work, so every control has to earn its space, and the preview gets most of the room.

The output had to be native. Instead of exporting a file you then import somewhere else, the plugin writes Variables and text styles straight into your file through Figma's own APIs. Using floats for sizes means you can bind them anywhere a number goes.

Network access is restricted to one job: loading Google Fonts for the preview. That keeps the permission footprint small and easy to explain.

A type scale isn't finished until someone else can read it, so the plugin also builds the specimen frame. Auto layout keeps it easy to edit after it's generated, whether you add notes or reorder rows.

Version 1 shipped on 28 November 2025. A few days later, on 2 December, version 2 fixed an error where the UI could open blank. Small fix, big difference: a plugin that opens to an empty panel is a plugin nobody opens twice.

If you set up type for design systems, give it a spin. Open in Figma Community