在 Figma 中设计响应式布局网格是一种有效的方法，可确保您的设计能够顺利适应不同的屏幕尺寸。 Figma 的布局网格可帮助您创建一致、可扩展的设计，并可轻松调整以适应各种设备屏幕。

1. 创建桌面端、移动端 Frame

从工具栏中选择框架工具或按键盘上的“F”，然后单击画布以创建框架。您可以从预设大小中进行选择，也可以为框架定义自定义尺寸。第一个选项更可取。您可以为桌面选择桌面框架，为平板电脑选择 iPad mini，为手机选择 iPhone 14 和 15 Pro。

2. 添加布局网格

选择框架后，转到右侧面板的“设计”选项卡下。在这里，您会看到一个“布局网格”选项。单击“+”图标以添加新网格。Figma 提供三种类型的网格：网格（默认）、列和行。

对于响应式设计，您首先需要创建列网格。单击布局网格设置。然后在下拉菜单中选择列。列网格用于水平对齐 UI 元素。网格系统中的每一列大小完全相同。

3. 配置列网格

选择“列”后，您可以配置网格设置。关键设置包括：

类型：如果您想创建响应式网格，则需要选择“拉伸”以使列拉伸以填充框架。 数量：列数。对于桌面，常见的做法是使用 12 列网格，以实现设计灵活性。 间距：列之间的空间。这有助于确保内容具有一致的间距。 边距：列与框架边缘之间的空间。

如果您要创建一个 8 点网格，那么在边距方面，您需要选择一个能被 8 整除的值。我建议将边距设置为 24。

边距是网格系统右侧和左侧的空白区域。您并不总是希望网格一直延伸到视口的边缘。因此，通过设置边距，您可以决定容器需要多少空白空间。在边距方面，边距的大小通常根据容器的宽度来选择。

所有项目都不同，并且没有严格的规则来定义容器的大小。我通常使用 1152 点作为桌面容器的大小。边距是相应地选择的 — 在我的情况下，它将是 144pt。这个数字是如何计算的？视口的大小是 1440 减去容器的大小（即 1152 点），再除以 2。

4. 创建行网格

创建水平网格后，就该创建垂直网格了。选择框架，然后在布局部分中再次点击加号按钮。这次，将设置更改为行。对于水平网格，选择类型顶部，因为您希望网格从屏幕顶部开始。在计数设置中，输入 1000。它将用行填充所有框架。偏移量应设置为 0，因为我们想从顶部开始。由于我们使用 8 点网格，因此高度将设置为 8，间距也设置为 8。因为我们计数到 1000，所以即使我们更改框架的高度，我们仍然可以看到行。

5. 复制网格系统

完成桌面网格后，就该为平板电脑创建网格了。如果您不想从头开始，您可以简单地复制并粘贴为平板电脑框架中的桌面创建的布局网格，并修改水平网格的值。

垂直网格（带行的网格）对于所有三个视口都是相同的，因此您只需修改水平网格（带列的网格）。单击布局网格设置并在列中设置 8。对于平板电脑，我们通常使用较少的列数，因为我们可以使用的空间较少。边距为 32，间距为 16。

最后，您可以将布局网格从平板电脑复制并粘贴到移动设备上。对于移动设备，我们将列数减少到 4。您应该将边距设置为 16，将间距设置为 16。16 是移动设备的最小推荐边距大小，因为它可以保证内容周围的安全区域。此外，16 可以被 8 整除，这与我们创建 8 点网格的目标一致。

6. 使用 CoDesign 上传设计稿

在 Figma 中完成设计稿后，你可以使用 CoDesign (opens new window) 将设计稿上传并同步到项目中。这样，你的团队成员可以随时查看和获取最新的设计稿，实现高效的团队协作。

Figma 是一款功能强大且易于使用的在线设计工具，搭配这些实用的插件，你的设计工作将更加高效。当然，如果你还有其他问题或建议，欢迎使用腾讯 CoDesign 与我们交流！

页面原文内容由 Medium 提供。CoDesign 提供翻译支持

原文链接：https://medium.com/ux-planet/responsive-layout-grid-in-figma-dfec9733b5681