July 19, 2023

Ant Design System for Figma 5.7

Variables are now available in the newest version of the Ant Design System for Figma! We also added component tokens to match Ant Design’s docs so you can style each component individually.

What’s New

  • added currently supported Figma variables
  • added component tokens to the Tokens Studio plugin
  • Figma Tokens Sync now supports component tokens

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

  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.

Can I update my existing project to the new Ant Design System for Figma 5.7?

No, it’s not possible. When working on Ant Design projects, it is best to stick with the version of the Ant Design System for Figma that you initially used. Updating to a newer version is difficult because Figma handles each file separately. Therefore, it is recommended to use new versions only for new projects.

Is it necessary to use Tokens Studio in the newest version of the Ant Design System for Figma 5.7?

No. You can use native Figma Variables and Figma Styles if you like. Remember that Figma Variables are still in beta, and there is no variables support for Typography or Effects yet. Using Tokens Studio is necessary when you use Figma Tokens Sync and want to sync your tokens with your code.

How to use Figma Tokens Sync in the Ant Design System for Figma 5.7?

We’ve added a new guide on installing Figma Tokens Sync for the newest version (5.7). If you purchased Figma Tokens Sync or Premium Package, you will find the new guide in the link you can access via Lemon Squeezy after downloading the zip file.

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.