Figma Tokens Sync for Ant Design System: Synchronize Figma Tokens with Ant Design React project

Hello ProductHunt! 👋 I’m super excited to share our next product with you finally! What is Figma Tokens Sync? Figma Tokens Sync is a tool that allows you to synchronize your design tokens from the Ant Design System for 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. Why did we build 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. 15% OFF on All Packages To celebrate the launch, I’m sharing a special discount code that works on all packages from our website (the code will be valid until 25 Jan). How to redeem your code? 1. Go to our launch page on Product Hunt 2. Copy discount code: PH15OFF 3. Choose your package: - Ant Design System for Figma (Basic Package) - Ant Design System for Figma (Pro Package) - Ant Design System for Figma (Premium Package) (contains lifetime license for Figma Tokens Sync) 4. Enter the code during checkout As always, thanks for the support. Stay tuned for more updates! 🤗

Hello, I'm the software developer responsible for the technical part of Ant for Figma Tokens Sync. I've designed and implemented both figma-tokens-transformer, the backend it uses and a few extra scripts. Although I've been a software developer for over 7 years, it was a new experience for me. I'm glad I could've participated in it. The challenge here was writing many different scripts translating values used in Ant Design to and from Figma Tokens. I would've never imagined so many edge cases in something that seemed so easy at first. Thanks to the code I've prepared, Matt's task of reassigning appropriate tokens in Figma was (hopefully) a bit easier. It also allowed the final product to make use of Figma Tokens in a nice way to integrate the design with actual React code. I'm sure that end-user experience should be seamless. The unexpected challenge (for both Matt and myself) was the release of Ant Design v5 at the end of the year. I had to change the figma-tokens-transformer configuration wizard to avoid users' confusion. Moreover, the backend side had to be enhanced to handle the new (and completely different) approach as well. The work we've both put into Figma Tokens Sync at the beginning and the decision not to take shortcuts have paid off many times now. We still had to use trial and error method to achieve the final thing - it was a lot of work. The product we've prepared is well-designed, implemented and tested, may be even called cutting edge by some. An extra feature for the geeks may be the fact that the whole backend runs as a few AWS Lambdas (FaaS).

Matt Wierzbicki

Theme Buddy Figma Plugin

Maker