···

    Create and apply text styles

    Who can use this feature

    Anyone on any plan can create styles. Anyone on Education, Professional, Organization, and Enterprise plans can publish styles.

    Anyone with can edit access to a file can create and edit styles. Anyone with at least can view access to a library can use styles from that library.

    Styles allows you to define a set of properties that can be reused across your team or organizations's files and projects. Use text styles to define typographic scale within your designs.

    You can apply a text style to an entire text layer or a range or text within a layer. For example: you can apply header text to an entire text layer, or style a text string within a paragraph as a link.

    Use the table below to see which properties are included in text styles. For more guidance on building typographic systems in Figma, check out our best practices guide.

    Text property Supported in text styles

    Font family, weight, and size

    		 ✓

    Line height

    		 ✓

    Letter spacing

    		 ✓

    Paragraph spacing and indentation

    		 ✓

    Horizontal and vertical alignment

    		 ✕

    Color / fill

    		 ✕

    Decoration

    		 ✓

    Letter case (transform)

    		 ✓

    Lists

    		 ✓

    Resizing behavior

    		 ✕

    OpenType features

    		 ✓

    Explore text properties →

    Create text styles

    From an existing text layer

    Create a text style from any text layer that has the properties you want to use.

    1. Select the layer.
    2. In the Text section of the right sidebar, click .
    3. Click to create a new style.
    4. Give the style a name and click Create style to apply.

    From Local styles

    Once you have created at least one color style within a file, you can view the Text styles section under Local styles in the right sidebar.

    1. Click next to the Text styles section to create a new style.
    2. Give the style a name and description and click Create style.

    Tip! In the Create new text style modal, click under the Properties section to view and edit more type settings.

    Apply text styles

    Apply text styles to any text layers. If the style lives within your current file, you can reuse it anywhere within that file. To use the style in another file, you'll need to publish the styles as a library.

    With the style applied, you can still change any text properties that aren't included in the style. You can also apply color and effect styles to text layers.

    1. Select the text layer.
    2. In the Text section of the right sidebar, click .
    3. Select the style from the style picker to apply it to the selected layer:

    Edit an existing style

    You can adjust the properties of an existing style at any time. This applies to local styles, as well as styles that are published in a team library. You need edit access to the file to change the styles.

    Local styles

    Local styles are styles in the current file. When editing a local style, your changes are immediately applied to any text layers using that style.

    Edit local styles from the right sidebar and from the style picker.

    From the right sidebar

    1. Click on an empty spot in the canvas to make sure you have nothing selected.
    2. In the right sidebar, you'll see a list of local styles.
    3. Hover over the style you want to edit.
    4. Click to open the Edit style modal.
    5. Make your changes to the style properties. You can see a preview of your changes in the modal.
    6. Update the name and description (optional).
    7. Click anywhere outside the modal to save your changes.

    From the style picker

    1. Select a text layer that uses a text style. It doesn't have to be the text style you want to edit.
    2. In the Text section of the right sidebar, click .
    3. Hover over the style you want to edit. Click to open the Edit style modal.
    4. Make your changes to the style properties. You can see a preview of your changes in the modal.
    5. Update the name and description (optional).
    6. Click anywhere outside the modal to save your changes.

    Published styles

    If your styles are published to a team library, you need to edit the style in the library file. You'll need edit access to the library file to make any changes.

    1. Select a text layer that uses a text style. It doesn't have to be the text style you want to edit.
    2. In the Text section of the right sidebar, click .
    3. Right-click the style you want to edit and select Go to style definition.
    4. In the right sidebar, you'll see a list of local styles. Hover over the style you want to edit.
    5. Click to open the Edit style modal.
    6. Make your changes to the style properties. You can see a preview of your changes in the modal. 
    7. Update the name and description if needed, then click anywhere outside the modal to save your changes.

    You'll need to publish these changes as an update to your library. To see these changes in ant subscribed files, you must review and accept the changes.

    Learn how to manage and share styles →

    Related Videos