Ant Design 101 – Introduction to a Design System for Enterprises
Ant Design is a popular design system for developing enterprise products. The comprehensive component library has everything product teams need to solve most modern B2B design problems.
Key takeaways:
- Ant Design is a collection of high-quality UI components that cover a wide range of use cases, including buttons, forms, navigation menus, data tables, modals, and more.
- Ant Design is known for its adherence to design principles and guidelines that promote consistency and usability.
- It follows the principles of the “Ant Design Language,” which emphasizes clarity, efficiency, and simplicity in design.
- Ant Design has a strong and active community of designers and developers, which contributes to its ongoing development and support.
With UXPin Merge, design teams can import Ant Design UI components to build fully functioning prototypes. This article outlines the benefits of working with Ant Design, its vast component library, and how to build Ant Design prototypes that look and feel like the final product.
Create a single source of truth between design and development with UXPin Merge. Visit our Merge page for more details and how to gain access to this advanced prototyping technology.
What is Ant Design (AntD)?
Ant Design is an open-source design system developed by the Ant Group–parent company of Alibaba, Alipay, Huabei, and MYbank, to name a few. The component library supports React, Vue, and Angular front-end frameworks.
Ant Design includes layouts, iconography, typography, navigation, data entry/forms, data visualizations, and more. Design tokens allow organizations to customize the component library to meet your product requirements.
Key Ant Design Benefits
One of the primary reasons product developers choose Ant Design is its comprehensive component library and features. You can find just about every type of UI pattern, including data visualizations, making it an excellent choice for enterprise products.
Here are some Ant Design benefits we’ve learned from software developers:
- Well maintained: Ant Design’s team continually works to improve the design system with frequent updates. Engineers also report finding little or no bugs.
- Comprehensive library: Ant Design has a component, pattern, or icon to solve every design problem. Additionally, each element has multiple versions to accommodate any scenario.
- Native library: Ant Design Mobile offers an extensive library for building native cross-platform applications.
- Animation library: Ant Motion provides animations for common patterns and microinteractions to complement its native and web component libraries.
- Third-party libraries: Ant Design’s third-party React libraries include data visualizations, infinite scroll, maps, media queries, and others that increase the design system’s capabilities.
- Internationalization-ready: Ant Design’s internationalization feature supports languages from around the world with the option for developers to add more.
- Forms: an extensive form library with excellent form handling.
- Scaffolds: 100+ template projects for dashboards, reports, tables, admin UIs, chat, logins, and more.
- Typescript compatible
Material Design vs. Ant Design
Material Design and Ant Design present more similarities than differences. Both offer comprehensive design systems for building cross-platform applications with excellent documentation and large global communities.
Theming
Material Design and Ant Design use design tokens for theming, making it easy for developers to customize UI components and patterns.
Accessibility
Accessibility is one of the most significant differences between the two design systems. Material Design has accessibility “baked-in” to every component with principles and best practices, whereas Ant Design leaves this to developers.
Tech stack compatibility
Material Design is the best option for developing cross-platform Flutter applications. Developers can call components with a few lines of code and build user interfaces effortlessly. Material Design is also available for React apps through MUI.
Ant Design accommodates React, Vue, and Angular frameworks, making the design system accessible to more software developers.
Ant Design vs. Bootstrap
Bootstrap is one of the oldest front-end CSS frameworks for building responsive websites and web applications. Many engineers use Bootstrap for prototyping because they can leverage the framework’s CSS and Javascript libraries to develop websites and web applications with little effort.
Like Ant Design, Bootstrap supports React, Vue, and Angular. The biggest difference between these two is that Bootstrap is a framework, whereas Ant Design is a design system.
Bootstrap is a better option for prototyping and building websites, whereas Ant Design offers more features for building web and native cross-platform applications.
What Can You Build With Ant Design?
Ant Design’s vast library of components, patterns, templates, and icons makes it possible to develop B2B and B2C digital products. The design system’s form and data visualization patterns make it a popular choice for enterprise applications.
Here are some enterprise companies that use Ant Design:
- Yuque: knowledge management platform
- Alibaba: the world’s largest online marketplace
- Baidu: the Chinese Google equivalent and one of the world’s largest AI and Internet companies with multiple products running Ant Design
- Fielda: a mobile data collection application for field research
- Moment: project management software
- Videsk: video-based customer service platform
- Solvvy: chatbot software from Zoom
- Ant Financial: One of China’s leading FinTech organizations
Ant Design’s Design Language
1. Design Language
Ant Design’s Design Values include principles and patterns for solving many usability problems. The design system has four values:
- Natural: products and user interfaces must be intuitive to minimize cognitive load.
- Certain: designers must use components and patterns consistently to enhance collaboration and deliver consistent user experiences.
- Meaningful: products must have clear goals and provide immediate feedback to each action to help users. Designers must create experiences that enable users to focus on tasks without distraction.
- Growing: designers must consider the human-computer interaction symbiosis and design for scalability.
2. Motion Principles
Ant Design has three Motion Principles:
- Natural: designers must base motion on the laws of nature with smooth and intuitive animations and transitions
- Performant: animations must have low transition times and not impact a product’s performance
- Concise: designers must create justified, meaningful interactions while avoiding excessive animations that don’t add value to the user experience
3. Global Styles
The Global Styles section of Ant Design’s docs includes color, layout, font, icons, and dark mode guidelines.
Ant Design’s Palette Generation Tool will generate a ten-shade palette based on your product’s primary color. The tool is somewhat primitive compared to the Material Theme Builder and other palette generators.
The font scale and line height provide helpful guidelines based on user reading efficiency calculated on an average distance of 50cm (20inches) and 0.3-degree angle. The base font is 14 px with a line height of 22 px.
Ant Design’s icons are available as outlined, filled, and two-tone. The are also instructions for creating custom icons that conform to the design system’s iconography principles, ensuring maximum consistency for customizations.
Ant Design Components
Here is an overview and key features of the Ant Design component library.
General
General components include buttons, icons, and typography. There are five button types:
- Primary: main CTA
- Default: secondary CTA
- Dashed
- Text button
- Link button
Additionally, there are four button properties:
- Danger: high-risk actions like delete
- Ghost: also called outlined button
- Disabled: when actions are unavailable
- Loading: adds a spinner and disables the controller to prevent multiple submits
Layout
AntD’s layout includes dividers, grids, and space (alignment, direction, size, etc.).
Navigation
Navigational patterns include affix (sticky), breadcrumb, dropdown, menu, page header, pagination, and steps.
Data Entry
Ant Design’s Data Entry components make the design system a preferred choice for enterprise application development. Product teams can build enterprise UIs fast with Ant Design’s out-of-the-box patterns, including:
- Auto Complete input fields
- Cascading dropdown menus
- Checkboxes
- Date pickers
- Forms
- Inputs (text and number only)
- Mentions (tagging users)
- Radios
- Ratings (icons and emojis)
- Select menus
- Sliders
- Switches
- Time pickers
- Transfer select boxes
- Tree selectors
- Uploads
Data display
Connected to data entry is data display–visualizing and presenting data to users.
- Avatars
- Badges
- Calendars
- Cards
- Carousels
- Collapse (accordions)
- Comments (user discussions)
- Descriptions (tables for orders, transactions, records, etc.)
- Empty (placeholders for empty components)
- Images
- Lists
- Popovers
- Segmented
- Statistics (numerical components for dashboards)
- Tables
- Tabs
- Tags
- Timelines
- Tooltips
- Trees
Feedback
Designers use Ant Design’s feedback components to communicate with users.
- Alerts
- Drawers
- Messages (display system feedback at the top of the screen)
- Modals
- Notifications
- Popconfirm
- Progress
- Result (success, fail, error, etc.)
- Skeletons (lazy loading placeholders)
- Spin (spinners)
Other
The final category includes anchor (table of contents) and back top (back to top), essentially navigational components. There’s also a config provider which enables developers to group components.
Importing Ant Design React Components into UXPin
One of the challenges with any design system is that although there’s “a single source of truth,” designers and engineers still use different UI elements–designers use an image-based UI kit. Engineers use a code-based component library (React, Vue, Angular, etc.).
UXPin Merge creates a real single source of truth. Software developers can bring their product’s design system or open-source component library (like Ant Design) into UXPin, so designers use the same UI elements for prototyping that engineers use to develop the final product.
Merge components are powered by code, giving designers complete interactivity and properties defined by the design system. For example, this Ant Design button includes hover and click interactions by default without changing anything in UXPin!
Designers can access the component’s properties defined by the design system (color, size, type, content, etc.) via the Properties Panel to make changes.
UXPin renders these as JSX so that engineers can copy/paste from Spec Mode to begin development–no drift, 100% consistency every time!
Ant Design npm integration
UXPin’s npm integration allows designers to import UI elements from open-source component libraries hosted in the npm registry, including Ant Design (antd).
Using the Merge Component Manager, designers simply add Ant Design’s npm details:
- Package name: antd
- Assets location: antd/dist/antd.css
And UXPin connects to Ant Design’s GitHub repo via npm. Designers can use Ant Design’s documentation to choose the components and properties they need for prototyping.
Follow this step-by-step guide for importing Ant Design components into UXPin.
You can also watch CoderOne’s YouTube tutorial, which takes you through the setup and building a basic prototype.
Build fully functioning Ant Design prototypes that produce meaningful results during user testing. Increase your design team’s value by solving more problems during the design process while identifying more opportunities. Visit our Merge page to find out more and how to request access.
