Figma Tokens Sync

Introduction to Figma Tokens Sync

Learn what is Figma Tokens Sync in Ant Design System for Figma.

What is Figma Tokens Sync?

Figma Tokens Sync is a special feature we built on top of the Figma Tokens plugin that will allow you to sync your tokens with your Ant Design of React (v 4.23) project repository on GitHub, GitLab or Azure DevOps. Stop wasting time of your design and development team every time you need to push token changes from Figma to your GitHub repo. For example, you can change the primary color or font family in your Figma file and sync your changes with your code project, which will reflect those changes automatically!

How does it work?

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

Video overview

Do I need Figma Tokens Pro to have it work?

No, you don’t need Figma Tokens Pro. It works on a free version of the plugin. However, you should definitely check out the pro version because it allows for GitHub branch switching.

Is the Figma Tokens Sync feature available for older versions of the Ant Design System for Figma?

No, the Figma Tokens Sync feature works only for Ant Design System for Figma version 3.0 (and above).

What version of Ant Design of React is compatible with Figma Tokens Sync?

Version 4.23 is fully supported. We are working on supporting version 5.0 but at the moment, Figma Tokens Sync will only work with version 4.23.3.

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 or Ant Design System - Full Package and you want to buy it separately, you can do it here.

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.