Combining color styles and text styles

As I previously mentioned, color is not part of a text style in Figma, but you can apply a separate color style to a text object, or even highlight and apply multiple color styles to different selections of text (in the same text box!). Although applying the color style is an extra step, your system will be much easier to maintain when you don't have to create a text style for every possible color combination.

With the growing need for accessible colors in design, many teams will define color pairings for text and background color. One strategy for creating these pairings is to save color styles specifically for text; then use the style descriptions to indicate the corresponding background color they are intended to be used on top of.

Another approach to managing color pairings is to build components. This is particularly helpful if you have consistent text arrangements that get used throughout your designs.

For example, if you had a particular text and color arrangement for pull quotes in your product, you might apply all of the necessary text and color styles to a sample pull-quote object, and componentize it into an easy to re-use component. Even if designers find the need to detach the component to change the actual text, all of the text styles will still be applied.