Related Videos

• Getting started with text

  Text is one of the crucial components of interface design. It can help determine the legibility and appeal of your design.

  Your decisions around text can impact how successfully you convey your message. Everything from the placement and arrangement of text, to the choice of font, has a part to play.

  Figma's text rendering

  There can often be a difference in how browsers and operating systems render text. This can make designing across systems and platforms unpredictable.

  Figma uses its own custom text rendering. This ensures your designs look consistent, regardless of your browser or operating system.

  Getting Started

  • Create type layers with the Text tool
  • Explore OpenType and other text properties

  Fonts

  • Access your local fonts with the Font Helper
  • Add icons to text layers with icon fonts 
  • Manage missing fonts
  • Add text in Chinese, Japanese, and Korean

  Style text

  • Create and apply text styles
  • Create a bulleted list
  • Add links to text
  • Add emoji to text layers

  Edit text

  • Edit text layers
  • Resize text layers
  • Convert text to vector paths
  • Information on changes to line height behavior
• Explore text properties

  Before you start

  Who can use this feature

  Users on any team or plan can use text properties.

  Users with can edit access to a file can apply and adjust text properties.

  Text is a crucial aspect of interface design. Everything from the placement to font choice, has a part to play.

  Text properties allows you to control everything from the appearance and position of text, to resizing behavior and OpenType features.

  In this article, we'll take you through all the properties available for text. As there are a number of properties available we've grouped them by location.

  Text in the properties panel

  Apply and adjust text properties in the Text section of the properties panel.

  Use the annotated image below to identify each property in the properties panel. Click the link to learn more about each property.

  1. Click the icon to view, create and apply Text Styles
  2. Click the arrow to browse a list of web, local and shared fonts to find a typeface or font family
  3. Use the arrow to select a font style or weight
  4. Use the arrow to adjust the size of your text
  5. Adjust the vertical distance between lines of text using the line height field.
  6. Adjust the horizontal distance between letters with letter spacing
  7. Adjust the vertical distance between paragraphs with paragraph spacing.
  8. Select how text overflows or wraps with resizing behavior.
  9. Adjust the horizontal alignment of text within the text box.
  10. Adjust the vertical alignment of text within the text box.
  11. Click to open the type details menu and explore more text properties.

  

  Font family

  There are a few terms associated with a font:

  • A typeface is a set of letterforms and glyphs with similar design features.
  • A font is a file containing the visual details that make up the design of each glyph or letter in that typeface.
  • A font family is the collection of styles that make up a typeface.For example: Helvetica, Times New Roman and Roboto are all font families.

  Figma will use Roboto as the default font for new text layers. You can select another font family using the font picker. Click the arrow to explore styles for thee selected font.

  Font weight

  A typeface can have any number of styles or weights. Every font family will come with its own selection of styles. Some of the styles for the Roboto font family are: thin, light, regular, and medium.

  You can access weights once you select the font family. Adjust the font weight using the field directly below the font family.

  • Click the arrow to explore styles for thee selected font.
  • Use the keyboard shortcuts to increase and decrease the font weight.
    • Mac: Hold down ⌥ Option ⌘ Command and < to increase or > to decrease.
    • Windows: Hold down Ctrl Alt and < to increase or > to decrease.

  Font size

  Font size controls the scale of your text. Figma represents font size in density-independent pixels.

  Adjust the font size using the field next to the font style. There are a few ways to adjust font size:

  • Click the arrow to select a default font size.
  • Enter your own number in the field.
  • Use the keyboard shortcuts:
    • Mac: Hold down Shift ⌘ Command and < to increase or > to decrease.
    • Windows: Hold down Ctrl Shift and < to increase or > to decrease.

  Figma represents text sizes in a few different ways.

  If you're translating your designs to code, your screen resolution will determine the actual size of any text. You can view the CSS pixel value (px) of any text in the Inspect panel.

  If you're exporting your designs to PDF, Figma will render font size using traditional print points (pt).

  Line height

  Line height allows you to control the vertical distance between lines of text in a paragraph. This can help to balance designs and improve readability of your copy. This is the same as line spacing.

  Small line heights can make text difficult to read. Large line heights can make text look messy and disjointed.

  Use the field to adjust the vertical space between lines of text, or use the keyboard shortcuts:

  • Mac: Hold down ⇧ Shift ⌥ Option and < to increase or > to decrease.
  • Windows: Hold down Alt Shift and < to increase or > to decrease.

  Figma allows you to set a fixed line height in pixels (px) or a line height that's a percentage of the font size (%).

  Figma uses a font's intrinsic line height as the default value(Auto), which varies between typefaces. You can switch between fixed and percentage line heights and Figma will convert the value for you, to the nearest pixel.

  Translating line height: The Inspect panel allows you to view your designs as code. Each platform has a different way of representing line height.

  Figma includes the appropriate values and measurements for each platform, as well as alternative units of measurement.

  Letter spacing

  Letter spacing lets you define the space between characters in a word, line, or paragraph. This can determine how easy your text is to read.

  This is not to be confused with kerning, which refers to the process of adjusting space between individual characters in a typeface.

  Adjust the letter spacing for an entire text layer, or a selection of text. To replicate kerning, place the cursor between two letters and adjust the letter spacing.

  Use the field to adjust letter spacing for your selection, or use the keyboard shortcuts:

  • Mac: Hold down ⌥ Option and < to increase or > to decrease.
  • Windows: Hold down Alt and < to increase or > to decrease.

  If you select text with different letter spacing values, Figma will scale the letter spacing proportionally.

  Tip! Tracking describes the letter spacing process in pre-digital systems and is usually represented in pixels (px). Use this formula to convert tracking to letter spacing: 1000px tracking = 100% letter spacing = 1em letter-spacing (CSS)

  Paragraph spacing

  Paragraph spacing lets you control the distance between paragraphs. This can increase or reduce the whitespace around text in your design. White space can help to focus the viewer's attention, as well as increase legibility and readability.

  Figma represents paragraph in pixels (px). Enter a px value in the paragraph spacing field. Or hover above the icon and drag to decrease (left) or increase (right) the value.

  Note: Figma will create a new paragraph when you use the Enter or Return keys. This is something to bear in mind if your text resizing is set to Auto Width.

  Resizing

  The resizing property controls how a text layer shrinks or grows to accommodate its contents. There are three settings available:

  • Auto Width: The width of the text layer will grow so that all the content fits within the layer's bounds. Figma will create new lines of text when you use the Return or Enter key.
  • Auto Height: The height of the text layer will grow to fit its contents. Figma will wrap any lines that extend beyond the original width of the text layer to a new line.
  • Fixed Size: Both the width and height of the text layer will stay the same, regardless of the layer's contents. Figma will wrap any additional text that extends beyond the layer's horizontal bounds. Text can still extend beyond the text layer's vertical bounds without clipping. This can make aligning this with other layers difficult.

  Note: When you click in the canvas to create a text layer, Figma uses Auto Width. If you click and drag in the canvas, Figma will use Fixed Size. If you adjust the size of a text layer after it is created, Figma updates the resizing to Fixed Size.

  Horizontal alignment

  Alignment determines how we distribute text within its bounding box. Horizontal alignment defines how you align the text along the x axis (horizontal).

  Left-aligned text is commonly used for paragraph text. Whereas center-aligned text is often used for shorter lines of text, like headings.

  Use the icons to select the horizontal alignment. Choose from:

  • Left
  • Center
  • Right
  • Justify*

  Justify aligns the first word in each line of text to the left-most edge, and the last to the right-most edge. Figma spaces each word in a line of justified text uniformly.

  Vertical alignment

  Alignment determines how we distribute text within its bounding box. Vertical alignment aligns text along the y axis (vertical).

  Use the alignment icons to select a vertical alignment. Choose from:

  • Top
  • Middle
  • Bottom

  Note: It's only possible to vertically align text in text layers with a Fixed Size. Layers with resizing set to Auto Width or Auto Height will ignore alignment.

  Type Details panel

  The Type Details Panel gives you access to some extra Text properties. You can also access any OpenType features from this panel.

  To open the Type Details panel, click the three dots in the bottom-right corner of the Text section.

  1. View a preview of any text properties
  2. Adjust the horizontal alignment of text
  3. Apply decoration to text, which includes:
     1. Underline
     2. Strikethrough
  4. Offset the first line of text with paragraph indentation
  5. Adjust the letter case. Choose from Uppercase, Lowercase, Capitalize and Small Caps.
  6. Apply any number settings, including: Style, Position, Fractions and any related OpenType features.
  7. Access any OpenType features.
  8. Click to close the Type Details panel.

  

  Preview

  Use the preview at the top of the type details panel to see how a particular property or OpenType feature looks. Hover over any feature or property to see the preview.

  Figma will display sample text that best suits the feature you're previewing. This includes:

  • Blocks of text for alignment, spacing and indentation.
  • Numerals for any number properties.
  • Letters (or combinations of letters) affected by ligatures or stylistic alternatives.

  Decoration

  Apply text decoration to an entire text layer, or to selected text. You have two types of decoration available:

  Strikethrough

  Strikethrough adds a horizontal line through the center of your text.

  Use strikethrough to indicate obsolete or inaccurate information. This allows you to convey its state, without redacting or obscuring the original text.

  Click the icon to apply strikethrough to selected text.

  Underline

  Underline adds a horizontal line along the baseline of your text. Use underline to place emphasis on a particular section of the text, or show that it includes a link.

  Underlining links is considered good practice in web design. If applied consistently, this can help to improve the accessibility of your design.

  Click the icon to apply underline to selected text.

  Tip! Apply an underline to selected text using the keyboard shortcut:

  • Mac: Option U
  • Windows: Ctrl U

  Paragraph indentation

  Paragraph indentation offsets the text in the first line to the right. You can only apply Paragraph indentation to text that uses Text-Align Left.

  A good rule of thumb is to avoid indentations greater than 4 x the font size. We also recommend taking the width of the text layer into account - the wider the layer, the larger the indentation.

  Figma represents paragraph indentation as a pixel (px) value. Use the Paragraph Indent field to adjust paragraph indentation.

  Tip! Paragraph indentation applies to all paragraphs in a text layer. If you wish to indent a single paragraph, you will need to create a separate text layer for it.

  Letter case

  Letter case allows you to change the case of selected text. This is super handy when you want to switch between cases without having to delete and retype your text. Choose from:

  • Uppercase: transforms text to UPPER CASE
  • Lowercase: transforms your text to lower case
  • Capitalize: transforms the first character of every word to upper case. You may know this asTitle case
  • Small Caps : transform text into Small Caps. This displays uppercase letters inline with lowercase letters. While this looks like an UPPERCASE transformation, it's a little different. Small Caps characters usually have different proportions (e.g. weight, aspect ratio).

  Number

  The number section includes any properties or features for numerical figures. The properties in this section will depend on the font family you are using.

  1. Change the figure Style options including: Proportional or Tabular Lining; and Proportional or Tabular Old Style.
  2. Offset numbers as subscript or superscript
  3. Create fractions from numbers. Enter a fraction as X/X

  OpenType features

  OpenType can refer to a format, or a set of features or functions available in a font. In this article, we're referring to OpenType features.

  Figma supports OpenType features across all fonts. Not all fonts support the same OpenType features.

  Typeface creator's have full control over which OpenType features they support. They could be popular features - like kerning, case or numerical figures. Or, custom features like alternative characters or glyphs, and stylistic alternatives.

  OpenType features vary between fonts, so we won't post a list of possible features.

  Instead, we'll show you how to use the Type details panel. This will allow you to explore and interpret a font's available OpenType features.

  Tip Learn more about OpenType and Figma in our blog post: An Ode to OpenType

  Explore OpenType features from the Type Details panel.

  • We display any OpenType features that the font supports below the Numbers setting.
  • We will grey out the OpenType feature if a font does not support it.
  • Hover over a feature's button to view a preview of the feature.
  • We group OpenType features accordingly:

  1. Letterforms including:
     • Ligatures
     • Rare Ligatures
     • Contextual Alternates
     • Ordinals
  2. Stylistic Sets ssxx vary greatly - in name and availability - between fonts. A font can support up to 20 stylistic sets. Some examples include:
     • Stylistic Alternates
     • Alternate Digits
     • Disambiguation
     • Lower case R curves into rounded neighbors
  3. Character Variants cvxx vary greatly - in name and availability - between fonts. These are at the discretion of the typeface creator. They could include the following types of variations:
     • Open Four
     • Closed lower case G
     • Closed lower case A
  4. Horizontal Spacing like: kerning.
  5. More features like: Fraction denominators and numerators.

  

  Other Properties in the Properties Panel

  You can also apply other properties to text layers.

  Fill

  Use the Fill property to apply paints to text.

  1. Find the Fill section of the Properties Panel.
  2. Click the Fill thumbnail to open the Color Picker.
  3. You can then:
     • Select a color from the canvas using the Eyedropper
     • Explore colors and opacities using the sliders
     • Select a color from your available Styles, or from the document's colors
     • Enter a specific HEX or color profile code in the field provided

  Stroke

  Apply stroke properties to text. This will apply a stroke around every character in your selection.

  • Fill
  • Weight
  • Distribution
  • Cap
  • Join
  • Dashes
  • Miter Angle

  

   

  Effects

  Text layers also support shadow and blur effects.

  1. Click the next to the Effects property to add an effect.
  2. Figma will apply Drop Shadow by default. Click the to select another effect:
     • Drop Shadow
     • Inner Shadow
     • Layer Blur
     • Background Blur
  3. Adjust any settings as desired.
