Colors

How to change color Tokens in Ant Design System for Figma?

There are two methods to change color tokens in Ant Design System for Figma with the Figma Tokens plugin, depending on your needs.

Reference a different Ant Design color

By default, the UI kit uses the Daybreak Blue palette from the Ant Design colors library as its Primary color palette. You can easily switch from the Daybreak Blue color group to, for example, the Golden Purple group by simply referencing the color aliases in the Figma Tokens plugin. It’s the best method if you don’t have strict rules for the color you need to use, and you want to quickly change the Primary color group to a different color group available in Ant Design. For example, if you want to change the Primary color group from Daybreak Blue to Golden Purple.

1. Open the Figma Tokens plugin.
2. Open the light / map set tab.
3. Search for ‘primary’ in the search bar.
4. Right-click on the colorPrimaryBg token and select Edit Token.
5. Reference a different color token from the light / colors set by typing its name in curly brackets (for example {purple.1}.
6. Press the Update button.
7. Repeat the process for the remaining primary color tokens from colorPrimaryBgHover to colorPrimaryTextActive.

After you edit the tokens, select Apply to document in the bottom-left menu and press the Update button in the Plugin. The plugin will apply your changes to the entire project (the process can take up to 10 minutes).

Create your color palette

Let’s assume that you have only one color. For example, you are doing a project for a client whose brand color is ‘#11b55e’. You can use an official Palette Generation Tool from Ant Design and generate the entire color palette based on one color. Then, you can move these colors to Figma Tokens so the entire UI kit will use the palette you’ve generated.

1. Go to the Ant Design colors documentation.
2. Scroll down and find Palette Generation Tool.
3. In the Color Picker, paste in your primary color hex value.
4. The color palette will be generated based on the color you pasted.
5. Click on color-1 to copy its hex code.
6. In Figma, open your Ant Design System for Figma file.
7. Open the Figma Tokens plugin.
8. In the light / colors set, add a color token your-color-name.1 and paste a color-1’s value in the Color field.
9. Repeat the process for the rest of the nine remaining colors.
10. Switch to light / map set and find a primary color group.
11. Right-click on the colorPrimaryBg token and select Edit Token.
12. Reference a different color token from the light / colors set by typing its name in curly brackets (for example {purple.1}.
13. Press the Update button.
14. Repeat the process for the remaining primary color tokens from colorPrimaryBgHover to colorPrimaryTextActive.

After you edit the tokens, select Apply to document in the bottom-left menu and press the Update button in the Plugin. The plugin will apply your changes to the entire project (the process can take up to 10 minutes).