Learn how to change the font family of the entire Ant Design System for Figma project with the Figma Tokens plugin.
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.
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.
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.
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.
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
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.
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.
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.
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.
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
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.
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.