• Create type layers with the text tool

  Before you start

  Who can use this feature

  Users on any team or plan can create text layers.

  Users with can edit access to a file can create new Text layers.

  Text is one of the crucial components of interface design. Everything from the placement and arrangement of text, to the choice of font, has a part to play.

  Figma uses its own custom text rendering. This ensures your designs look consistent, regardless of your browser or operating system.

  Create text layers

  Create new text layers using the text tool. 

  • Select the Text tool in the Toolbar.
  • Or, press the T key to use the Text tool keyboard shortcut.

  

  Once you have the Text tool selected, you can create a text layer in the canvas. 

  We have two default behaviors available when you create a new text layer. Figma uses a different text resizing property, depending on which approach you use.

  Single click

  Click on the canvas to create a new text layer. This will create a layer with text resizing set to Auto Width. This allows the width of the text box to grow as you add more text.

  You may also know this as point text, paragraph text or area text.

  1. Single click anywhere on the canvas.
  2. Start typing to create a text layer.
  3. Press Enter or Return to create a new line.

  

  Click and drag

  When the text tool is selected, click and drag on the canvas to create a new text layer.

  This creates a layer with text resizing set to Fixed Size. This allows you to enter longer strings of text and have them wrap and overflow on to a new line. This is also known as area text.

  1. Click somewhere on the canvas.
  2. Drag to create a Text layer with specific dimensions.

  

  Tip! Adjust the resizing behavior in the Text section of the right-side panel. .

