Accessibility text scale using figma variables

Test iOS text scaling directly in your design.

Tag

text

text

text

You can test out your design with accessibility text in iOS by setting variables number and assign the to the typography style. We were able to set the all the modes in one collection with the Enterprise plan. If you are on lower plans you need to split the Collections in two or three.

Set the scale

Apple provides recommended accessibility font size in the Human Interface Guidelines but you if can also set your own custom values.

Set the variables

We created a number variable for each Typography style in our app and a mode for each text scale size. We ended up with some decimals value because we generated a in-between value from the max and min size in a linear scale. Remember to also set a line-height variables to allow text box to expand togheter with the font size.

Assign variable to text styles

Now that we have our variables in place we can and linked them to a text style font size value. In this example we assign the Title Medium font size variable to a Font Medium text style.

Test your design

Apply the different mode to your design Make sure auto-layout is in place to allow component to accommodate the larger and smaller text size.