Ant Design of React follows a formula where Size tokens are calculated based on two values, “sizeUnit” and “sizeStep” as demonstrated below.
Given that Figma Variables do not support mathematical operations, it is essential to note that all size values in the Ant Design System for Figma are numbers.
If you want to change the size of elements in Ant Design System for Figma, you'll need to adjust these size variables individually. Additionally, margin and padding variables are directly linked to these size variables. Any changes you make to the size will also affect how margins and paddings appear in your design.
When you're working with Ant Design for React, changing the borderRadius token isn't just a single, isolated action. It actually influences borderRadiusXS, borderRadiusSM, and borderRadiusLG as well, thanks to a mathematical formula that ties them together. If you want to see how adjusting the borderRadius impacts these values, you can use the Theme Editor tool to observe its effects on the Map group.
On the other hand, in the Ant Design System for Figma, each borderRadius value stands on its own. So, if you want to customize the borderRadius to suit your specific requirements, it's recommended to modify each value separately.
The Ant Design uses two sizing modes: Default and Compact. To switch from Default to Compact mode for a Page in Figma, choose the "Compact" option in both the “2. Dimensions” and “3. Typography” collections. Additionally, you can follow the same process in the Layer options to switch from default to compact mode for an individual frame.