Sync Figma Tokens with your Ant Design  React project

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.

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.