[Beta] Text formatting in symbol instances

Sooo often I have the pain of not being able to make the simplest typographic settings within symbol instances.

The following example. I have created a layout section as a symbol. Perhaps a hero with a key visual for a homepage. This hero contains an image and text, as well as one or two CTAs.

Now, of course, I would like to create several variants of it by changing the symbol instance via override: Different image, different text …

And now, for example, I have highlighted certain words or text passages in the text as bold text for better cross-reading, although the text style on which the symbol is based is regular. In a group, I could easily bold text passages using CMD-B or switch to italic using CMD+I. Unfortunately, this does not work with symbol instances.

So I only have two options at the moment:
1.) either I detach the instance from the symbol so that it is a group again … then I can partially change this simple text formatting. However, this would make a mockery of the concept of symbol instances that can be changed via override.
2) I leave the text as it is and cannot make any modifications.

Both are very unsatisfactory.

Can we please have simple text formatting options
CMD+B and CMD+I and CMD+U for symbol instances? :pray: Thank you.

I often need to mock up search results on a list. It’s important for our flow that I show the parts of the string that matched.

For example I search for ord
The results should show:
Order
Coordinate
Password

I want to use symbols for these results, so I can later update iconography, alignment, etc. But I am not able to because symbols don’t support substring text formatting.

The way I handle this (which is admittedly a hassle, but I can’t see any other way), is that in a symbol I’ll create a group with horizontal SmartLayout turned on. Then that group will have 3 separate text layers next to each other.

When you view the symbol instance you can now decide which text layers to make bold (first, middle or last).

2 Likes

Ah yes, I’ve done that before. Ended up being a hassle. Also, for my purpose I had the need to sometimes make the text dimmer, italic, or bold, and to have random ranges.

But you’re right, for the case I described, your idea would work!

Another case that doesn’t work is to show fuzzy matching.
If I search for FCP I would get a result for Final Cut Pro.
So the arbitrary nature of the results makes it really tricky to do with a symbol without some major gymnastics.

I’d like to throw my hat in the ring for this! I many times have to create another symbol (or detach it) just because I want to bold a word (think of the help text example).

2 Likes

A very common pain point for me is that I have a symbol that contains the text. In some instances when I use the symbol the text needs to have a special styling, e.g. a custom color, font weight, etc. - however, this is currently not possible. So the only options are to duplicate the symbol (defeating the point of using a symbol) or detaching the instance from the symbol (also not great).

1 Like

Merged topics :slight_smile:

And welcome @simmenfl thanks for sharing the idea!

Hi there and welcome!

What you mention in the quote is possible right now! You can change the following properties of text in a symbol

  • Font weight
  • Text color
  • Text decoration: underline or strikethrough
  • Text alignment: left, center, right

You can also apply a different text style.

What’s not possible is to apply different styles to the same text layer.

Here’s a quick video, I hope it helps:

Hi Jorge, thanks for the suggestion. I apologize for the confusion in my initial description. What I intended to convey is that I need the ability to partially change the text styling. Specifically, I want to be able to highlight a particular word within a long text by making it bold or a different color. Currently, this feature isn’t available, but I find myself needing it frequently.

1 Like

Ohh got it, thanks for clarifying. Yep, that’s the part we’re missing now.

I’ve merged these two posts.

Additionally, we’re developing basic Markdown support to text overrides so you can quickly make specific text bold, italicised or underlined.

3 Likes

Similar problem here. I have a text block I have written, and only want to bold one of the words in a sentence. SketchWOW will apply bold to the entire block. If I used manual keyboard Ctrl+B to a word I select, then it does appear bold on screen, but when I export it, the bold has disappeared. This is a very simple word processing function I feel.

Thanks for sharing and welcome to the forum @SF_SKETCHWOW !

We agree and are working on a solution. I expect it to be officially released in a couple of months, and sooner via our beta.

1 Like

Hey @here :wave: I know you’ve waited a while to do this. Thanks for your patience. We’ve released this in our latest beta, so feel free to try it out.

Thanks also for repeatedly mentioning this to us—it has certainly helped!

You can use this syntax to apply bold, italic, and [underline] formatting to any text overrides in the Inspector. Or you can select the text on the Canvas and hit ⌘ B, ⌘ I, or ⌘ U.

2 Likes