Figma Tokens Sync for Ant Design System

Sync Figma Tokens with your Ant Design  React project

Streamline your workflow. Stop wasting time of your design and development team every time you need to push token changes from Ant Design System for Figma to code.

Important Notice: The Tokens Studio plugin is no longer used with Ant Design System for Figma version 5.11 and above. This is because we have transitioned to using Figma's native variable support. If you still want to use Tokens Studio with Ant Design System for Figma, please use Ant Design System for Figma version 5.9.

What is Ant Design System for Figma?

Ant Design System for Figma is a design system for creating user interfaces in the Figma design tool. It is based on the Ant Design library, which is a popular design language for building user interfaces in the React JavaScript library. The Ant Design System for Figma includes a set of pre-designed UI components, typography styles, color palettes, and icons that exactly match Ant Design React library. Ant Design System for Figma also uses Figma Tokens plugin to maintain it's design tokens.

Overall, Ant Design System for Figma is a powerful tool for designers and developers who are using Figma and Ant Design of React to create user interfaces for web applications. It helps to streamline the design process and ensure that the user interface is consistent, intuitive, and visually appealing.

What is Figma Tokens?

Tokens Studio for Figma (also known as Figma Tokens) is a plugin for Figma that allows users to integrate design tokens into their Figma designs. Design tokens are small pieces of data that define the design elements of a user interface, such as colors, typography, and spacing. By using Figma Tokens in Ant Design System for Figma, designers can use design tokens that can be easily shared and updated across their projects.

For example, the "borderRadius" token is a design element that determines the roundness of the corners of UI elements such as buttons, input fields, and cards. If the borderRadius token is set to 6 pixels, then all elements that use the borderRadius token will have a border radius of 6 pixels. If the borderRadius token is changed to 12 pixels, then all elements that use the borderRadius token will have their border radius changed to 12 pixels.

Ant Design System for Figma Button Component's Design Tokens
Button Component's Design Tokens

The Ant Design System for Figma allows designers to easily change the value of a token and have that change applied to all elements that use the token. This can be a useful way to quickly update the appearance of a design and ensure that it is consistent across all elements. It can also help designers to create designs that are easier to maintain, as they only need to modify a single value in order to update the appearance of multiple elements.

What is Figma Tokens Sync?

Figma Tokens Sync is a tool that allows you to synchronize your design tokens from Figma with a project that uses Ant Design of React. The tool is built on top of the Figma Tokens plugin and integrates with popular version control systems such as GitHub, GitLab, and Azure DevOps. This means that you can easily update your design tokens in Figma and have those changes automatically reflected in your Ant Design of React project, ensuring that your design is consistent across all platforms.

How does it work?

All tokens are saved in a JSON file in the Tokens Studio plugin. When you change tokens' properties in Tokens Studio, Figma Tokens Sync creates a new JSON file based on the original one. This new JSON file can then be turned it into styles that are used in your code making your designs look exactly like in Figma.

Usage

  1. Install and set everything up with the instructions you got after the purchase.
  2. Use the Tokens Studio plugin to modify design tokens, such as changing the colorPrimaryBase or borderRadius.
  3. Click the update button in the plugin to apply the changes to all components.
  4. Push the updated tokens to your version control system.
  5. Run the transform command or set it to automatically execute when tokens are pushed from Tokens Studio.
  6. Your design token changes will now be reflected in your code project.

Why do I need it?

Figma Tokens Sync is a tool that can be useful for designers and developers who are working on a project that uses Ant Design and want to ensure that the design is consistent across all platforms. By using Figma Tokens Sync, you can synchronize your design tokens from Figma with a repository on GitHub, GitLab, or Azure DevOps that is associated with your Ant Design of React project. This means that any changes you make to the design tokens in Figma will be automatically reflected in your Ant Design of React project, ensuring that the design remains consistent. Using Figma Tokens Sync:

  • can save time and effort by eliminating the need to manually update the design tokens in multiple places.
  • can also help to reduce the risk of errors and inconsistencies by ensuring that the same set of design tokens is used consistently throughout the project.

Figma Tokens Sync is particularly useful for large projects with multiple designers and developers working on different parts of the project, as it helps to ensure that everyone is working with the same set of design guidelines.

What do I get after the purchase?

