Customization

Typography

Ant Design for React also incorporates design tokens for Typography. Within the Ant Design System for Figma, we rely on Text Styles for Typography management, as Figma Variables currently lack support for Typography.

About Typography Variables

You'll discover the Typography group within the Variables Library, as these variables are essential for generating JSON files via our Figma Plugin, which is designed to facilitate the transfer of your Ant Design System for Figma theme settings. If you've made any alterations to the Text styles in your system, it's crucial to ensure that you also adjust the corresponding values in the Typography variables. Modifying the Typography variables won't impact your system, but it will enable your developers to copy the JSON files reflecting the styling adjustments you've made.

Font Family

Ant Design defaults to using the system font, and in the Ant Design System for Figma, we've integrated the SF Pro Text font, which is specific to Mac systems. If you'd like to employ a different font family for your project, you can find instructions on how to do so below.

Batch Styler Plugin

First, you need to Install the Batch Styler plugin. It will allow you to change the font settings for multiple text styles at once.

  1. Open the Resources Panel with Shift + I.
  2. Switch to the Plugins tab.
  3. Search for Batch Styler and open it.

Changing Font Family

As an example, let's go through the process of changing the font family in the Ant Design System for Figma from SF Pro Text to Inter. In the current system, SF Pro Text is used with font weights like Regular, Regular Italic, and Semibold. Below, you'll find instructions on how to edit each group of styles.

Regular

  1. Open the Batch Styler plugin.
  2. In the plugin’s Text tab, press Command (or Ctrl on Windows) and select all text styles that have Normal, Underline, and Delete in their name.
  3. In the ‘Family’ input below, search and select “Inter”
  4. Press the Update styles button.

Italic

  1. Open the Batch Styler plugin.
  2. Press Command (or Ctrl on Windows) and select all text styles that have Italic in their name.
  3. In the ‘Family’ input below, search and select “Inter”.
  4. In the “Weight” input, replace “Regular Italic” with “Italic”.
  5. Press the Update styles button.

Strong

  1. Open the Batch Styler plugin.
  2. In the plugin’s Text tab, press Command (or Ctrl on Windows) and select all text styles that have Strong or Heading in their name.
  3. In the ‘Family’ input below, search and select “Inter”.
  4. In the “Weight” input, replace “Semibold” with “Semi Bold”.
  5. Press the Update styles button.

Different font weight for Strong styles

If you need to use a different font weight for the strong weight styles, you can also change it with Batch Styler. Follow the instructions below:

  1. Open the Batch Styler plugin.
  2. In the plugin’s Text tab, press Command (or Ctrl on Windows) and select all text styles that have Strong or Heading in their name.
  3. In the ‘Family’ input below, search and select “Inter”.
  4. In the “Weight” input, replace “Semibold” with the font weight you want to use.
  5. Press the Update styles button.
  6. In the Local variables panel, click on Typography group and replace the fontWeightStrong variable value “600” with the number corresponding to your picked weight.

You might have observed that the Batch Styler displayed a warning icon when the font family name was different, such as when transitioning from SF Pro Text to Inter. It's worth noting that some fonts may have varying naming conventions for font weights. Therefore, it's crucial to use the Batch Styler plugin for styles that share the same font weight. The plugin may not automatically recognize the need for a change, for instance, when transitioning from a font with a "Semi Bold" name to one with a "SemiBold" weight.

Using different font family for headings

If you want to use a different font family for your headings:

  1. Open the Batch Styler plugin.
  2. In the plugin’s Text tab, press Command (or Ctrl on Windows) and select all text styles that have Heading in their name.
  3. In the ‘Family’ input below, search and select a font family you want to use for your headings.
  4. In the “Weight” input, replace “Semibold” with the font weight you want to use.
  5. Press the Update styles button.

Note for developers

As of now, Ant Design does not offer a token for controlling the font family specifically for headings when it differs from the fontFamily token. Instead, you can implement a straightforward CSS override. For instance, if your design team has utilized "Montserrat" with a font weight of "800" exclusively for headings, you can adjust your CSS as follows:

How to change the font family of the entire project?