• Edit text layers

  Before you Start

  Who can use this feature

  Users on any Figma team or plan can use the text tool

  Users with Edit access to a file to create and edit text layers

  Want to adjust the properties of a Text layer? Check out our Explore Text Properties article.

  You can make changes to the content of any text layer you have created.

  Select text layers

  You can select a single Text layer at a time, or multiple.

  Select a single layer

  Click on the text layer in the canvas or in the layers panel.

  Select multiple text layers

  1. Select the first layer.
  2. Hold down the Shift key.
  3. Click on any additional layers to select them:

  

  Select all text layers

  1. Open the main menu. You can use the keyboard shortcuts:
     • MacOS: Command /
     • Windows: Ctrl /
  2. Search for Select All Text Layers. You can also choose to select layers with the same properties.

  Tip! You can also choose to select Text layers with the same properties!

  Edit the contents

  To make changes to the content of a Text box, you will need to enter Text Edit mode. You can enter text edit mode in a couple of ways:

  • Double-click on the text layer.
  • Select the text layer and press the Enter or Return key.

  Edit the contents of the Text box:

  

  Tip! Once you are in Text edit mode you can click into any other text layer on the page to the enter its contents.

• Add Emoji to Text Layers

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can add Components to text layers.

  You can add emoji to any Text object on your canvas, or in your Comments. Figma uses the Apple emoji style.

  MacOS

  You can add emoji to any Text object via the Emoji Picker:

  1. Create a Text object in the canvas.
  2. Use the keyboard shortcut Ctrl Command Space to display the Emoji picker: 
  3. Type the name of your emoji in the field provided.
  4. Select the emoji from the search results to add it to the Text object.

  Windows

  Before you can add emoji to Text objects, you will need to enable the Touch Keyboard:

  1. Right-click on the Windows task bar.
  2. Click on the Show touch keyboard button.

  You can then add emoji to any Text object via the touch keyboard:

  1. Create a Text object in the canvas.
  2. Click the Touch Keyboard icon.
  3. Select the Emoji option:
  4. Choose the emoji you would like to use, to add it to your Text object.
