Figma Tokens Sync

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

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.

Video overview

Is it safe?

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). You can read more about AWS security on https://aws.amazon.com/compliance/programs/ and ‍https://d1.awsstatic.com/whitepapers/Security/AWS_Security_Best_Practices.pdf

How to get it?

You can purchase it on the pricing page.

If you already own Ant Design System for Figma and you want to buy it separately or in Premium Package, you can do it here.

‍