Customization

Colors

In the Ant Design System for Figma, a fundamental understanding of how colors operate in Ant Design for React is essential. Ant Design utilizes a color algorithm to derive color palettes, which are based on a single color value from the Seed group. For instance, when a developer sets a colorPrimary token value to '#6514ce,' it triggers the generation of a comprehensive palette for the entire color primary group, as depicted below.

This approach is applicable to other color categories as well, such as colorSuccess, colorWarning, and colorInfo. Moreover, you can also generate a neutral color palette based on a single token, 'colorTextBase.' To observe how this process works in Ant Design, you can experiment with the Theme Editor tool.

In the forthcoming section of this article, we will delve into various methods for adjusting colors within the Ant Design System for Figma.

Base colors

Ant Design, much like numerous other design systems, offers a set of predefined color palettes to serve as a starting point. These palettes consist of 12 base colors, which you can employ as your primary or functional colors. You can access these colors in the Ant Design System for Figma within the "Base Colors" frame located on the Colors page, as well as in the variables panel. Each color within the base group is also available as a Figma color variable, making it usable across the entire system.

By default, Ant Design designates the Daybreak Blue color from the Base color palettes as the primary color. Below, you will find guidance on how to modify the primary color from Daybreak Blue to a different Base color or a color of your choosing.

Brand colors

In the Ant Design System for Figma, brand colors are categorized into the following groups:

  1. Primary Colors: These colors serve as the main brand or theme colors that define the overall visual identity of your project.
  2. Functional Colors: Functional colors include Error, Success, Warning, and Info. They are typically used to convey different states or messages, such as indicating success, errors, warnings, or providing information.
  3. Link Colors: Link colors are specifically designated for inline links, helping users identify and interact with clickable elements in your design.
  4. Control Colors: Control colors are alias tokens used in various user interface controls, including elements like inputs and form components. These colors are integral to maintaining consistency and usability throughout your design system.

By organizing colors into these categories, Ant Design System for Figma streamlines the process of selecting and applying colors to different parts of your project, ensuring a cohesive and user-friendly visual experience.

Editing Brand colors

There are two approaches for adapting brand colors to meet your project's requirements. The first method involves leveraging the pre-existing base color palettes provided by Ant Design, while the second method demonstrates how to incorporate your own custom colors. These methods, as outlined below, are suitable for adjusting both the Primary and Functional colors. It's important to note that the Link and Control groups don't necessarily need direct modifications, as they derive their values from the Primary color group. However, should the need arise, you can certainly customize or assign specific values for variables within these groups.

By providing these two options, Ant Design System for Figma offers flexibility in tailoring your brand colors to suit your design preferences and project needs.

Use default base colors

To use base color palettes as your brand's primary color, you can follow the example below, in which you will learn how to change your primary color from Blue to Purple.

  1. Open Variables panel.
  2. Find and select the Primary group located in Colors/Brand/… .
  3. In the panel on the right, click on the Colors/Base/Blue/6 variable located in the colorPrimary row in the Light mode column.
  4. Search and select Colors/Base/Purple/6 from the Libraries popup.
  5. Repeat the steps for the rest of the colors from the Primary group for both Light and Dark modes. Notice that you should select the same color value, for example, when changing from Blue/1 choose Purple/1.

Use your colors

There are two options that you can use to change the default brand colors to your own colors. The first method is the most convenient and introduces the Palette Generation Tool from Ant Design. The second way is more flexible but requires more changes in the React project config later on. Below, you can learn how to use both methods.

What are the differences between options?

Option 1 offers a convenient and efficient way to create a color palette for your app using the Ant Design Palette Generation Tool. With this tool, you can generate a unified color scheme for both light and dark themes by specifying just one base color. This streamlined process harnesses Ant Design's built-in color algorithm, simplifying the task of developers when configuring color schemes. Instead of manually handling numerous color values, developers only need to provide a single color input.

For instance, to modify the entire palette for the primary color, developers need to set a single value for the "colorPrimary" token, as demonstrated below. This one adjustment triggers the automatic generation of a harmonious palette for both themes, reducing complexity and enhancing design consistency.

In contrast, Option 2 offers greater flexibility for those who prefer to rely on a custom color palette. If you have a specific set of 10 color values that you wish to use as your primary color, you can specify each of these colors individually in the React project's configuration. This approach grants you complete control over your color choices, but it does involve the manual input of all the color values, as illustrated in the example below.

Option 1. Generate color palette

To use the generated palette in the Ant Design System for Figma, we will need to create a new base color palette and then reference all created colors in our color primary variables group. As an example, let’s create a primary color palette based on a hex value ‘#2f12dd’.

Part 1. Create a base color palette

  1. Go to Palette Generation Tool.
  2. Enter '#2f12dd’ in the color picker.
  3. Copy the ‘color-1’ value from the Palette Generation Tool.
  4. Open the Variables panel in Figma.
  5. Create a new Color variable, ‘Colors/Base/Indigo/1’.
  6. Paste the ‘color-1’ value into the Light Mode of the newly created Color variable in Figma.
  7. Repeat the process for the colors 2 to 10.
  8. For the dark mode, repeat the process but use the Dark Color Palette Generation Tool color values.

Part 2. Reference colors

  1. Open Variables panel.
  2. Find and select the Primary group located in Colors/Brand/… .
  3. In the panel on the right, click on the Colors/Base/Blue/6 variable located in the colorPrimary row in the Light mode column.
  4. Search and select Colors/Base/Indigo/6 from the Libraries popup.
  5. Repeat the steps for the rest of the colors from the Primary group for both Light and Dark modes. Notice that you should select the same color value, for example, when changing from Blue/1 choose Indigo/1.

Note for developers

If your design team used this option, you can change the colorPrimary token in your ConfigProvider to generate the entire palette based on one color.

Option 2. Use your color palette

If you want to use your own hex values for your primary color palette, you need also to create the base palette for your color and then reference it in the color primary group.

Part 1. Create a base color palette

  1. Open the Variables panel in Figma.
  2. Create a new Color variable ‘Colors/Base/YourColorName/1’.
  3. Enter your hex values into Light Mode and Dark Mode of the newly created Color variable in Figma.
  4. Repeat the process for the colors 2 to 10.

Part 2. Reference colors

  1. Open Variables panel.
  2. Find and select the Primary group located in Colors/Brand/… .
  3. In the panel on the right, click on the Colors/Base/Blue/6 variable located in the colorPrimary row in the Light mode column.
  4. Search and select Colors/Base/YourColorName/6 from the Libraries popup.
  5. Repeat the steps for the rest of the colors from the Primary group for both Light and Dark modes. Notice that you should select the same color value, for example, when changing from Blue/1 choose YourColorName/1.

Neutral Colors

In the Ant Design System for Figma, neutral colors cover Text, Icon, Background, Border, and Fill color elements. You have the flexibility to adjust variables within these groups using the variables panel. When making changes, keep in mind that editing variables in the Seed and Map groups will apply your modifications globally. For instance, if you modify the "colorText" variable, it will also affect "colorTextHeading," eliminating the need to make the same changes multiple times.

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

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 the Color Input in the 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 Color Input 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).

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.