响应式设计

在 Web 端响应式设计由来已久，如今在移动设备上响应式也越来越重要了，这是因为现在的移动设备窗口尺寸也越来越多样了。除了常规的手机和平板，几乎各厂商都发布了自己的折叠屏，再加上 iOS 和 Android 都支持分屏特性，在设计移动端时我们也需要考虑响应式了。

在 Figma 中我们可以结合使用布局栅格（Layout grid）和约束规则（Constraints）来实现响应式布局，它们还可以和上两节的自动布局（Auto layout）结合。

布局栅格（Layout grid）

我最早接触的「栅格系统」是前端框架 Bootstrap，它通过定义一系列的行和列的栅格（最多 12 列），来帮助前端工程师们在界面中组合布局。这些栅格会在不同尺寸下进行响应式变化，而页面元素和栅格对齐，进而让我们的网站能够适配各种尺寸的屏幕。

Figma 里的布局栅格和 Bootstrap 的栅格有些相似，但又有所不同。**在 Figma 中，布局栅格是一种样式属性，只可以给 Frame 添加，可以把它看作适用于响应式设计的参考线。**布局栅格分为网格、行和列三种，我们可以同时给一个 Frame 添加多个。

网格一般在绘制图标的时候使用，方便我们对齐网格，保持图标空间感一致以及避免出现虚像素。

图片来自 A complete guide to iconography

网格还可以用于 Material design 推荐的 8x 栅格，通过给背景 Frame 添加网格，我们可以清晰地看到每个元素是否和 8x 栅格对齐，尤其是文字排版。

图片来自 Material design spacing methods

行与列和 Bootstrap 的栅格类似，帮助我们在横向和纵向上排布元素。使用行与列栅格，我们可以轻松制作内边距、12 栅格和宫格形式的参考线（块）。在 Frame 内移动元素时，这些参考区会自动吸附，这样就可以将元素对齐栅格了。

栅格有时候会影响我们观察设计，尤其是当我们调整颜色时。我们可以在右上角的视图下拉选项中将其临时隐藏掉，也可以使用快捷键 Ctrl G（Windows 下是 Ctrl + Shift + 4）显示或隐藏。