Ghosted preview of "As typed" text while editing

Problem:

Currently, if we set a text style’s case to anything other than “As typed” (eg, “Uppercase”), we are unable to see the actual case we are typing into a component that uses that style (aside from the left-hand Layers panel IF the component we’re typing into doesn’t already have a custom name).

I often explore different case styles in my components as I’m designing to see what works best for the overall look. This typically means setting the case style of buttons and some labels to Uppercase for a while to see if I like the feel.

I inevitably end up entering some text into multiple components using this Uppercase style, but because I don’t notice that my caps-lock is enabled or I think I have toggled caps when I haven’t, I end up writing something like “bUTTON tITTLE” in the component. Visually, I see “BUTTON TITLE” so I don’t think anything of it and continue on.

Later on, when I decide I want to switch back to “As typed” to see how that feels in terms of where the eye is drawn to, I suddenly notice I have made case mistakes all over my design system. “sOME CATEGORY” here, “cHECKOUT” there.

Solution:

Show a ghosted version of the as-typed text above the component while editing it. Here is a tweet containing a video demonstrating the suggested user experience, since I am unable to upload attachments as a new user:

Example Video

  • Adam

Hey @AdamEisfeld, thanks for the feedback!

We’ll pass this onto the team for future consideration.

1 Like