Customization

Components

In Ant Design for React, components are constructed using design tokens, which are categorized into two main groups: component-specific tokens (used exclusively within each component) and global tokens (shared across components).

In the Ant Design System for Figma, variable names align with those in Ant Design for React. It's important to note that not all design tokens are utilized, though. We have omitted variables for components that aren't currently compatible with Figma and excluded those that aren't crucial for Figma's design, such as zIndex or motion-related tokens.

Editing components

To customize components, you can adjust their variable values or reference different global variables. For instance, here's how you can edit the Button component:

  1. Navigate to the Button page.
  2. In the Variables panel, locate and select the Button group under Components.
  3. Inside the Button variables, find the "borderRadius" and modify its value to 9999.
  4. Locate the "paddingInline" variable and change its value to 19.
  5. Allow some time for the changes to take effect.

Creating new components

When creating new components for use throughout the system, you should leverage variables from the Seed, Map, and Alias groups. To help you get started, we've provided an example of an AppHeader component and how you can implement the variables in Ant Design for React using design tokens. You can find it in the Edit Theme page in the Ant Design System for Figma. You can inspect its settings to see how we used the variables.

Implementing components in React

Below, you will find the aforementioned AppHeader component and how it may be coded in Ant Design of React with the use of design tokens.

Introduction

Ant Design System for Figma’s components has been built with Figma Tokens. Each component uses its own token set that you should edit to make changes to the component. Below you can see an example of how to properly edit the button component. The procedure is the same for other components and tokens.

How to edit components with Figma Tokens?

For example, if you want to change the base height of a button component.

  1. Go to the Button page.
  2. Open the Figma Tokens plugin.
  3. Open the default / components set tab.
  4. Search for ‘btn’ in the search bar.
  5. Find and right-click on the btn.height-base token in the Sizing group and select Edit Token.
  6. Change the value from 32px to for example 36px.
  7. Press the Update button.

After you edit the token, 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).

Components’ typography tokens

To avoid detaching typography styles, all components use the styles that reference the tokens, such as font-family or line-height.base. However, some components should reference their own typography semantic tokens as in the original Ant Design’s .less files. If you want to change the component’s text from a text style to a dedicated token, make sure to detach its style and add the token manually with the Figma Tokens plugin.

How to create new components with Figma Tokens?

If you want to create new components, make sure to use design tokens from default / theme set, it will allow you to stay consistent with Ant Design documentation. You can learn more about how to apply tokens in the official Figma Tokens documentation.

Introduction

Ant Design System for Figma’s components has been built with Figma Tokens. Below you can see an example of how to properly edit the button component. The procedure is the same for other components and tokens.

How to check what tokens are used in the component?

For example, if you want to check what tokens are used in the Button component.

  1. Open the Figma Tokens plguin.
  2. Go to Button page.
  3. Select Button component set.
  4. In the Figma Tokens plugin click on Inspect tab.
  5. After a few seconds, the plugin will show all tokens used in the component.

How to edit components with Figma Tokens?

For example, if you want to change the large height of a Button component.

  1. Go to the Button page.
  2. Open the Figma Tokens plugin.
  3. Open the light / map set tab.
  4. Find and right-click on the controlHeightLG token in the Sizing group and select Edit Token.
  5. Change the value from 40 to for example 44. (Important! To keep the sizing consistent across all components - this action will also affect other components that use this token).
  6. Press the Update button.

After you edit the token, 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 edit tokens in Figma Tokens?

For example, if you want to change the base border radius (borderRadius) of a all components that use this token.

  1. Open the Figma Tokens plugin.
  2. Open the light / seed set tab.
  3. Find and right-click on the borderRadius token in the Border Radius group and select Edit Token.
  4. Change the value from 6 to for example 8.
  5. Press the Update button.

After you edit the token, 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 create new components with Figma Tokens?

If you want to create new components, make sure to use design tokens from light / map and light / alias sets, it will allow you to stay consistent with Ant Design documentation. You can learn more about how to apply tokens in the official Figma Tokens documentation.

Introduction

Ant Design System for Figma’s components has been built with Figma Tokens. Each component uses its own token set that you should edit to make changes to the component. Below you can see an example of how to properly edit the button component. The procedure is the same for other components and tokens.

How to edit components with Figma Tokens?

For example, if you want to change the base height of a button component.

  1. Go to the Button page.
  2. Open the Figma Tokens plugin.
  3. Open the default / components set tab.
  4. Search for ‘btn’ in the search bar.
  5. Find and right-click on the btn.height-base token in the Sizing group and select Edit Token.
  6. Change the value from 32px to for example 36px.
  7. Press the Update button.

After you edit the token, 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).

Components’ typography tokens

To avoid detaching typography styles, all components use the styles that reference the tokens, such as font-family or line-height.base. However, some components should reference their own typography semantic tokens as in the original Ant Design’s .less files. If you want to change the component’s text from a text style to a dedicated token, make sure to detach its style and add the token manually with the Figma Tokens plugin.

How to create new components with Figma Tokens?

If you want to create new components, make sure to use design tokens from default / theme set, it will allow you to stay consistent with Ant Design documentation. You can learn more about how to apply tokens in the official Figma Tokens documentation.

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.