Customization

Colors

Learn how to edit color tokens in Ant Design System for Figma with Figma Tokens plugin.

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 default / theme set tab.
  3. Search for ‘primary’ in the search bar.
  4. Right-click on the primary.1 token and select Edit Token.
  5. Reference a different color token from the default / 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 color tokens from primary.2 to primary.10.

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 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 default / 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 default / theme set and find a primary color group.
  11. Right-click on the primary.1 token and select Edit Token.
  12. Reference your color token from the default / colors set by typing its name in curly brackets (for example {your-color-name.1}.
  13. Press the Update button.
  14. Repeat the process for the remaining color tokens from primary.2 to primary.10.

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).

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.