After the purchase you will get:

  • Installation instructions on how to set up Figma Tokens Sync and and connect it with Ant Design System for Figma.
  • License key allowing you to transform tokens and use the script on unlimited personal and client projects.

How to get Figma Tokens Sync?

To get Figma Tokens Sync, you have two options:

  1. Purchase the Premium Package with one-time payment. This package includes immediate access to all of our current resources, as well as lifetime access to new updates and templates. It also includes Figma Tokens Sync.
  2. Purchase Figma Tokens Sync separately in subscription with 7 days of free trial. Please note that the Ant Design System for Figma is not included with the separate purchase and must be purchased through the Basic Package on our pricing page.

Questions and Answers

Do I need Figma Tokens Sync to sync my Figma file with my Ant Design of React project?
expand_more

Yes, a Figma Tokens Sync is required to be able to sync your Ant Design System for Figma with your Ant Design of React code repository.

Do I need Tokens Studio for Figma Pro version of the plugin to use it in Ant Design System for Figma?
expand_more

No, you don’t need Tokens Studio Pro. It works on a free version of the plugin. However, you should definitely check out the pro version because it allows for branch switching, theming and more awesome features.

Is Ant Design System for Figma included with the separate purchase of Figma Tokens Sync?
expand_more

Ant Design System for Figma is not included with the separate purchase of Figma Tokens Sync. In order to obtain Ant Design System for Figma, you must purchase the Basic Package from our pricing page. Alternatively, you can also purchase the Premium Package which includes both Figma Tokens Sync and Ant Design System for Figma.

Can Figma Tokens Sync work with custom added sets and tokens?
expand_more

Currently, the transformer can only handle tokens from the default sets (the ones you have after opening the Figma Tokens plugin). We are working on adding support for multiple sets, but for now, we recommend that you keep only default sets and make any necessary changes within those sets.

Can I try out Figma Tokens Sync for free?
expand_more

Yes. There is a 7 day free trial for Figma Tokens Sync, but you need Ant Design System for Figma which is available in the Basic Package that can be purchased via our pricing page.

Which Ant Design versions are supported?
expand_more

We support Ant Design v5 (React) and Ant Design v4 (React). There is a dedicated Figma UI kit and Figma Tokens Sync script for each version.

Version 5: All tokens are saved in a JSON file in the Tokens Studio plugin. When you change tokens' properties in Tokens Studio, Figma Tokens Sync creates a new JSON file based on the original one. This new JSON file can then be turned it into styles that are used in your code making your designs look exactly like in Figma.

Version 4: Figma Tokens Sync for Ant Design of React v4 creates .less files based on your token's JSON file in Figma Tokens, so you can easily sync your token changes in Figma with your .less files in Ant Design of React code. There is a dedicated Figma UI kit for this version (Ant Design System for Figma 3.0) and you will find it in Older versions.zip after the purchase.

Is Figma Tokens Sync Safe?
expand_more

Yes! Figma Tokens Sync is a script installed locally that calls a service exposed at Amazon Web Services Lambda (FaaS). The service does not store data (e.g. on AWS S3), and each call is executed in a separate environment that is purged on exit. The result is returned immediately to the callee and not stored any further. All communication is encrypted as it’s performed over Secure Socket Layer (HTTPS).

Does Figma Tokens Sync works for Ant Design Mobile for Figma?
expand_more

No, at the moment, we only support Ant Design System for Figma.

Did you create Figma Tokens (Tokens Studio for Figma) plugin?
expand_more

No, we are not the creators of Tokens Studio for Figma. Figma Tokens Sync is a tool that was developed by a team separate from the creators of Tokens Studio for Figma. Tokens Studio is a plugin for Figma that allows users to manage and organize design tokens within the Figma interface. Figma Tokens Sync is a separate tool that integrates with Tokens Studio and can be used to synchronize design tokens from Figma with an Ant Design of React project. Figma Tokens Sync works by using a script to transform the json files exported from Tokens Studio into working Ant Design styles, which can then be used in an Ant Design of React project.

Figma Tokens Sync for Ant Design System for Figma
Figma Tokens Sync
  • check
    Easy installation instructions
  • check
    License key
  • check
    Use on unlimited personal and client projects
  • check
    GitHub, Gitlab and Azure DevOps supported
Get in Premium Package
or buy separately