模块和间距系统

模块

模块是设计系统中最基本的测量单位。空间模块是构建网格和确定组件及间距大小的基础。模块使您能够标准化设计系统中指定间距和大小的原则,并在 Figma 布局和最终生产代码之间实现视觉一致性。

模块

为了在我们的设计系统中塑造和衡量空间,我们使用 4x4 像素的模块。所有容器和组件的间距都使用此空间大小进行计算。在极少数情况下,我们会使用 2x2 像素的微模块。

Group 216614948.png

间距系统

我们使用有限的、经过 token 化处理的间距,这有助于创建简洁一致的布局。在设计系统中创建界面和组件时,请使用预配置的 Figma token。

Frame 216614957.png

间距类型

Frame 2087326456.png

内部和外部间距

从所有四个容器边框到内容的内部和外部对称或不对称间距。

Frame 2087326462.png

水平和垂直堆叠

在水平和垂直堆叠中,容器内元素之间的间距定义了它们垂直和水平的关系。

上一页网格和容器