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.

Get it now      Preview
Feature Icon

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.

Feature Icon

165 Styles

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

Feature Icon

45 Screens

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

Feature Icon

Auto Layout

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

Feature Icon

Light & Dark theme

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

Loved by the professional teams and solopreneurs

The Ant Design System for Figma is an invaluable resource for any UX Designer who is tasked with planning and building out a DS for their org or client. Each component is constructed with care and precision. Covering more states and scenarios than you will find by just viewing HIG or Material.
Not only that but the fact Matt constructs each component with auto-layout, makes this kit incredibly robust and flexible. I highly recommend purchasing this wonderful kit from Matt. It will supercharge your work-flow and save you time, so you can focus on solving those complex UX problems!

Miriam Isaac
Freelance UX Designer

@matsugfx thank you for #antforfigma - such a kickass UI kit! Your tutorial has been much appreciated too.

Charles-Louis
Co-founder at
Barel

I have been using Ant for Figma for over 1 year and my expectations are exceeded. This is an absolute time-saver. The entire product is prepared with utmost attention to detail, everything is well organized and easy to use even for inexperienced designers and developers who are not very familiar with design software. Regardless of whether you need to create a bespoke design from scratch or a quick, rough mockup this is a great product. It helps to save hundreds of hours, so you can forget about recreating the same UI components in every single project over and over again.

Greg Dlubacz
Lead Designer at
Catenda AS

Want to save time and create things way faster? Use the combination of Ant Design and #antforfigma created by Mateusz. Making new layouts has never been so easy!

Maciej Korsan
Front-end Developer at
EYEDEA

We use the Ant Design System at Lambda School and love it! It’s a great resource for both our engineering and design students. For non-designers, Ant Design makes it easy to sketch mockups quickly with basic Figma skills!
For our design students, we use Ant as a way to introduce them to design components! Many students will use and remix it in their first project. Components are so difficult to learn, but Ant makes it easy to understand how to structure a complex component library.

Elizabeth Lin
Design Educator at
Lambda School

I've stumbled across AntDesign during a react UI framework research & was amazed of figma as a cross-platform collaborative design tool from the beginning. Finding antforfigma was really the cherry on the top / love at first sight, since it has been marvelously speeding up our processes from design through development. We recommend this UI kit to each of our partner.

Matyas
Co-Founder at
JustRocket

Mateusz, thanks for Ant Design System for Figma - we love it. We are using the UI kit for our projects and it saved us hundreds of hours of repetetive work. It's also very easy to customize. Great organisation and high quality components make it one the best Figma resources I've ever worked with.

Greg Rog
Founder at
LearnUX and eduweb

This UI Kit has saved me WEEKS of time! I use ant design framework to design & develop data tools for work, and this library has been a complete game changer for my team. It has helped cut down design time while improving the quality of our work. Mateusz has created this library meticulously and it behaves exactly like you expect it. I would highly recommend this to anyone creating complex data products.

Mohit Hingorani
Product Designer

Mateusz has done an incredible job of capturing the essence of Ant Design within the Figma ecosystem. The design system takes full advantage of Figma’s capabilities, and is by far the most flexible Figma library I’ve worked with. Ant Design itself is inherently flexible, simple, and powerful, and this project accentuates that beautifully.

Theo
Business Owner

On my latest project, Ant Design System for Figma saved our product team with five designers days—if not weeks—of work. Of course it matches Ant Design well. The file is so well set up, I could feel the love put into it. It takes advantage of the best and latest Figma features.

Koos Looijesteijn
UI Designer

I genuinely love Ant Design System. 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
UI/UX Designer

Fantastic! Great level of detail and awesome organisation.

Andrew
Business Owner

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.
Business Owner

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
Front-end Developer

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.
Business 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:

The Ant Design System for Figma has helped me deliver concepts and projects faster. Software Engineers that I have partnered with on projects that utilize the Ant Design System are amazed that my comps are just like their code. This creates a powerful relationship. This kit gives you the power you need, ability to design faster, add customization that you need, and bring ideas to life. It’s definitely worth the price.

Christopher Carter
Co-organizer at
Figma Austin Meetup
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, accessible 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

Get Ant Design System for Figma

Demo
Free
No credit card required
Test before you buy. Learn how it works or preview sample components.
  • 88 high-quality components
  • 172 icons
  • 55 customizable styles
  • Auto layout supported components
  • 1 UI example
  • Light theme only
Business
from $158
One time payment - lifetime license
Perfect for multiple designers and developers working on the project.
  • 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 license
  • + Extra product: UX Toolkit for Figma
The best for Figma teams
Individual
$79
One time payment - lifetime license
A single license for solo players and freelancers.
  • 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