How Do You Create a Text Style or a Color Style in Figma?

There are two ways to style text in Figma: using the Text Styles panel, or by manually applying text formatting to individual pieces of text.

To create a new text style:

1. Select the Text tool from the toolbar, then click and drag to create a text box on the canvas.
2. Enter some text into the text box.
3. With the text box still selected, open the Text Styles panel from the right sidebar.
4. Click the Create New Style button at the bottom of the panel.
5. A new text style will be created, with the same formatting as the currently selected text. You can now edit this style by clicking on the pencil icon next to its name, or apply it to other pieces of text by selecting them and clicking on the style’s name in the panel.

To format text manually:

1. With the text box still selected, open the Formatting controls from the top toolbar.
2. Here you can change the font family, size, weight, color, alignment, and more. Any changes you make will be applied immediately to your selected text box. You can also use HTML tags to format your text. For example, to make text bold you would surround it with < b > tags, like this: This is bold. To make it italicized you would use < i > tags, like this: This is italicized. And to underline it you would use < u > tags, like this: This is underlined. You can also change the font color by wrapping your text in < font color="FF0000" > tags (with FF0000 being replaced by whatever hex code you want).

Creating a color style is similar to creating a text style:

1. Select the Rectangle tool from the toolbar, then click and drag to draw a rectangle on the canvas.

2. Fill it with whatever color you want by clicking on the color swatch in the top toolbar and selecting a color from either the palette or by entering a hex code directly into the field. You can also add transparency to your color by clicking on the opacity slider next to the color swatch and dragging it to the left. If you want your rectangle to have no fill at all, just click on the “None” option next to the color swatch.

3. With your rectangle still selected, open up the Styles panel from right sidebar.

4. Click on the “Create New Style” button at bottom of panel. This will create a color style with same fill as your currently selected rectangle.

5. You can now edit this style by clicking on pencil icon next its name, or apply it to other shapes by selecting them and clicking on style’s name in panel.

To format colors manually:

1. Select Rectangle tool from toolbar, then click and drag to draw rectangle on canvas.

2. With rectangle still selected, open up Formatting controls from top toolbar. Click on color swatch next “Fill” label. This will bring up color picker. Select whichever color you want, then close out of color picker window. Your rectangle will now befilled with chosen color.