• Create a bulleted list

  Before you Start

  Who can use this feature

  Users on Any plan can use the text tool

  Users with Edit access to a File to create and edit text layers

  At the moment, there isn't a purpose-built bulleted list feature in Figma.

  Instead, we'll be using text layers, Smart Selection, and Components to create a bulleted list.

  1. Create a Text layer for the bullet
  2. Create a Text layer for the list item
  3. Duplicate both layers to create further list items
  4. Use Smart Selection to adjust the spacing between items
  5. Create Components to reuse in your designs (Optional)

  Replicate a bulleted list

  Create a text layer for the bullet

  1. Select the Text tool in the toolbar or by pressing the T key.
  2. Create the text layer for the bullet.
     1. Click on a spot in the canvas to create a resizing text layer. 
     2. Click and drag to create a text layer with a fixed size
  3. Use the keyboard shortcut to add a single bullet in the Text layer:
     
     • macOS: ⌥ Option 8
     • Windows: Alt 0 1 4 9

  

  Create a text layer for the list item

  Create a second text object next to the bullet. This is where we'll add the text for the first item on our list.

  

  Note: If you are using different a font or font size is used between the bullet and the text, make sure the line height is set to an equivalent value.

  Copy your bullet and item

  Select both Text Layers and copy them. You can use any of the following methods.

  Duplicate:

  • macOS: Command D
  • Windows: Control D

  Copy and paste

  Use the Copy and Paste shortcuts:

  macOS: Command C and Command V

  Windows: ControlC and Control V

  Drag to copy

  1. Hover over the selected layers, hold down the Option key and drag to create a copy of those layers.
  2. Release your mouse/trackpad before you release the Option key.

  Adjust spacing with Smart Selection

  You can now adjust the space between the bullet and the text, as well as the spacing between each list item.

  Use Smart Selection to create uniform spacing between objects.

  

  Tip! Create a Component for the bullet and the Text box to reuse the bullet for each item in the list. Learn more about creating components in our Getting started with Components article.

