Hello Dear Customer 👋 Thank you for purchasing Ant Design System for Figma! I hope it will help you deliver your ideas and products faster. I’ve prepared a short introduction to help you get started.

Table of contents:

🔢 Setting it up

First steps

  1. Create a Figma account (if you don't have one)

    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.

  2. Download and 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.

  3. 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 green dropdown button “Code” and select “Download ZIP”). Then install SF Pro Text fonts on your PC and restart your computer.

  4. Open .fig file in Figma

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

Team library

If you are in a team and purchased the business 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.


✏️ Using it

If you are new to Figma I highly recommend visiting their Getting Started help page or watching Beginner's Guide to Figma on their YouTube channel.

Components

Ant Design System for Figma is built with components. These are elements you can reuse across your designs. They help to create and manage consistent designs across projects. You can learn more about Components and how to use them here.

Styles

Ant Design System for Figma is also built with Styles. These are Colors, Text styles, Effects and Layout Grid styles that can be reused across your designs. Learn more about Styles and how to use them here.