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.