• Create and Apply Text Styles

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can create and edit Styles.

  Users with View access to a File can use Styles from libraries they have access to.

  Styles allows you to define a set of properties that can be reused across your team's designs.

  You can apply a Text Style to an entire block of text e.g. headings (h1, h2 etc). Or, to text strings within a text layer e.g.links.

  I want to:

  • Create a Text Style
  • Apply a Style to Text
  • Edit an Existing Text Style

  Create a Text Style

  You can create a Style from an existing Text layer.

  1. Select a Text layer that has the properties you want to reuse.
  2. Click the Style icon (four dots) in the Text section of the Properties Panel: 
  3. Click the "+" icon in the Text Styles menu to create a new style.
  4. Give the Style a name and click Create Style to apply.

  Apply Styles to Text

  You can then apply that Style to other Text layers within that File.

  Tip You can also apply Color and Effect Styles to Text layers!

  1. Select the Text layer you want to apply the Style to.
  2. Click the Style icon (four dots) in the Text section of the Properties Panel.
  3. Select the Style from the options to apply it to the selected Text 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.

  • When editing Local Styles, your changes will immediately be applied to any Text layers in that File. 
  • For Styles in a Team Library, you will need to publish and accept these changes to see them in your designs.

  Learn more about making changes to Styles in our Managing and Sharing Styles article.

