Ant Design System for Figma 5.9

What’s New

Button

• added Button Compact Mode component

Layout

• added new variants to Layout component
• added two new layout menu states and created a new component

Dropdown

• added Button to footer of Dropdown component
• added Submenu State Active
• added 6 placement options

AutoComplete

• added Time and description to Navigation Step component
• added Time to In Progress Steps Item component

Steps

• added new variants to AutoComplete
• added AutoComplete with Buttons component

Cascader

• added hidden Footer to Cascader Menu Item
• added 4 placement options

ColorPicker

• added Icon to ColorPicker Trigger Item
• added Horizontal variant to ColorPicker Popup Item
• added new auto-layout funcionality (wrap) to ColorPicker Popup Item

Mentions

• added 4 placement options

Radio

• added checked state to Radio Button component

Rate

• added text with boolean property

Select

• added 4 placement options

Transfer

• added footer with boolean property to Tranfer Panel

TreeSelect

• added 4 placement options

Upload

• added new Upload Items

Calendar

• added Notice Item to Calendar component

Description

• added new auto-layout funcionality (wrap) to Description Item

Image

• added Image Preview component

List

• added content and links to List Item Basic
• refactored the components to use variants

Popover

• added ability to switch off arrow

QR Code

• added new variants to QR Code component

Statistic

• added new variants to Statistic component

Table

• added Dropdown to Table component with variants
• added new auto-layout funcionality (wrap) to Row Item
• refactored Header Item

Tag

• added new borderless variants to Tag component

Tour

• added 12 placement options
• added ability to switch off arrow
• added two variants of indicators

Tree

• added Draggable variant to Tree

Modal

• added hidden third button to Modal component

Result

• added new variant to Result component

Skeleton

• added Skeleton Items to Skeleton component

Spin

• added SpinningIndicator to Spin component
• added container to Spin component

Preview in Figma

Important Notes

• Figma Variables are still in beta, and we added variables that Figma currently supports.
• Figma Variables in prototypes and publishing variables to team libraries are available on the education plan and any paid plans. So if you need to create more themes or modify variables in the dark theme, you will need Figma’s paid plans. Learn more in Figma’s docs.
• We still recommend using the Tokens Studio plugin to manage your tokens since the Figma variables feature is currently very limited.
• To stay in sync between Tokens Studio and Variables, you will need Tokens Studio Pro, which enables you to create themes. It lets you create variables based on your tokens. Learn more about themes in Tokens Studio’s documentation.
• ColorPicker component does not have component tokens applied yet because Ant Design’s documentation is not yet updated. We will add these tokens in the upcoming versions.
• Color hex values in the documentation on the System Overview page will not update when changing the theme via Variables. To change the values, you need to use the Tokens Studio plugin.

How to access the new Ant Design System for Figma 5.9?

1. Go to https://app.lemonsqueezy.com/my-orders
2. Log in using the email address you’ve used to make a purchase.
3. You will get a magic link to your email address, which you can use to access your order and files.
4. Download the zip file.
5. The new files will be in the zip file - unzip it.