Ant Design System for Figma

Design and develop Ant Design projects faster than ever

The powerful UI kit for Figma based on the most popular React UI library - Ant Design. Create and implement well-documented Ant Design apps in no time!

  • check
    Built with Figma Tokens that you can sync with your code
  • check
    Auto layout 4.0, Variants, Component Properties
  • check
    Hover and click interactions for easy prototyping
  • check
    Switch between light and dark theme
  • check
    Developer-friendly components
Ant Design System for Figma ComponentsAnt Design System for Figma Components
Making design work easier since 2019

Trusted by over 4,000+ solopreneurs and teams

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

Ant Design System for Figma is perfect for creating internal tools or client work. Companies like Meta, Zalando, Allegro or eBay already saved hundreds of hours on their UI design.
Design and implement faster

Pixel-perfect components your designers & devs will love

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

widgets

Top-quality Ant Design components for Figma

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

  • check
    Fully customizable
  • check
    Hover and click interactions for easy prototyping
  • check
    Auto layout 4.0
  • check
    Variants + Component properties
code

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.

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

Built with Figma Tokens

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

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

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.

  • check
    Over 700 Ant Design icons
  • check
    Sample React code in the Inspect panel
  • check
    Quick link to Ant Design docs
Ant Design System for Figma IconsAnt Design Menu Icons
Built with Figma Tokens

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 sync those changes with your code.

text_fields

Typography

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

color_lens

Colors

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

straighten

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.

Level-up your dev process

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.

play_arrow
View how it works
sync

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 Ant Design of React (v. 4.23) project. For example, you can change the primary color or font family in your Figma file and sync your changes with your Ant Design code project, which will reflect those changes.

code

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

light_mode
dark_mode
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 Tokens. All you need to do is to select the required theme set in the plugin.

Figma Tokens Dark UILogin Modal Dark UIfigma ui light
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 Tokens. All you need to do is to select the required theme set in the plugin.

Figma Tokens Dark UILogin Modal Dark UIfigma ui dark
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.

auto layout icon

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.

switch icon

Components & Variants

Variants introduce a new way to group and organize variants of the same component. Components are easier to maintain and more intuitive to use.

curly brackets icon

Figma Tokens

Whenever you change the token's properties - Figma will apply those changes to any objects using that token.

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.