Figma中可通过Distribute功能实现画板等距排列:需先确保画板同层无嵌套,再用对齐面板选择横向或纵向等距命令;支持手动设边界、插件扩展网格分布及Auto Layout容器绑定响应式间距。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

如果您在Figma中创建了多个宽度不一的画板,但希望它们沿水平或垂直方向保持均匀间距,可借助内置的Distribute功能实现自动等距排列。以下是完成此操作的具体步骤:
一、确保画板处于同一图层组并取消嵌套
执行Distribute前,所有目标画板必须位于同一层级且未被包裹在组件、帧或嵌套组内,否则Distribute选项将不可用或行为异常。
1、按住Shift键依次点击选中所有需排列的画板。
2、右键检查上下文菜单中是否显示“Ungroup”;若显示,则说明存在嵌套,选择该选项解除分组。
3、确认图层面板中所有画板图标均直接列于同一父级下(无缩进),且类型标识为Canvas而非Frame或Component。
二、使用对齐面板触发Distribute功能
Figma的Distribute工具依赖于对齐面板中的空间分布命令,需先完成基础对齐,再应用等距逻辑。
1、保持所有画板仍为选中状态。
2、在右侧属性检查器中找到“Align”区域,点击右上角三个点图标展开更多选项。
3、根据排列方向选择对应分布命令:Distribute Horizontal Spacing(横向等距)或Distribute Vertical Spacing(纵向等距)。
4、点击后,Figma将自动计算所选对象最外侧边缘之间的总空隙,并将其均分至相邻画板之间。
三、手动微调起始与结束位置以控制边界
Distribute仅调整中间间距,首尾画板的位置由其原始坐标决定;如需整体居中或贴边,须预先设定参考锚点。
1、选中全部画板后,在X/Y输入框中记录最左侧画板的X坐标值(横向排列时)或最上方画板的Y坐标值(纵向排列时)。
2、拖动首个画板至期望的左边界位置,例如画布左边缘内缩40px处。
3、再次执行Distribute Horizontal Spacing,此时所有间距将基于新起点重新计算。
4、若需整体居中,可先选中全部画板,点击对齐面板中的Align Left和Align Right组合按钮使画板群组临时居中于画布,再运行Distribute。
四、通过插件扩展多维度分布能力
原生Distribute仅支持单轴(X或Y)等距,若需同时约束水平与垂直方向间距,或按网格密度动态重排,可启用第三方插件辅助。
1、点击顶部菜单栏“Plugins” → “Search plugins”,输入关键词distribute grid。
2、安装并运行插件“Distribute Plus”或“Auto Layout Distribute”,启动后会弹出配置面板。
3、在面板中设置Horizontal Gap与Vertical Gap数值,勾选“Maintain Aspect Ratio”防止画板比例畸变。
4、点击“Apply”,插件将依据设定间隙值,自动重定位所有画板,无视原始尺寸差异,生成严格等距网格布局。
五、利用Auto Layout容器实现响应式间距绑定
对于需频繁增删画板的项目,可将画板嵌入启用了Auto Layout的Frame中,使间距成为可复用的属性。
1、新建一个空Frame,尺寸设为足够容纳全部画板的宽度与高度。
2、将各画板逐一拖入该Frame内部,松手后Figma自动为其添加Auto Layout属性。
3、在右侧属性检查器中,将Layout方向设为Horizontal或Vertical,并开启“Padding”与“Spacing”输入框。
4、在“Spacing”字段中填入固定像素值(如24),所有画板将实时维持该间隔,新增画板也会自动继承相同间距规则。


















