Figma 栅格系统（Layout Grid）

一、 栅格系统的作用与创建前提 #

1. 栅格系统的价值 #

• 网页设计核心： 栅格系统（格线系统）在网页设计过程中非常有用。
• 作用： 它可以作为元素的参考线，用于排版和布局。
• 益处： 使用栅格系统可以提高最终的设计质量，并加快设计效率。

2. 创建前提（重点） #

• Frame 限制： 在 Figma 中，**只有 Frame（画板/框架）**可以创建栅格系统。
• 图层限制： 其他图层（如矩形）无法设置栅格系统。用户可以在创建 Frame 后，在右下角找到 Layout Grid 设置。

二、 栅格系统的三种类型 #

Figma 的栅格系统本质上创建有三种类型：

1. Grid (网格) #

• 定义： 创建一个固定尺寸大小、固定间距的网格系统，有横向也有纵向。
• 设置： Size 字段控制横线和竖线之间的间距。
• 应用： 以前的设计方法会强调使用 8x8 的网格（用 8 的倍数来设置元素大小），但今天这种方法基本被淘汰了。Grid 功能的使用频率非常少，可能只在特定的图表绘制中会用到。

2. Columns (垂直栅格/列) #

• 定义： 垂直的格线，是网页栅格应用的主要方式。
• 设置复杂性： 垂直栅格的设置比 Grid 复杂得多。
• 核心设置项：
  • Count (数量)： 栅格的列数。常用的数字是 12 或 24，因为它们可以被 2、3、4、6 整除，非常方便。
  • Type (类型)： 定义栅格在 Frame 中的排列方式。

3. Rows (水平栅格/行) #

• 定义： 水平方向的格线。
• 逻辑： 设置逻辑与垂直栅格一模一样，只是方向变成了上中下。
• 应用场景： 在网页设计或 UI 设计环境中，横向的栅格几乎不怎么会去用。它一般用于平面排版系统。

三、 垂直栅格（Columns）的关键设置与响应式逻辑 #

在垂直栅格中，Type 选项的设置决定了栅格的适配逻辑，这是实现响应式设计的关键基础。

1. Stretch (平铺/均分) #

• 特点： 属于平铺或均分模式。
• 结果： 启用此模式后，下方的 Width（列宽）选项不能设置。列宽根据frame的宽度动态变动。

2. Center, Left, Right (居中、左对齐、右对齐) #

• 特点： 栅格不会自动均分，而是集中在特定位置。
• 手动设置宽度： 如果设置为 Center，系统不知道每列有多宽，因此必须手动设置 Width。
• 左右页边距 (Margin) 和列间距 (Gutter)：
  • Margin 是左右的页边距。
  • Gutter 是列和列之间的间距。

3. 响应式设计的底层逻辑（重点） #

• 逻辑原理： 当栅格设置为非 Stretch 模式时（如 Center），设置逻辑是：
  1. 先设置 Margin（左右页边距），从画布总宽度中减掉这部分宽度。
  2. 再减掉 Gutter（列间距）的总和（例如，12 列就有 11 个间距）。
  3. 最后，将剩下的宽度来均分给指定的列数。
• 变动结果： 在这种设置下，当 Frame（画板）进行放大缩小时：
  • Count（列数）、Gutter（列间距）和 Margin（左右页边距）的数值不会变。
  • **每列的宽度（Width）**在发生变化。
• 目的： 这就是响应式设计的基本逻辑，即在放大缩小的过程中，格线数量和间距不变，但每列的宽度会随画板大小进行调整，以适配栅格系统。

四、 栅格系统的进阶应用 #

• 多 Frame 应用： 栅格系统可以创建到下级环境里。
• 特殊 B 端界面： 在设计 B 端界面时，如果旁边有固定宽度的侧边栏（如 220 像素的导航栏），设计师通常不希望侧边栏受栅格影响。
• 建议操作： 今天的设置建议是单独在需要应用栅格的内容区域（如右侧主要内容区）创建一个 Frame。然后单独在这个新的 Frame 中创建 Columns，并设置 Gutter，但可以不用设置 Margin，因为外部 Frame 已经预留了空间。通过这种套 Frame 的方式，可以更灵活地控制栅格系统。

来源总结，栅格设置本身不难，难的是如何结合约束（Constraints）和自动布局（Auto Layout）功能来创建一个仿真的网页。

#Figma学习指南 #学习笔记

最后一次修改于 2025-11-21