• Add icons to text layers with icon fonts

  Before you start

  Who can use this feature

  Users on any plan can use icon fonts in their designs.

  You will need to have can edit access to a file to edit any text layers.

  Icons are images or symbols that represent specific actions or tools in an interface. You can add icons to your designs as actual images, or use an icon font.

  Icon fonts are fonts that are made up of symbols, as opposed to regular letters and numbers. Like regular text, icon fonts can be styled using CSS, which makes them popular in web development. 

  Font Awesome icons

  By default, Figma supports Font Awesome, a popular set of icons in an easy-to-use font. Font Awesome is free to use, or you can purchase an extended range of icons.

  Font 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.

  

  In Font Awesome

  View and copy icons from the Font Awesome cheatsheet.

  1. Open the Font Awesome cheatsheet
  2. Use the tabs at the top of the page to choose between Solid or Regular Font Awesome icons. You'll need to update the font style in Figma to match: 
  3. Right-click on the icon you want to use and select Copy from the menu to add it to your clipboard:

  In Figma

  1. Create a text object in the canvas.
  2. In the Text section of the properties panel, click the arrow next to the font.
  3. Select the Font Awesome 5 Free font from the list.
  4. Based on your icon choice, use the font style field to select Regular or Solid:
  5. Paste the icon into your text object in Figma using the keyboard shortcut:
     • macOS: Command V
     • Windows: Ctrl V
  6. Figma will display the icon in the canvas:

   

  Other icon fonts 

  If you have a different icon font installed on your device, you can still use these icon fonts in Figma.

  There are a few ways to access fonts from your device:

  • Download the font helper to access local fonts in the browser
  • Use the Figma Desktop app

  Once you have access to your local fonts, you can find any icon fonts in the font picker.

• Access local fonts on your computer

  Before you start

  Who can use this feature

  Supported on any team or plan

  Caution: Figma doesn't currently have applications available for computers and devices running ChromeOS or Linux. Unfortunately, this means Chromebook and Linux users can only use Google's Web Fonts.

  Members of Figma Organizations are able to upload fonts and share them in teams or across the organization, regardless of platform.

  Figma gives you access to an extensive catalog of Google Web Fonts, which you can use in Figma without having to install anything.

  If you've purchased your own fonts, or have a catalog of fonts on your computer, you'll likely want to use them in your designs.

  For Figma to find your fonts, you'll need to make sure these are added or installed in your operating system (OS). Follow the links below for instructions on how to add fonts to your specific OS:

  • Mac: How to install and remove fonts on your Mac (via Apple)
  • Windows: Add a font (via Microsoft)

  To access these fonts installed from the font picker, you'll need to use the Figma desktop app ↓ or install the Figma font helper ↓. 

  I'm using the desktop app

  Figma agent is a secure background service that Figma also installs when you install the desktop app. It allows Figma to access fonts on your computer, and open Figma links in the desktop app.

  If you're using the Figma desktop app, you can find your local fonts in the font picker:

  1. Select a text layer, or select some of the text within a text layer.
  2. Figma will show the Text properties in the right sidebar.
  3. Click the to the right of the font to browse your font list.
  4. Click on a font family to select it. You can then adjust other properties of the text, like style, size, line height, letter spacing, and more. Learn more about text properties →

  Figma agent runs an HTTP and HTTPS server on localhost. It only allows connections from figma.com and isn't exposed to the public internet.

  You may see events related to the Figma agent in your console log or when monitoring activity on your computer. The loopback address for localhost resolves to 127.0.0.1.

  I'm using Figma in the browser

  If you're using Figma in the browser, you will need to install Figma's font helper. This is a secure background service that allows Figma to access any fonts on your computer and make them available in the font picker.

  Install the font helper

  Note: The Figma font helper has the same browser requirements as using Figma in the browser. Learn more about Figma's browser requirements →

  You can download the font helper from two places:

  • 1

    Figma's downloads page

    1. Visit Figma's downloads page →
    2. Run the installer and follow the on-screen instructions.
  • 2

    Your account settings

    1. From the file browser, click on your name in the top-left corner to open your account.
    2. Select the Settings tab at the top of the page.
    3. In the Fonts section, select the Download installer to enable local fonts button.
    4. Run the installer and follow the on-screen instructions.

  Uninstall the font helper

  To remove the font helper from your computer you will need to run the uninstaller.

  • Windows: the app will come with an uninstaller.
  • Mac: click this link to immediately download the uninstaller.

  You can also find the uninstaller in your Figma account:

  1. From the file browser, click on your name to open your account.
  2. Select the Settings tab and in the Fonts section, click the Download Uninstaller to Disable Local Fonts link.
  3. Run the uninstaller and complete the on-screen instructions.

  Figma doesn't have an integration with Adobe Fonts (formerly Adobe Typekit). However, if you activate Adobe Fonts on your computer (via Adobe), you can access them in the font picker.

  Adobe Fonts supports devices running macOS or Windows 10. If you aren't seeing these fonts, make sure you're running the latest version of Windows.