Figma will display the icon in the canvas:.

Paste the icon into your text object in Figma using the keyboard shortcut:.

Based on your icon choice, use the font style field to select Regular or Solid:.

Select the Font Awesome 5 Free font from the list.

In the Text section of the properties panel, click the arrow next to the font.

Right-click on the icon you want to use and select Copy from the menu to add it to your clipboard:.

You'll need to update the font style in Figma to match:

Use the tabs at the top of the page to choose between Solid or Regular Font Awesome icons.

View and copy icons from the Font Awesome cheatsheet. Font Awesome is free to use, or you can purchase an extended range of icons.įont Awesome has both regular or solid versions of an icon. If an icon isn't showing up when you paste it, you may need to switch to the solid style to see the icon. Font Awesome iconsīy default, Figma supports Font Awesome, a popular set of icons in an easy-to-use font. Like regular text, icon fonts can be styled using CSS, which makes them popular in web development. Icon fonts are fonts that are made up of symbols, as opposed to regular letters and numbers. You can add icons to your designs as actual images, or use an icon font. Icons are images or symbols that represent specific actions or tools in an interface. To see these changes in ant subscribed files, you must review and accept the changes.You will need to have can edit access to a file to edit any text layers. You'll need to publish these changes as an update to your library.

Update the name and description if needed, then click anywhere outside the modal to save your changes.

In the right sidebar, you'll see a list of local styles.

Right-click the style you want to edit and select Go to style definition.

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

Hover over the style you want to edit.

It doesn't have to be the text style you want to edit.

Select a text layer that uses a text style.

Click anywhere outside the modal to save your changes.Update the name and description (optional).You can see a preview of your changes in the modal. Make your changes to the style properties.Click on an empty spot in the canvas to make sure you have nothing selected.When editing a local style, your changes are immediately applied to any text layers using that style.Įdit local styles from the right sidebar and from the style picker. Local styles are styles in the current file. You need edit access to the file to change the styles. This applies to local styles, as well as styles that are published in a team library. You can adjust the properties of an existing style at any time. Select the style from the style picker to apply it to the selected layer:.You can also apply color and effect styles to text layers. With the style applied, you can still change any text properties that aren't included in the style. To use the style in another file, you'll need to publish the styles as a library. If the style lives within your current file, you can reuse it anywhere within that file. Apply text stylesĪpply text styles to any text layers. Tip! In the Create new text style modal, click under the Properties section to view and edit more type settings. Give the style a name and description and click Create style.Click next to the Text styles section to create a new style.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.

Give the style a name and click Create style to apply.In the Text section of the right sidebar, click.Text propertyĮxplore text properties → Create text styles From an existing text layerĬreate a text style from any text layer that has the properties you want to use. For more guidance on building typographic systems in Figma, check out our best practices guide. Use the table below to see which properties are included in text styles. For example: you can apply header text to an entire text layer, or style a text string within a paragraph as a link. You can apply a text style to an entire text layer or a range or text within a layer. Use text styles to define typographic scale within your designs. Styles allows you to define a set of properties that can be reused across your team or organizations's files and projects. Anyone with at least can view access to a library can use styles from that library.

Anyone with can edit access to a file can create and edit styles.

Figma use local fonts