Problem
The UI for viewing and editing text styles in Figma has a clear and well-structured hierarchy.
Styles are grouped logically (e.g. body → size → role), which makes them easy to scan and understand.
However, the UI shown while applying text styles to typography does not follow the same structure.
All styles appear as a flat list with limited hierarchy, making it harder and slower for designers to scan and select the right style—especially in large design systems.
Why this is an issue
-
Designers rely on quick visual scanning when applying text styles.
-
In large DSMs, flat lists increase cognitive load and selection errors.
-
The inconsistency between Edit/View UI and Apply UI breaks mental models.
Suggested Improvement
Make the Apply Text Style UI follow the same hierarchy and grouping used in the Style View/Edit UI.
For example:
-
Group styles by category (Body, Heading, Caption, etc.)
-
Nest sizes and roles (xsmall, small, medium → base, prominent, link)
-
Maintain visual hierarchy and spacing for faster scanning
This consistency would significantly improve usability and efficiency when applying typography styles.
Impact
-
Faster style application
-
Better scalability for large design systems
-
Improved consistency and usability for designers