September 12, 2023

Ant Design System for Figma 5.9

Added new variants and components to match Ant Design version 5.9

What’s New


  • added Button Compact Mode component


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


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


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


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


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


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


  • added 4 placement options


  • added checked state to Radio Button component


  • added text with boolean property


  • added 4 placement options


  • added footer with boolean property to Tranfer Panel


  • added 4 placement options


  • added new Upload Items


  • added Notice Item to Calendar component


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


  • added Image Preview component


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


  • added ability to switch off arrow

QR Code

  • added new variants to QR Code component


  • added new variants to Statistic component


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


  • added new borderless variants to Tag component


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


  • added Draggable variant to Tree


  • added hidden third button to Modal component


  • added new variant to Result component


  • added Skeleton Items to Skeleton component


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

How to get the new updates?

After each update you will get an e-mail with the updated files. You can also get the new files via your LemonSqueezy account and through your email with the receipt.

Learn how
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.