Getting started

Learn Figma

Ant Design System for Figma uses the latest and greatest Figma features. Below you can learn how to work with them.

If you are a Figma beginner

If you are new to Figma, I highly recommend visiting their Getting Started help page or watching Beginner's Guide to Figma on their YouTube channel.

Figma Components

Ant Design System for Figma is built with components. These are elements you can reuse across your designs. They help to create and manage consistent designs across projects. You can learn more about Components and how to use them here.

Figma Styles

Ant Design System for Figma is also built with Styles. These are Colors, Text styles, Effects, and Layout Grid styles that can be reused across your designs. Learn more about Styles and how to use them here.

Figma Variants

The UI kit uses Variants that allow to group and organize similar components into a single container. This simplifies the component library and makes it easier for everyone to find what they need. Here are more details on Variants.

Auto Layout

Components in the system were built with the Auto Layout feature. Auto Layout makes designs that grow to fill or shrink to fit and reflow as their contents change. Just like on a real website! You can learn more about Auto Layout here.


The UI kit is also using variables. Variables in Figma design store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows. Here you can learn more about variables and how to use them.

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.