Scales and ratios

Spacing, type sizes and corner radius each come as a scale of sizes, from extra small to extra large. You don’t type every size. You set two numbers, a base value and a ratio, and the ACSS plugin for Figma works out the rest. This keeps the steps in proportion, so your design feels consistent.

Base × ratio

The base value is the size in the middle of the scale. The ratio is how much bigger each step is than the one before it.

• One step up: base × ratio.
• Two steps up: base × ratio × ratio.
• One step down: base ÷ ratio.

So with a base of 30 and a ratio of 1.5:

Step	Formula	Size
Two steps down	30 ÷ 1.5 ÷ 1.5	13.33
One step down	30 ÷ 1.5	20
Base	30	30
One step up	30 × 1.5	45
Two steps up	30 × 1.5 × 1.5	67.5
Three steps up	30 × 1.5 × 1.5 × 1.5	101.25

These are the desktop defaults on the Spacing screen. Change the base and every step moves with it. Change the ratio and the steps spread further apart or move closer together.

The ratios

Every ratio menu in the plugin offers the same eight ratios. Their names come from musical intervals, which is how type scales have traditionally been described.

Ratio	Name	Feel
1.067	Minor Second	Very subtle steps
1.125	Major Second	Subtle
1.2	Minor Third	Balanced, good for most interfaces
1.25	Major Third	Clear steps
1.333	Perfect Fourth	Strong steps
1.414	Augmented Fourth	Bold
1.5	Perfect Fifth	Very bold
1.618	Golden Ratio	Dramatic

The menus show them as “1.2 - Minor Third”, “1.5 - Perfect Fifth” and so on.

How each screen uses it

Spacing

On the Spacing screen, Base Value is Space M, and Scale Ratio sets the steps:

Space XS	Space S	Space M	Space L	Space XL	Space XXL
base ÷ ratio²	base ÷ ratio	base	base × ratio	base × ratio²	base × ratio³

Section spacing uses the same ratio, starting from a bigger base: Section Space M is the Base Value × Section Multiplier. Spacing values aren’t rounded, so you’ll see sizes like 13.33.

Typography

On the Typography screen, Headings and Text each have a Base Font Size and a Type Scale Ratio, for desktop and for mobile.

H1	H2	H3	H4	H5	H6
base × ratio³	base × ratio²	base × ratio	base	base ÷ ratio	base ÷ ratio²

Text sizes follow the same pattern: Text M is the base, Text L, XL and XXL go up one, two and three steps, and Text S and XS go down one and two steps.

Font sizes are rounded to whole pixels. With the defaults (base 18 px, ratio 1.2 on desktop), the headings are 31, 26, 22, 18, 15 and 13 px. You can also set any level to an exact size with the size overrides on its own tab, for example the H1 tab.

Borders

On the Borders screen, Base Radius is Radius M, and Radius Scale sets the other sizes, with the same steps as Spacing:

Radius XS	Radius S	Radius M	Radius L	Radius XL	Radius XXL
base ÷ ratio²	base ÷ ratio	base	base × ratio	base × ratio²	base × ratio³

With the defaults (6 px and 1.333), that’s about 3.4, 4.5, 6, 8, 10.7 and 14.2 px.

Choosing a ratio

• Start with the defaults. They’re sensible starting points: 1.5 for desktop spacing, 1.333 for mobile spacing, 1.2 for type and 1.333 for radius. Often you only need to change the base value.
• Use a smaller ratio on mobile. Small screens have less room, so big jumps between sizes feel cramped. The spacing defaults do this already.
• Match the ratio to the design. Dense interfaces, like dashboards, work well with 1.125 to 1.2. Marketing sites with big, bold headings can take 1.25 to 1.333 for type.
• Be careful with large type ratios. With a ratio of 1.5 or more, H1 grows fast: a base of 18 px gives an H1 of about 61 px at 1.5. Check your largest heading on mobile.

Change a ratio, click Save, and look at your designs. Every layer that uses the variables updates, so it’s easy to compare.