Previous
arrow_back
Colors
Learn how to edit components in Ant Design System for Figma with Figma Tokens plugin.
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.
For example, if you want to check what tokens are used in the Button component.
For example, if you want to change the large height of a Button component.
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).
For example, if you want to change the base border radius (borderRadius) of a all components that use this token.
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).
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.
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.
For example, if you want to change the base height of a button component.
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).
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.
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.
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.
For example, if you want to change the base height of a button component.
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).
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.
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.
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.