Ant Group is Jack Ma's second tech giant and owns China's largest digital payment platform Alipay. Ant Design is a design system for enterprise products made by Ant Experience Technology Team that provides guidelines, principles, and a React UI library called Ant Design with high quality components used by companies like Ant Financial, Alibaba, and Tencent. The Ant Design ecosystem also includes products like Ant Design Mobile, NG-ZORRO for Angular, Ant Design Vue, and Ant Design Pro for enterprise applications.

1. Ant Design
Dva.js
Umi.js
Technology Of

2. About Ant Group
 "Ant Group, formerly known as Ant Financial and Alipay, is an affiliate
company of the Chinese Alibaba Group. The group owns China's largest digital
payment platform"
"Ant is Jack Ma’s second
tech giant"
- Newyork Times -

3. About Ant Design
 "A design system for enterprise-level products"
 Made by Ant Experience Technology Team
 Guidelines and Principles: https://ant.design/docs/spec/introduce
 Who's using Ant Design: Ant Financial, Alibaba, Tencent, Baidu,…
 Showcase:
* Ant Financial Technology
* OceanBase Cloud Platform
* Ant Design Pro

4. Colors
• System-level color: including 12 primary colors and their derivative
colors
• Product-level color: Ant Design's brand color comes from blue of the
base color palette, it's Hex value is 1890FF

5. Colors

6. Layout
 Left-Right Layout
 Top-Bottom Layout

7. Layout
 Ant Design uses a 24-grid architecture. Try to always use even numbers

8. Font
 Font Family: Ant Design prefers the system default font family
 Base Font Size:

9. Icons and Illustrations
 Icons: https://ant.design/components/icon/
 Illustrations: https://ant.design/docs/spec/illustration

10. React UI library - antd
• React UI library antd: https://ant.design/docs/react/introduce
o A set of high-quality React components out of the box
o Written in TypeScript with predictable static types
o Internationalization support for dozens of languages
o Powerful theme customization in every detail

11. Components
 General: Button, Icon, Typography
 Layout: Grid, Space,…
 Navigation: Breadcrumb, Menu, Pagination, Steps, …
 Data Entry: Form, Input, Radio, Select, Switch, Slider,…
 Data Display: List, Table, Tabs, Card, Image,…
 Feedback: Modal, Alert, Message,…
 Other: BackTop, ConfigProvider,…
 More detail: https://ant.design/components/overview/

12. How to install
 Using create-react-app

13. Customize theme
 Default variables in here
 Customize in less file:

14. Customize theme
 Using Craco: https://github.com/gsoft-inc/craco to override webpack config
More detail in here

15. Import on Demand
 antd supports tree shaking of ES modules, so using
import { Button } from 'antd'; would drop js code you didn't use.
 If you see logs like in the screenshot below, you might still be
using webpack@1.x or have a wrong webpack config which can't support tree
shaking.

16. Internationalization
 antd provides a React Component ConfigProvider for configuring antd locale
text globally
Supported languages in here

17. Ant Design Ecosystem
 Ant Design Mobile: Web Components and React Native Components
 NG-ZORRO: Ant Design of Angular
 Ant Design Vue: Ant Design of Vue
 Ant Motion
 Ant Design Charts
 Ant Design Landing
 Ant Design Pro: Out-of-box UI solution for enterprise applications
 Design Resources: Sketch, Figma, Adobe,...