Improving the Typogrphy variable system (Hack)

General Discussion
,
1

I’m working on creating a simple and efficient typography design system. I’ve come up with some clever tricks to make it very effective. I started by defining some variables and then applied them to a single Text Style. This allowed me to easily adjust various aspects of the typography through the “Change variable mode” layer. This method avoids the clutter of numerous Text Styles and eliminates unnecessary details, making it easier for designers to navigate through the font family and size options.

would love some feedback

image
image534×225 9.52 KB

2

I like to use styles, because they are named semantically. Heading 1, 2, 3, 4, Text Large, Default, Small, Eyebrow. Setting them up may be more work, but then working with them in design is much faster. Change every property in 2 clicks.

Also I like to apply variable collections on master frames. Theme collection for light/dark mode, Breakpoint collection to change frame width, gap, spacing, font sizes with Desktop, Tablet and Mobile modes. If I would have micro-variables applied this might not work.