Design and develop аnt Design projects faster than ever

The powerful UI kit for Figma based on the most popular React UI library - аnt Design. Create and implement well-documented аnt Design apps in no time! The UI kit is fully packed with the best features to make work easier for designers and developers working on аnt Design projects.

• Built with Figma Tokens that you can sync with your code
• Auto layout 4.0, Variаnts, Component Properties
• Hover and click interactions for easy prototyping
• Switch between light and dark theme
• Developer friendly components

Pixel-perfect components your developers will love!

  

Top-quality аnt Design components for Figma

The components are built with the best Figma features, making the design process easy and fast.

• Fully customizable
• Hover and click interactions for easy prototyping
• Auto layout 4.0
• Variаnts + Component properties

Designed with the development process in mind

We built each component with great features to make аnt Design’s project implementation process faster and easier for developers.

• Consistent with аnt Design of React
• Sample React code in the Inspect panel
• Quick link to аnt Design docs

Built with Figma Tokens

Components use the same tokens and naming as the original аnt Design .less files. You can easily customize the entire UI kit and then sync it with your code.

• Fast and easy customization
• Sync with your .less files in the code project
• Easily switch between light and dark themes
• Create a multi-brand design system

Empowered with smart аnt Design icon library

Don't waste time looking for icons with every new project you start. Use pixel-perfect 24x24 px icons consistent with the аnt Design library.

• Over 700 аnt Design icons
• Sample React code in the Inspect panel
• Quick link to аnt Design docs

Customize however you wаnt

You can easily apply your branding to the entire UI kit by changing the font, color, and component properties in a few seconds. What is more, you can later sync those changes with your code.

• Typography

Change the font family, font sizes, or line heights of all components at once in seconds.

• Colors

Change all colors of the design system or reference other colors from аnt Design with Figma Tokens.

• Spacing

By default, the system uses a 4px grid, but if you need to set up your spacing values, you can also do it in seconds with Figma Tokens.

Rocket-fast implementation

The UI kit was built on the principles of аnt Design and optimized for Figma. The system is frequently updated and used by the best companies. While аnt Design System for Figma is a UI kit for design software, it has also been designed to simplify developers’ life so you can implement аnt Design projects quickly and efficiently.

Sync Figma Tokens with your .less files

You won’t find it elsewhere! Figma Tokens Sync is a dedicated feature we built on top of the Figma Tokens plugin that will allow you to sync your tokens with your аnt Design of React project. For example, you can change the primary color or font family in your Figma file and sync your changes with your аnt Design code project, which will reflect those changes.

Use developer-friendly components and icons

Unlike other UI kits, аnt Design System for Figma focuses not only on designer experience but also puts a strong emphasis on developer workflow. Components have an example of the React code in the Inspect panel and a quick link to аnt Design documentation, so the implementation process is faster and easier.

Switch between two themes in one file with one click.

You can easily switch between light and dark themes in your project with the Figma Tokens. All you need to do is to select the required theme set in the plugin.

The best Figma features

аnt Design System for Figma uses the best features and plugins to save you hundreds of hours while working on your projects in Figma.

• Auto Layout 4.0: All components use Auto Layout. This feature lets you create designs that grow to fill or shrink to fit and reflow as their contents change.
• Components & Variаnts: Variаnts introduce a new way to group and organize variаnts of the same component. Components are easier to maintain and more intuitive to use.
• Figma Tokens: Whenever you change the token's properties - Figma will apply those changes to any objects using that token.

Used and loved by over 4000 solopreneurs and teams

From freelance designers to enterprise teams, аnt Design System for Figma is making the design process easier for design pros worldwide. аnt Design System for Figma is perfect for creating internal tools or client work. Companies like Zalando, Allegro, or eBay have already saved hundreds of hours on their UI design.