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.