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.
From freelance designers to enterprise teams, Ant Design System for Figma is making the design process easier for design pros worldwide.
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.
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.
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. 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.
Ant Design System for Figma is way ahead of other Figma UI kits with is frequent updates, large products portfolio and dedicated plugins. It's more than just a UI kit; it's a complete design ecosystem that evolves with your needs and consistently delivers value. It has fundamentally transformed how we approach UI design, and I'm confident it will do the same for others.
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.
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. Matt constructs each component with auto-layout, and it makes this kit incredibly robust and flexible. It will supercharge your work-flow and save you time, so you can focus on solving those complex UX problems!
We have been looking for a suitable Design System for a long time for our Back Office tools. We have tested a lot, but in our opinion "ANT" is the most suited to our needs. Its main advantages are the number of components, constant development and a very nice structure of variants. It’s a really cool library.
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.
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.
Matt, 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.
Matt 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.
Want to save time and create things way faster? Use the combination of Ant Design and #antforfigma created by Matt. Making new layouts has never been so easy!
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.
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!
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.
The components are built with the best Figma features, making the design process easy and fast.
We built each component with great features to make Ant Design’s project implementation process faster and easier for developers.
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.
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.
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.
Change the font family, font sizes, or line heights of all components at once in seconds.
Change all colors of the design system or reference other colors from Ant Design with Figma Variables.
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.
Variables in Ant Design System for Figma help save time and effort when building designs, managing your design system, and creating complex prototyping flows.
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.
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.
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.
You can easily switch between light and dark themes in your project with the Figma Variables feature.
You can easily switch between light and dark themes in your project with the Figma Variables feature.
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 in Figma store reusable values that can be applied to all kinds of design properties and prototyping actions.
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.
Variants allow to group and organize variants of the same component. Components are easier to maintain and more intuitive to use.
Copy theme and variable settings from Figma to your React project with our Theme Buddy for Ant Design plugin.
