Variant title is too short to read properly

1. Describe the problem your experiencing and how your idea helps solve this
In view only mode the sidebar panel with the variants is so small that you can barely see the title associated with it. This problem also exists in normal edit mode, albeit a lot less intrusive. Since the sidebar is not width-adjustable that makes it difficult to explain some variants.
An obvious solution/idea (I don’t know about the technical constraints here) would be to allow these fields to wrap into new lines. But there are other factors to consider holistically, so I leave the thinking to you guys.

This topic is an extension to this problem: Inspect toolbox truncation issues

2. Add as much context as possible (screenshots, Figma files, mockups, etc.)
See screenshots (1 is viewer mode and 2 is editor mode) and description above. I know that spectators could theoretically infer the variant title from the CSS commentary below, but it’s not a great workaround.

3. Ask questions to bring the community into the conversation
Does anyone else think this should be adapted to allow for more readability within variants? Not just the viewer side, but also within the editor itself.

image
image

3 Likes

I agree with Raphael this is an issue for our team. The variant section is not usable at all in View mode unless you use a copy button to get those key-value pairs. Maybe a tooltip could be helpful here (not sure if such a thing exists in Figma tho).

2 Likes

+1 - this makes the developer experience for someone trying to interpret the design fairly unusable. With design systems picking up momentum and variants being a heavily used concept, it will be great if this can be fixed to make Figma more design system friendly

+1. This makes the variants unusable for people who doesn’t have enough context.