Getting started

Import the file to Figma

Learn how to import Ant Design System for Figma file to your Figma account.

Before importing

Create Figma account

I assume that you are already a happy user of Figma but if you don't have an account go to www.figma.com and sign up. If you need help with signing up, you can learn how to do it here.

Install Figma Font Helper

If you're using the Figma Desktop app, any locally stored fonts are already available to you. For the browser version of Figma, follow this guide.

Download and install SF Pro Text font

This UI Kit uses SF Pro Text font, and you can get it from here (macOS) or here (Other OS - click on the green dropdown button "Code" and select "Download ZIP"). Then install SF Pro Text fonts on your PC and restart your computer.

Import the file

There are many different ways to import design files into Figma. The easiest one is to drag and drop the file into your 'Drafts' folder. If you have problems opening the file in Figma, please follow these instructions from the official Figma's help page.

Publish it to your team library

If you are in a team and purchased the Team license of this product, you can publish it to your team library in Figma. You will find more information about team libraries in Figma and how to work with them here.

Before importing

Create Figma account

I assume that you are already a happy user of Figma but if you don't have an account go to www.figma.com and sign up. If you need help with signing up, you can learn how to do it here.

Install Figma Font Helper

If you're using the Figma Desktop app, any locally stored fonts are already available to you. For the browser version of Figma, follow this guide.

Download and install SF Pro Text font

This UI Kit uses SF Pro Text font, and you can get it from here (macOS) or here (Other OS - click on the green dropdown button "Code" and select "Download ZIP"). Then install SF Pro Text fonts on your PC and restart your computer.

Import the file

There are many different ways to import design files into Figma. The easiest one is to drag and drop the file into your 'Drafts' folder. If you have problems opening the file in Figma, please follow these instructions from the official Figma's help page.

Publish it to your team library

If you are in a team and purchased the Team license of this product, you can publish it to your team library in Figma. You will find more information about team libraries in Figma and how to work with them here.

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.