Welcome to the Ant Design System for Figma, a powerful design system tailored for creating user interfaces within Figma. This system aligns seamlessly with the principles and guidelines set by Ant Design of React. Inside, you'll discover a comprehensive collection of pre-designed UI components, typography styles, color palettes, and icons that mirror the Ant Design React library.
Our system harnesses the potential of Variables within Figma. Variables in Figma store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows. In Ant Design System for Figma, variables are representations of design tokens from Ant Design.
Ant Design classifies its design tokens into three primary categories: Seed, Map, and Alias. Map Tokens derive from Seed Tokens, while Alias Tokens are derived from Map Tokens. Additionally, tokens specific to components are separated into Component-specific and Global categories. The former allows customization of component-specific values, while the latter tweaks shared token values. To delve deeper into design tokens and theme customization, refer to the official Ant Design of React documentation here. You can also preview how editing the tokens affects Ant Design in the Theme Editor playground.
Within the Ant Design System for Figma, we've thoughtfully organized variables (design tokens) based on their type and function. This ensures that designers can easily locate, adjust, and employ them through the Variables panel. Our structure encompasses the following categories:
It's worth noting that Figma Variables are currently in beta, meaning that some features are still in development, limiting the complete representation of all Ant Design tokens. Below, we provide examples of what's missing and how we've found alternative approaches to address these gaps.
Figma does not yet support typography, effect, stroke width, and layer opacity variables. While awaiting official support, we employ Styles for typography and effects (such as box shadows). You'll find detailed instructions on working with these styles in dedicated articles.
Ant Design's token algorithm often involves mathematical equations and Javascript statements for token values, which Figma does not currently support. Instead, we rely on number variables, which are currently supported in Figma.
Some Ant Design tokens contain multiple values, which Figma Variables do not currently support. For instance, the Collapse component in Ant Design utilizes the "contentPadding" token with a value of "16px 16px." In Figma, we address this by using separate variables for each padding value. Instead, we use a variable named 'padding' with a value of 16px, as illustrated below.
Ant Design is also using an algorithm to generate colors based on the tokens color from the Seed group. Figma’s color variables only allow for color values such as hex, rgba, and we stick with them within the Ant Design System for Figma.
To learn how Variables work and how to use them, please see this help page in the official Figma documentation. In the Ant Design System for Figma, you'll learn how to use variables to tailor the system to your specific needs.
Hierarchy-wise, as mentioned earlier, Ant Design tokens are classified into three groups: Seed, Map, and Alias. Many components also possess their own tokens, split into Component and Global groups.
This structure empowers designers and developers to make global or component-specific changes. Modifying variables from the Seed group, for instance, cascades changes to all elements in the groups below, and so on. To identify the group to which a variable belongs, view our documentation frames in the Style Guide or refer to the official Ant Design documentation.
To maintain consistency with Ant Design's token system, it's advisable to edit existing variables rather than introducing new ones.
