Customization

Theme Buddy Figma Plugin

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 short demo

View the plugin in action and learn how it works.

How to use it?

Requirements:

  • You need to have Ant Design System for Figma version 5.11 or a newer
  • This tool only works with the Ant Design System for Figma, and won't work with other UI kits
  • The JSON can be used in the React version of Ant Design

Part 1. Settings

  1. Open the Ant Design System for Figma version 5.11 or above.
  2. Open Theme Buddy for Ant Design plugin. You can find it in the Assets / Plugins panel (Shift + I).
  3. Open the Settings tab.
  4. Select the version of the Ant Design System for Figma you use.
  5. Select the tokens you created using the Ant Design Algorithm method.

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.

Part 2. Save JSON files

  1. In Ant Design System for Figma, make your changes to variables following the instructions from the ‘Edit Theme 🎨’ page.
  2. Run the plugin.
  3. Save the JSON for the light theme by clicking the Export JSON button.
  4. Switch the tab to Dark to save the JSON for the dark theme by clicking the Export JSON button.

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.

Part 3. Use JSON files

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.

  1. Create the “tokens” folder in “src” in your Ant Design of React project.
  2. Copy and paste “light.json” and “dark.json” files to the “tokens” folder.
  3. Create ThemedApp.jsx file in the src folder in your Ant Design of React project with the following code.
  4. Change the code inside the index.js file in the src folder to the following code.
  5. Change the code inside the App.js file in the src folder to the following code.
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.