Theme Buddy for Ant Design is a handy translator between your Figma design and your Ant Design project's code. It takes the variable settings you have in the Ant Design System for Figma, like colors, numbers, and other style elements, and transforms them into JSON. Once you have this JSON file, your developers can use it to make sure that the actual code of your project matches the design you've created in Figma. It's like a recipe that helps maintain design consistency from the Figma to the final product.
In other words…
Theme Buddy for Ant Design is a Figma plugin that lets you copy or save the Ant Design System for Figma theme settings as JSON. It takes the data from Figma variables and converts it to a JSON format that developers can use to modify the ConfigProvider component so the code version of the project will look exactly the same as the Figma version.
View the plugin in action and learn how it works.
For example, if you followed the instructions in the design kit's documentation to make a color palette for the primary color using Ant Design's Palette Generation Tool, or if you used the default base colors, you can tick the "colorPrimary" box. This will ensure that only the Seed token is included in the JSON. When you put this JSON into the ConfigProvider for Ant Design in your code, all the other colors from the primary group will be set up automatically.
If you want to export changes made in the Compact mode in "2. Dimentsions", select the "Compact mode" checkbox - when it is selected, the JSON will display changes in variables from Compact mode.
Here's an example of how you can use the JSON files you got from the plugin to adjust the ConfigProvider component. To delve deeper into customizing themes in Ant Design, you can explore the official documentation.
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.