Tips & Tutorials

Ant Design System for Figma - Getting Started

Hello! Thank you for purchasing Ant Design System UI Kit for Figma! I hope it will help you deliver your ideas faster! I’ve prepared an introduction to help you use it.

Please read the text below before using the UI kit to avoid possible problems.

What you will learn:

Notice:​ UI Kit v1.2 was built following Ant Design System version 4.0.0.

Setting it up

1. Download and install font

This UI Kit uses SF Pro Display font. It is the Apple System Font so if you are using MacOS you can go to the next step. If you are using a system other than Apple, you can get it from https://github.com/sahibjotsaggu/San-Francisco-Pro-Fonts ​(Click on Green Dropdown Button “Clone or download” and select “Download ZIP”).

2. Download Figma Font Helper

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

3. Open .fig file in Figma

There are many different ways to import design files into Figma. You can follow these instructions from the official Figma help page.

Using Instances of Components

There are 2 ways to quickly find a component you want to use:

1. Guidelines & Components page: Copy - Paste

Just go to Guidelines & Components page and select desired component. Copy and paste it in Frame you are working on. Then you can swap instances with Instance Menu.

2. Instance Menu or Assets Panel: Swap/Add

https://help.figma.com/hc/en-us/articles/360039150413-Swap-between-Components-in-a-File

Customizing the UI Kit

Edit styles

You can easily customize this UI Kit using existing styles. In the UI kit - inside Colors frame you will find a table showing what elements use what color styles. Edit these styles to apply your branding. You can find more details on editing styles on Figma's Help Page.

Edit components

In order to edit components you need to edit the master component. Editing the master component will affect all master instances built with it. 

Learn more about components on Figma's Help Page.

Ant Design

To learn more about Ant Design System go to https://ant.design. There you will find all design and development documentation regarding guidelines, components etc.

If you are a developer you can also visit https://github.com/ant-design​ for more information.

Changes in components naming

In order to avoid collision in components naming I’ve decided to apply some changes in naming things in Figma. 

Inputs, Buttons and Tabs

In Ant Design System there are 3 different sizes of these components: Small, Default and Large. I’ve decided to rename ‘Default’ size to ‘Medium’ because it was colliding with the default state of each component. So please keep it in mind while showing your designs to developers.

Tables

Table components also have 3 different sizes: Default, Middle and Small. I changed it to: Medium, Small and Mini. The ‘Mini’ size is used in Modals only.

Get Ant Design System for Figma

Demo
Free
No credit card required
Test before you buy. Learn how it works or preview sample components.
  • 88 high-quality components
  • 172 icons
  • 55 customizable styles
  • Auto layout supported components
  • 1 UI example
  • Light theme only
Business
from $158
One time payment - lifetime license
Perfect for multiple designers and developers working on the project.
  • 2100+ high-quality components
  • 724 icons
  • 165 customizable styles
  • 45 screens with documentation
  • 4 screens with real-life UI examples
  • 4 layout templates
  • Light and dark theme
  • Auto layout supported components
  • Free updates
  • Team license
The best for Figma teams
Individual
$79
One time payment - lifetime license
A single license for solo players and freelancers.
  • 2100+ high-quality components
  • 724 icons
  • 165 customizable styles
  • 45 screens with documentation
  • 4 screens with real-life UI examples
  • 4 layout templates
  • Light and dark theme
  • Auto layout supported components
  • Free updates