Greg DlubaczChris CarterElizabeth Lin
Miriam IsaacMatt Wierzbicki
Trusted by over 6k designers, developers and teams

Design and develop UI projects faster than ever

Ant Design System for Figma is a powerful UI kit for Figma based on the popular React UI library - Ant Design. Create and implement well-documented apps in no time with always up-to-date Ant Design Figma resources.

  • Variables, Auto Layout, Variants, Component Properties
  • Convert your designs into React code with our AI Dev Figma plugin
  • Copy style settings from Figma to code with our Theme Buddy plugin
  • Hover and click interactions for easy prototyping
  • Switch between light and dark theme
  • Developer-friendly components
Ant Design System for Figma ComponentsAnt Design System for Figma Components
The Ant Design System for Figma is perfect for internal tools and client projects, helping companies like Meta, Audi, Zalando, eBay, and Allegro save hundreds of hours on UI design.
Making design work easier since 2019

Trusted by over 6000+ designers, developers, and teams

From freelance designers to enterprise teams, Ant Design System for Figma is making the design process easier for design pros worldwide.

Design and implement faster

Pixel-perfect components your designers & devs will love

The UI kit for Figma is fully packed with the best features to make work easier for designers and developers working on Ant Design projects.

Top-quality Ant Design components for Figma

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

  • Fully customizable
  • Variables are supported
  • Hover and click interactions for easy prototyping
  • Auto layout 5.0
  • Variants + Component properties

Designed with development process in mind

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

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

Built with Variables

Components use the same tokens and naming as the original Ant Design JSON files. You can easily customize the entire UI kit and then apply the style in your code.

  • Fast and easy customization
  • Use our plugin to copy the style from Figma to your Ant Design code project
  • Easily switch between light and dark themes
  • Create multi brand design system

Empowered with smart Ant 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 Ant Design library.

  • Over 800 Ant Design icons
  • Icon synonyms for easier finding
  • Sample React code in the Inspect panel
  • Quick link to Ant Design docs
Ant Design System for Figma IconsAnt Design Menu Icons
Built with variables

Customize however you want

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 copy the theme settings from Figma with our Plugin and apply those changes to your React project.

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 Ant Design with Figma Variables.

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 Variables.

Figma Variables Ant Design System for Figma
New feature!

Variables are supported

Variables in Ant Design System for Figma help save time and effort when building designs, managing your design system, and creating complex prototyping flows.

Variables in Ant Design System for Figma
Used by over 570k developers

Rocket-fast implementation

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

Copy theme and variable settings from Figma to your React project

You won’t find it elsewhere! Theme Buddy for Ant Design is our Figma plugin that lets you copy or save the Ant Design System for Figma theme settings as JSON. It takes the data from Figma variables and converts it to a JSON format that developers can use to modify the ConfigProvider component so the code version of the project will look exactly the same as the Figma version.

Use pixel-perfect, developer-friendly components and icons

Unlike other UI kits, Ant 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 Ant Design documentation, so the implementation process is faster and easier.

Add-on

AI Dev Figma Plugin

AI Dev for Ant Design is a Figma plugin that transforms your Figma components or images into ready-to-use Ant Design React code.

Figma to Ant Design React
Turn off the lights!

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  Variables feature.

Ant Design System for Figma Light theme
Turn on the lights!

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  Variables feature.

Ant Design System for Figma Dark theme
Design faster

The best Figma features

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

Variables

Variables in Figma store reusable values that can be applied to all kinds of design properties and prototyping actions.

Auto Layout

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 & Variants

Variants allow to group and organize variants of the same component. Components are easier to maintain and more intuitive to use.

Dedicated Figma plugin

Copy theme and variable settings from Figma to your React project with our Theme Buddy for Ant Design plugin.

Save with our packages

Discover product bundles

Enhance your design workflow with Ant Design System and buy it in our packages along with other Ant Design resources for Figma.

Pro Package

The Pro Package includes four Ant Design products and one year of free updates.

See what's inside

Premium Package

A lifetime access to our Figma UI kits, Theme Buddy plugin, updates, and Figma templates.

See what's inside

Ultimate Package

It's our complete solution. A lifetime access to all our resources, including AntBlocks UI.

See what's inside
Get Ant Design System for Figma today

Speed up your design and development process

Stop wasting time on creating everything from scratch for every new project you start. Use pixel-perfect and handcrafted elements to design and implement your next Ant Design app efficiently.