Text Style Enhancements

I recently jumped into Figma from XD and so far managing assets is miles better than XD but there are some things that I would love to see change about Text Styles.

So far when you create a Text Style you only have the option to override the Color, Alignment, Resizing and convert it into a List but for everything else, you need to create another style.

I would really love to be able to override more options from the Text Style as you do when coding in (ex. CSS).

1. You create a Text Style with a selected Font, Font Weight, Size, Line Height, Paragraph Height, Letter Space, Decoration, Indentation, Cases, and all the other options.

2. When you use that Text Style, you should be able to use it with all it’s properties but just for that special case add some Decoration like Underline, Font Weight etc. while still keeping the other properties.

An example in CSS Would be like this:

h1, .h1 {
	font-family: 'Arial', sans-serif;
	font-weight: 600;
	font-size: 34px;
	line-height: 1.5;
}

.lightFont {
	font-weight: 200;
}

.underline {
	text-decoration: underline;
}

.uppercase {
	text-transform: uppercase;
}

This then would make it a lot easier to do this:

<h1 class="lightFont">This is my <span class="underline uppercase">Title</span></h1>

A title that inherits the style of the Heading 1 but overrides the Font Weight and in some cases transforms the text to UpperCase and adds Underline Decoration

Don’t get me wrong, Figma is way ahead of XD that doesn’t even let you override the Color of the Text Style but this is just another way to make it better so you don’t have to create separate Text Styles for each variant of the same size.