LAUNCHED: Allow modifying "Decoration" to the text styles already defined

This seems to have been implemented this week… I can hit cmd+B to bold a text without breaking the text style. BUT I can’T find any official mention of it anywhere in Figma’s changelog. I want to see all the possible options for this kind of formatting

Hey All,

Applying italics, bolding, and underline to text on top of a text style will now override the text style to apply the decoration. You no longer have to detach decorated text from its text style or create multiple text styles to incorporate italics, bolding or underlines! 🎉

⌘B or Ctrl+B = bold
⌘I or Ctrl+I = italicize
⌘U or Ctrl+U= underline
⌘⇧X or Ctrl+⇧X = strikethrough

Cool to see this implemented – is there any way to control what font weight the ‘bold’ override uses? For instance using a semi-bold weight rather than full bold.

This feature is super useful 🙂 , but it doesn’t solve much for those who use fonts that require semibold weights 😦

Am I the only person here who doesn’t know how on earth are you doing that? I can’t find a way to do this anywhere, not even in the video… there are no new icons, no anything, is it some shortcut I am not aware of? I really love having to google how new features work, because they are so unintuitive, only to end up on forums, where I get to see a short clip with absolutely no explanation.

ctrl/cmd+b to make the text bold.
ctrl/cmd+i to make the text italic.
ctrl/cmd+u to make underline.

I have no idea why they still hide the buttons, so unintuitive.
@dvaliao

I agree with @Weirdo , it’s unintuitive.
I will forget about this update when I need it because it’s not visible and it looks like nothing has changed.

I had to google this to find out how it works. What’s the point?

Hey @Daniel_Cullinan and @Vale_Ria, thanks for the feedback!

This is a feature limitation the team is aware of, but they hope to staff an effort to support semibold (and other weights) in the future! 🙏

Hey @Petr_Siroky, @Weirdo, and @Apolline, thanks for the feedback!

This was actually a mini launch to see who in the community might find this update ahead of Config. Users started discovering the capability last Tuesday, so they gave me the green light to share and update this feature request.

The team planned to formally share post-config with all of the necessary updates to the Help Center, Release Notes, etc. The shortcuts were listed within Miggi’s tweet in-thread above, but I understand the confusion. I edited my previous reply for clarity.

@dvaliao Decorations do not work on text in components.

For example I wanted to create “text-link” component with two variants for states: rest and hover. Then I applied underline decoration to the text in the hover variant. Underline shows in the main component, but it’s missing from any instance of that component.

So there is no way of currently telling it which weight to choose if i bolden it? I tried using a Mode to declare a different variable for “(B)”, but it wouldn’t pick it up.

I came here to post about this bug. I can set all the style overrides I want in the main component, but the instances don’t retain them. I have to redo the formatting manually and it’s tedious.

Hey @Bart_K, thanks for flagging this and sorry for the delayed reply!

Our team tried to reproduce the issue, and we found that it should work if you set the underline before changing any text on the instance.

You can also set the override onto the instance manually too, as @Ashlee_Williams mentioned, we agree that this would be tedious.

Yes, @Julius_Klaus - that is correct.

Right now, the feature wasn’t built to support all types of bold weights, and sorry for the delayed reply!

Hi,
Applying Bold or Italic through the shortcuts aptly shows a (B) or (I) after the styles’ name. Unfortunately, no such indicator is present when applying Strikethrough. Shame!

Hey @AntoineP, sorry for the delayed reply!

As I mentioned above, creating shortcuts for other types of text decoration in addition to different bold weights, strikethrough, etc. will come in the future.

I have the same issue (text decorations applied to components are not applied to instances). To be more specific, as soon as instance text is changed, text decorations disappear from the instance. Every time.

If you can’t edit the text in instances (and maintain decorations), it defeats the purpose of having the option to apply text decorations to styles.

The new bold text solution would be useful if we could set the weight it applies to a corresponding font-weight variable so that it uses the correct weight and displays the correct syntax for that weight in dev mode.
Also, we need to have underline offset, weight and colour please 🙂

Not only that. Please make it easier to modify existing styles in bulk. Currently if you need to modify the Text Case for 12 styles, you have to do them one-by-one. There isn’t even a plugin that can do that without breaking the Text Styles linkage. Since we use a template, I have to repeat this process for every client that needs it to be upper/lower/none case. Yuck.

Looks like Figma added quite a bit of support for this…which blows my almost-finished plugin that was going to polyfill the missing text-decoration features out of the water! 😢

Oh well…I still have a few more tricks up my sleeve that should make the plugin useful…

Does it make them happy though?

Or does it open up a scary can of worms where they see in Figma that the style applied to text is Roman, so they apply their code for Roman. There is nothing there that clearly indicated the text style is italic.

We cannot expect anyone, design or dev, to recognize it visually. Work happens more by what it is defined as, which is the applied style of Roman.

I love the decoration idea. I wanna love it. But it just makes me see all sorts of missed application of proper styles ahead.