Thanks to the Figma Tokens plugin, you can easily change the font family of the entire system in a few minutes. For example, let’s change the Font Family of the UI kit from SF Pro Text to Work Sans.

  1. Open the Figma Tokens plugin.
  2. Find a font-family token in the default / theme set in the Font Family section inside a plugin.
  3. Right-click on it and choose the Edit Token option.
  4. The popup window will appear with the Name, Font Family, and Description input fields.
  5. In the Font Family input, enter Work Sans. Important! It needs to match the name of the font family that Figma displays in Text settings.
  6. Press the Update button in the Popup window.
  7. In the plugin, below the Font Family section, you will find the Font Weight section.
  8. Make sure that regular and semibold tokens have precisely the same font-weight names as the font family you picked. You can check the name of the font weight in Figma’s Text settings. For example, if your font family uses the SemiBold name, you need to Edit the semibold token’s name to be SemiBold, not Semibold.
  9. Press the Update button in the bottom right corner of the plugin.
  10. Wait a few minutes until the plugin updates, and all changes are applied.

How to add font family URL for Figma Tokens Code Sync?

If you are using Figma Tokens Code Sync, you need to reference your font URL in the font-family token settings. Doing so will allow you to import the proper font in the code.

Default font

By default, Ant Design (React) is using a system font, and Ant Design System for Figma uses macOS’s system font, SF Pro Text. In Figma Tokens, if you want to use the default system font for your code project, make sure to have ‘use default’ text in the font-family token description field.

Google font

If you want to use Google font in your project, you must include the @import URL (from Google fonts) in your font-family token description field. For example, to set font-family token to Work Sans you need to add this URL in your token description field: https://fonts.googleapis.com/css2?family=**Work+Sans:ital,wght@0,400;0,500;0,600;1,400** &display=swap

Local font

If you want to use a local font in your project, you must include the folder path to the font file in your font-family token description field.

How to change the font family of the entire project?

Thanks to the Figma Tokens plugin, you can easily change the font family of the entire system in a few minutes. For example, let’s change the Font Family of the UI kit from SF Pro Text to Work Sans.

  1. Open the Figma Tokens plugin.
  2. Find a fontFamily token in the seed set in the Font Family section inside a plugin.
  3. Right-click on it and choose the Edit Token option.
  4. The popup window will appear with the Name, Font Family, and Description input fields.
  5. In the Font Family input, enter Work Sans.
  6. Important! Font Family name, and Font Family Weight names need to match the names of the font family that Figma displays in Text settings. Otherwise, the plugin can have problems setting proper weights.
  7. Press the Update button in the Popup window.
  8. Press the Update button in the bottom right corner of the plugin.
  9. Wait a few minutes until the plugin updates, and all changes are applied.

How to change the font family of the entire project?

Thanks to the Figma Tokens plugin, you can easily change the font family of the entire system in a few minutes. For example, let’s change the Font Family of the UI kit from SF Pro Text to Work Sans.

  1. Open the Figma Tokens plugin.
  2. Find a font-family token in the default / theme set in the Font Family section inside a plugin.
  3. Right-click on it and choose the Edit Token option.
  4. The popup window will appear with the Name, Font Family, and Description input fields.
  5. In the Font Family input, enter Work Sans. Important! It needs to match the name of the font family that Figma displays in Text settings.
  6. Press the Update button in the Popup window.
  7. In the plugin, below the Font Family section, you will find the Font Weight section.
  8. Make sure that regular and semibold tokens have precisely the same font-weight names as the font family you picked. You can check the name of the font weight in Figma’s Text settings. For example, if your font family uses the SemiBold name, you need to Edit the semibold token’s name to be SemiBold, not Semibold.
  9. Press the Update button in the bottom right corner of the plugin.
  10. Wait a few minutes until the plugin updates, and all changes are applied.

How to add font family URL for Figma Tokens Code Sync?

If you are using Figma Tokens Code Sync, you need to reference your font URL in the font-family token settings. Doing so will allow you to import the proper font in the code.

Default font

By default, Ant Design (React) is using a system font, and Ant Design System for Figma uses macOS’s system font, SF Pro Text. In Figma Tokens, if you want to use the default system font for your code project, make sure to have ‘use default’ text in the font-family token description field.

Google font

If you want to use Google font in your project, you must include the @import URL (from Google fonts) in your font-family token description field. For example, to set font-family token to Work Sans you need to add this URL in your token description field: https://fonts.googleapis.com/css2?family=**Work+Sans:ital,wght@0,400;0,500;0,600;1,400** &display=swap

Local font

If you want to use a local font in your project, you must include the folder path to the font file in your font-family token description field.

Get Ant Design System for Figma today

Speed up your design and development process

Stop wasting time on creating everything from scratch for every new project you start. Use pixel-perfect and handcrafted elements to design and implement your next Ant Design app efficiently.