使用Figma介绍布局网格和间隔的基础，附figma免费布局网格UI kit

今天给大家带来国外设计师的一篇关于在利用figma介绍布局网格和间隔的基础，附赠送Figma免费布局网格的源文件一份！

作者：马克·安德鲁 翻译：谷歌翻译（感觉没啥大的阅读障碍）

每个出色设计的关键是信息的组织。间距方法和布局网格定义了设计中的结构，层次结构和节奏。如果使用得当，它们可以减少决策制定，并有助于建立合理的字体比例，位置，大小和间距方法。

请留意文章the结尾的免费布局网格UI套件。它包含布局网格样式，响应行为和约束示例，以帮助您学习和快速启动设计过程。⚡️⚡️⚡️

间距基础

在深入探讨布局网格之前，让我们回顾一些影响所有尺寸，尺寸和间距决策（包括网格配置）的间距基础知识。

基本单位

基本单位定义每次测量的倍数。这样可以使设计保持一致，改善与开发人员的沟通，并减少设计人员必须做出的决策数量。推荐的基本单位是8px，因为它可以轻松，一致地缩放各种设备。这是因为大多数屏幕尺寸都可以被8整除，并且8本身就是一个容易整除的数字（8/2 = 4，8/4 = 2）。

提示：组件中的图标，文本和某些元素可以与4px网格对齐，以改善小区域中的间距并简化实现。

间隔增量相同

UI元素的高度和宽度应尽可能以基本单位（即8、16、24）为增量进行测量。这样可以创建清晰的层次结构，整齐地对齐元素，并提供一致的视觉节奏。例如，在您的所有设计中，行高，按钮和表单输入都应具有相同的增量高度。

填充

填充是指UI元素之间的空间，也以基本单位的增量来度量。一致，可预测的填充在美学上令人愉悦，阐明了元素之间的关系，并提高了可读性。例如，组件内部的填充应在其所有元素之间创建整体间隔模式。

提示：在Figma中，您可以通过将“轻推”量从10更新为8（菜单>首选项>轻推量> 8）来避免麻烦。

布局网格基础

布局网格起源于早期的打印设计，用于定义文本和图像块，其基本原理仍然适用于当今我们如何在网络上组织二维信息。随着设备和屏幕尺寸的不断增长，网格对于保持一致性和创造凝聚力的设计体验至关重要。

最近，网格在诸如Figma之类的工具中变得更加灵活和强大，具有诸如样式，尺寸限制和嵌套框架等高级功能（稍后会详细介绍）。

网格解剖

所有网格均由三个元素组成：列，装订线和边距。列是网格的构建基块，用于标记元素的放置位置。装订线是列之间的负间距，其宽度应为基本单位的倍数。边距是外部列的边缘和框架之间的负空间。

有很多方法可以组合列，装订线和边距来创建不同的网格布局。以下是一些标准网格类型。

手稿网格

这是最简单的布局，只有一列跨越整个内容区域的宽度。当在一块文本上定义边距时（如在手稿中），手稿网格可能会很有用。

列格

列网格是用于Web应用程序的最常见的布局。网格将框架分成对象对齐的均匀间隔的垂直字段。这些网格通常由12列组成，在设计响应式屏幕尺寸时，可以将其分为两半，三分之四，六分之六（稍后会详细介绍）。

模块化网格

这是列网格的变体。模块化网格具有垂直列和水平行，它们相交并创建单元或模块的矩阵。这些模块提供单独的单元或组合时的更大块的附加布局指南。

基线网格

基线网格由密集的水平行组成，这些行提供文本的对齐和间距准则，类似于您在直纹纸上书写的方式。在下面的示例中，每8px行在红色和白色之间交替。

提示：将所有行高设置为基本单位（8x或4px）的增量非常重要，这样您的文本才能与基线网格完美对齐。

响应式布局网格

布局网格需要响应，放大和缩小，以在各种屏幕尺寸上显示信息，以保持可用性。这是通过建立一致的布局网格行为并设置确定的断点以支持整个设计来实现的。

