Size, space & radius

Size formula

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.

Editing size and space

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.

Border Radius

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.

Compact mode

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.

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.