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

Ant Design System for Figma

Over 2800 UI elements 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

2100+ Components

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

724 Icons

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

165 Styles

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

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

Light & Dark theme

Two themes in one pack. Pick your favourite and build your project faster.

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.

      Download Free Demo

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
 
Click here to watch full tutorial
  • Large & customizable library
  • Well-organized style guide
  • Auto layout
  • Component states
  • Layout templates
  • 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.

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 the 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

Demo
Free
preview & playground
  • 88 high-quality components
  • 172 icons
  • 55 customizable styles
  • Auto layout supported components
  • 1 UI example
  • Light theme only
Individual
$79
per lifetime license
  • 2100+ high-quality components
  • 724 icons
  • 165 customizable styles
  • 45 screens with documentation
  • 4 screens with real-life UI examples
  • 4 layout templates
  • Light and dark theme
  • Auto layout supported components
  • Free updates
Team
$158
$79 per lifetime license
  • 2100+ high-quality components
  • 724 icons
  • 165 customizable styles
  • 45 screens with documentation
  • 4 screens with real-life UI examples
  • 4 layout templates
  • Light and dark theme
  • Auto layout supported components
  • Free updates