固定行为

此行为具有“固定的”容器宽度和位置。随着屏幕尺寸的变化，容器将保留其所有精确的测量值，而边距尺寸则增大或减小。这样可使所有元素保持比例，但在超大型设备尺寸上可能会留出太多空白。

流体行为

流体布局以百分比而不是像素来衡量，因此容器的宽度会随着屏幕尺寸的变化而增加和减少。通过使边距和装订线宽度保持恒定，同时增大或减小列大小来调整容器宽度。此行为利用了可用的屏幕空间，但可能导致元素显得拉长。

断点

断点为设计人员和开发人员提供了一种简便的方法来控制设计布局，因为它可以从移动设备扩展到桌面。这有助于我们在不影响UX的前提下，将设计适应所有类型的设备尺寸。建立一组断点使跨设备尺寸传达设计正确行为变得更加容易。

断点通常以“ px”为单位表示，并且在范围内。虽然没有“必须”的断点，但是这里有一些断点可以帮助您入门。

断点： •小（0px-599px） •中（600px-899px） •大（900px-1199px） •超大（1200px以上）

提示：这些断点是基于David Gilbertson的文章“ 做CSS断点的100％正确的方法 ”的，如果您想深入了解更多信息。

这对您意味着什么？当您需要显示设计如何扩展和响应时，请在Figma中使用以下框架尺寸：

帧大小： •375px显示“小”断点行为 •600px显示“中”断点行为 •900px显示“大”断点行为 •1200px显示“超大”断点行为

除了“小”断点外，当显示响应式设计行为时，我们默认使用给定断点范围内的最小器件尺寸。

每个断点的修改后的布局可能会稍有变化（即，增加装订线的大小），或者变化更大（即，更改列数，内容布局和使用的UI元素）。

以下是使用流体行为的响应界面。每个布局都会扩展，直到遇到断点为止，这时布局将更新为下一个断点大小。例如，当小布局达到600像素时，它将更新为中布局。

在Figma中使用网格进行设计

Figma是使用布局网格进行设计的最强大，最灵活的工具之一，因为它们使用了嵌套框架，样式，约束和可定制性。

将布局网格应用于任何框架

在Figma中，可以将网格应用于任何框架，而不仅限于画板级别。这意味着可以将网格应用于顶层框架（台式机，平板电脑，移动设备）以及嵌套框架（即设计中的框架内容区域或组件）。

将约束应用于响应式设计

约束允许您控制任何元素相对于其父框架的大小调整行为。例如，您可以将元素（如按钮）固定在框架的一角，并在框架展开或收缩时保持确切的大小和填充。

与拉伸布局网格一起使用时，约束将相对于其最近的列以在元素之间保持固定的空间（装订线）。当设计多个设备尺寸时，这特别有用。

保存网格样式

创建并保存多种自定义网格样式。这对于在相关内容区域，组件类型和设计尺寸之间保持一致的大小非常有用。

自定义网格外观

通过更新其颜色和不透明度，使网格布局更易于查看和区分。

所有网页设计项目都必须使用空间方法和布局网格。应该在设计过程的早期就定义它们，并请团队中的每个人都认同。这将确保设计保持一致，开发​​有明确的要求以及更快地交付产品。

是否想将这些最佳实践应用于您的设计？

使用我们专门为Figma构建的免费布局网格UI套件，以准备好的布局网格样式，响应行为文档和约束示例开始您的设计过程。‍????????

下载地址：

http://www.uifig.com/554.html

我是倾心，我决定用我的兴趣去做一件事，就是用自己的理解每天写一篇文章，去让更多的人知道这个设计协同工具Figma，同时分享工具的使用技巧！有兴趣的可以关注我的网站http://www.uifig.com，或有问题的想问的，可以加入Q群667916742,只要我知道的都会告诉大家！

原文地址：http://www.uifig.com/529.html