Theme Buddy Figma Plugin

Theme Buddy for Ant Design is a Figma plugin that simplifies working with Ant Design themes. It has an export feature that lets you save Figma theme settings as JSON files, making it easy for developers to ensure their code matches Figma designs. It also has an import feature that allows you to apply theme settings from your code directly into Figma, helping you maintain consistent styling across your Ant Design React app and Figma projects.

Video tutorial

View the plugin in action and learn how it works.

Requirements

• Must have the Ant Design System for Figma version 5.11 or newer.
• Compatible only with Ant Design System for Figma, not with other UI kits.
• JSON output is usable in the React version of Ant Design (5.0+).

Free version

The Free version lets you try out the Light Theme Export feature. Install the plugin from the Figma Community and use it with the Ant Design System for Figma version 5.11 or later.

Full version

The Full version offers comprehensive features:

• Export options for Light Theme, Dark Theme, and Compact Mode.
• Import options for Light Theme, Dark Theme, and Compact Mode.

How to obtain the Full version?

The Full version of the Theme Buddy plugin is available through:

1. A one-time purchase for a lifetime license in our Premium or Ultimate package.
2. A monthly or yearly subscription exclusively for the plugin.

How to use the Theme Buddy plugin?

Getting started

1. Open the Ant Design System for Figma version 5.11 or above.
2. Open the Theme Buddy for Ant Design plugin. You can find it in the Assets / Plugins panel (Shift + I) or install it via Figma Community.
3. Go to the plugin’s Settings tab.
4. Select the version of the Ant Design System for Figma you use.
5. If you want to use the Full version of the plugin, click the “Click here to verify your license” button.
6. Enter the serial key you received after the purchase in your email receipt. You can also find your serial key via your Lemon Squeezy account by logging into your account.
7. Press the “Verify key” button.

Export

The export tab 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.

Part 1. Edit theme and save JSON

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. Go to the plugin’s Settings tab.
4. In the Use Ant Design Algorithm section, select the tokens you created using the Ant Design Algorithm method. (If you followed the instructions in the 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.)
5. In the Export / Light tab, save the JSON for the light theme by clicking the Export JSON button.
6. In the Export / Dark tab, 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. Dimensions," select the "Compact mode" checkbox. When it is selected, the JSON will display changes in variables from Compact mode.

Part 2. 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.

Import

The import tab lets you transfer theme settings from your code into Figma, ensuring consistent styling between your Ant Design React app and Figma designs. For example, if you already have styling applied to your React app, you can copy the ConfigProvider theme settings and paste them into the plugin import tab. The plugin will then apply changes to variables.

Part 1. Copy JSON

If you are using Ant Design of React (5.0+) and have already styled your project, you can copy the theme settings JSON. Ensure you adhere to the supported formats: Format 1 or Format 2.

If you don’t have any styling yet, you can use the Theme Editor tool from Ant Design. It will allow you to test your theme before making your changes in Figma:

1. Go to the Theme Editor tool.
2. Make changes to colors, sizing, radius, or components.
3. Click on the “Config” button in the top right corner of the tool.
4. Copy the JSON content.

The Theme Editor does not allow you to change the font family, so if you want to pass the font family value to the JSON, add a (for example, “fontFamily”: “Roboto”) line in the “token” group. Here’s an example.

Make sure you have at least professional plan of Figma to be able to import Dark and Compact theme settings. When importing the theme settings on free Figma account the plugin will display an error because it won't have access to other Modes.

Part 2. Import

1. Open the Theme Buddy plugin.
2. Switch to the Import tab.
3. Select the Light tab.
4. Paste your JSON.
5. Press the “Replace variables” button.
6. Now, be patient. Your changes will be applied to Figma variables after a few minutes (or seconds, depending on your changes). Once the sync icon stops appearing, it means that the document has finished applying changes.
7. To ensure that all your instances are correctly updated, open the Command menu and run the command “Regenerate all instances (slow)”. After a few minutes, all instances will be regenerated, ensuring that all changes are applied everywhere in your document.