Ant Design System for Figma - A large library of handcrafted UI components | Product Hunt Embed

Ant Design System for Figma

Over 2100 components to speed up your design process

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

Buy now      Preview in Figma

2100+ Components

Save time and build products with well-organized and customizable desktop components for Figma.

640+ Icons

Named and grouped following Ant Design library. Available in 3 styles: outline, filled and two tone.

180+ Styles

Keep your design consistent and edit the style guide to swiftly apply your product’s branding.

43 Screens

Developer handoff made easy. Component and style guide documentation for your team in one place.

Auto Layout

Use components that grow or shrink as you edit the text label.

Free updates

All important updates from Ant Design or Figma will land in the UI kit for free.

Design faster

Stop wasting time on creating everything from scratch for every new project you start. Use this set of handcrafted elements to design your next product efficiently.

      Preview in Figma

Your Ant Design components for Figma were a lifesaver. As someone that had never had to touch UI/UX before, I was able to build out and prototype a new app without any existing design experience. I really appreciate the work that has gone into making these!

Blake B.
Startup owner
 
Watch full tutorial
  • Large & customizable library
  • Well-organized style guide
  • Auto layout
  • Component states
  • Convenient naming
  • Applied constraints

Customize

Easily apply your branding by changing font, color and component properties.

Design Example Default StylesDesign example Custom styles
Styles UI

Color Styles

Apply your color theme to the whole UI kit by simply editing Figma styles.

Typography UI

Typography Styles

Change font family in all typography styles to apply the font your project needs.

Components UI

Master Components

Edit master components to affect all instances built with it in a few clicks.

Bring your ideas to life

The UI kit was built on the principles of Ant Design and optimized for Figma. Save hundreds of hours and use React, Angular or Vue library to have your projects developed. The system is frequently updated and used by the best companies.

Currently the most popular React library on Github:

We've adopted Figma as our sole design tool at work, and your kit comes in handy because I'm tasked with creating a UI kit for our software based on our design system. Using Ant Design UI Kit and the Ant Design website, it gives me a good understanding of how Figma works and how I should build my master components and components from scratch.

Danny B.
Front-end Developer
Vue logoAngular logoReact logo
High-quality components
Great amount of well-documented and constantly updated components allow for quick development.
Powerful theme customization
Customize design tokens to satisfy UI diversity from business or brand requirements.

Design any UI your business needs

Screens below were created using components and styles available in the UI Kit.

Design exampleDesign example

Achieve your goals

Designers icon

Designers

  • Use the library of UI components and styles to deliver your work faster
  • Customize it to match your project’s UI style
  • Create quick prototypes and test them with your users
  • Create one source of truth for your product
Developers Icon

Developers

  • Test how your UI will look before coding it - without relying on designers
  • Get better at designing & prototyping
  • Keep your design consistent and well-documented
  • Use the best React library - build projects with Ant Design that has over 55K stars on Github
Entrepreneurs icon

Entrepreneurs

  • Build and prototype a new idea with a set of ready components
  • Empower your product with a design system
  • Equip your team with this library in the Figma environment and build products faster
  • Avoid misunderstandings in communication thanks to well-organized library

I genuinely love Ant Design System for Figma. It is simply the best resource I have ever used, it saved me so much time, I learnt things about Figma from it - I'll be using it for every project. I wish I was a better writer because this deserves a standing ovation. It's a must have for any Figma user who likes to get things done.

Dan Y.
UX/UI Designer

Get Ant Design System for Figma

What's inside?

  • 2100+ high-quality components
  • 638 icons
  • 140+ customizable styles
  • 43 screens with documentation
  • 4 screens with real-life UI examples
  • Auto layout supported components
  • Free updates and tutorials
Individual
$79
per lifetime license
Team
$158
$79 per lifetime license