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:
- how to set up the UI Kit;
- how to use component instances;
- how to customize it;
- what Ant Design is;
- what is the difference between naming components size in Ant Design and Figma UI Kit;
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
Customizing the UI Kit
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.
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.
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.
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.