How to Create Text Styles and Color Styles in Figma

• Color styles: reusable fills for brand and UI colors, applied to fills and strokes.
• Text styles: font family, weight, size, line height and letter spacing saved together.
• Effect styles: drop and inner shadows, layer and background blur, texture and noise.
• Layout guide styles: a set of layout grids, columns or rows you can reuse across frames.

For typography, build the scale before you style anything else. A handful of text styles (display, headings, body, small, label) covers most interfaces, and you can add weights as separate styles, like Body/Regular and Body/Bold, when you need them.

A color library is a file whose job is to hold and publish your color styles (and often variables). Create a color style for each brand and UI color, name them with slashes such as Brand/Primary and Neutral/100, then publish the file from the Assets tab. Other files add it from the Libraries icon. Publishing needs a paid or Education plan and a file outside your drafts.

Use slash naming, like Heading/H1 and Heading/H2, or select several styles, right-click and choose Add new folder. When you move styles into a folder, Figma renames them to match the new hierarchy.

Open the file where the style lives. In the right sidebar, hover over the style and click the adjust icon, or right-click it in the style picker and choose Edit style. You can change its properties, name and description. Every layer using the style updates in that file. Other files get the change after you publish the library again and they accept the update.

In the library file, select one or more styles (Shift-click or ⌘/Ctrl-click), right-click and choose Delete style. Layers using it keep their properties but are detached from the style, so nothing changes visually. Publish the library so other files pick up the removal.

Figma's help center gives two reasons styles don't appear in another file. Check them in this order:

1. The styles aren't published yet. Styles you create only live in their own file until you publish. After edits, publish again.
2. The library isn't enabled in this file. Open Assets → Libraries icon and add the library. You need at least view access to it.
3. You're in a draft on Starter. Drafts can enable libraries through account settings (Library → "Enable Libraries for all files in your Drafts"), and on Starter that covers styles only.

Styles published but still missing in the picker usually point at a library problem. The broader fixes are in Figma library not showing.

A style bundles several values, such as a whole text style, and can't reference another style. A variable holds one value, can reference other variables, and can have a different value per mode, such as Light and Dark. Variables can also be used inside styles, so the two work together.

• Use text styles for typography, since a type style is several values at once.
• Use effect and layout guide styles for shadows and grids.
• Use color variables when you need themes or modes; see how to create variables in Figma and variable modes for dark mode.
• Keep color styles if your team doesn't need modes, or wrap a color variable in a color style so both approaches point at one source.