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.
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.
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.
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.
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.
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:
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.
After the purchase you will get:
To get Figma Tokens Sync, you have two options:
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.
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.
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.
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.
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.
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.
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).
No, at the moment, we only support Ant Design System for Figma.
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.