While doing research for the book “Designing in Figma”, I discovered a powerful way to lay out objects using a combination of Layout Grid and Constraints. The interface of Figma does not indicate a connection between the two, so it can be discovered either by a happy accident or from reading a help article. Luckily, the latter is my kind of fun pastime.

在為《 Figma中的設計 》一書進行研究時，我發現了一種結合使用布局網格和約束來布置對象的有效方法。 Figma的界面并不表示兩者之間的聯系，因此可以通過意外事故或閱讀幫助文章來發現它。 幸運的是，后者是我的一種消遣方式。

Let’s start with a quick overview of how Constraints and Layout Grids work on their own, and then see how they can be used together.

讓我們首先快速了解一下約束和布局網格如何獨立工作，然后了解如何將它們一起使用。

約束條件 (Constraints)

Constraints define how objects respond when their parent frame is resized. This is useful when the same frame or component is being used in multiple sizes. Constraints can be set separately along both the horizontal and vertical axis. The object can scale with the frame, or stick to its center, one side, or both sides.

約束定義對象在調整其父框架的大小時的響應方式。 當同一框架或組件以多種尺寸使用時，這很有用。 可以沿水平和垂直軸分別設置約束。 對象可以隨框架縮放，也可以固定在其中心，一側或兩側。

布局網格 (Layout Grids)

Figma has three tools for creating Layout Grids — Grid, Columns, and Rows. They can be combined in any way, even with multiple grids of the same type overlaying one another. For our use case, we’re interested only in Columns and Rows. They can be created either fixed or stretchy.

Figma具有用于創建布局網格的三個工具-網格，列和行。 它們可以以任何方式組合，即使同一類型的多個網格相互重疊也是如此。 對于我們的用例，我們僅對Columns和Rows感興趣。 可以將其創建為固定的或拉伸的。

Fixed columns and rows have fixed width or height and can be aligned to either side or center of the frame. Fixed columns are useful if your mockup has a fixed width or you design for a single screen size, which is quite rare nowadays. Fixed rows are great for creating baseline grids and aligning text to them.

固定的列和行具有固定的寬度或高度，并且可以與框架的一側或中央對齊。 如果您的模型具有固定的寬度或設計為單個屏幕大小，則固定列很有用，這在當今非常罕見。 固定行非常適合創建基線網格并將文本對齊它們。

Stretchy layout grids have almost the same properties as fixed, but their width or height is automatically calculated based on dimensions of the frame, number of columns or rows, gutter, and margin. Stretchy columns and rows provide a great foundation for responsive design on the web and adaptive layouts in the apps.

可拉伸的布局網格具有與固定的幾乎相同的屬性，但是它們的寬度或高度是根據框架的尺寸，列數或行數，裝訂線和邊距自動計算的。 可伸縮的列和行為Web上的自適應設計和應用程序中的自適應布局奠定了良好的基礎。

約束+布局網格=?? (Constraints + Layout Grids = ??)

Layout Grid is not just a visual aid. When applied to the frame, it helps Figma align nested objects when the frame is being resized. If you use stretchy grids, a child’s Constraints will be based on the nearest column or row of the grid instead of the frame. This helps maintain fixed gutters and results in more realistic scaling behavior.

布局網格不僅是視覺上的幫助。 應用于框架時，它可以在調整框架大小時幫助Figma對齊嵌套對象。 如果使用拉伸網格，則孩子的約束將基于網格的最近列或行而不是框架。 這有助于保持固定的裝訂線并導致更實際的縮放行為。

分配對象 (Distribute Objects)

To experiment with this behavior, let’s prototype a toolbar of the mobile app and set Constraints of the icons to Center and Center. It works fine when we change the orientation, but there is definitely room for improvement:

為了試驗這種行為，讓我們為移動應用程序的工具欄設計原型，并將圖標的約束設置為Center和Center。 當我們更改方向時，它可以很好地工作，但是肯定還有改進的空間：

Now, let’s apply Layout Grid with three stretchy columns to the toolbar:

現在，將帶有三個可伸縮列的布局網格應用于工具欄：

Icons are aligned to the columns, and their Constraints are set to Center and Center. When we change frame’s orientation to the landscape now, they’re properly distributed in the toolbar.

圖標與列對齊，并且其約束設置為居中和居中。 現在，當我們將框架的方向更改為橫向時，它們已正確分布在工具欄中。

固定間距 (Fixed Spacing)

The same technique can be used for maintaining fixed gutters and margins when resizing the frame. In the next example, Layout Grid wasn’t used, and both horizontal and vertical Constraints on the blocks were set to Scale. When the parent frame is resized, both gutters and margins are scaled proportionally.

調整框架大小時，可以使用相同的技術來保持固定的裝訂線和邊距。 在下一個示例中，未使用“布局網格”，并且塊上的水平和垂直約束都設置為“縮放”。 調整父幀的大小時，裝訂線和邊距均按比例縮放。

On a fixed example, the Layout Grid was defined with stretchy columns and grids, and Constraints of the blocks were set to Left-Right and Top-Bottom. When resized, all objects stick to the grid and spacing around them is unchanged.

在固定示例中，使用可伸縮的列和網格定義“布局網格”，并將“塊”的“約束”設置為“左-右”和“上下”。 調整大小后，所有對象都將粘在網格上，并且周圍的間距不變。

結論 (Conclusion)

After learning about a powerful combination of Constraints and Layout Grids, I couldn’t stop thinking about why it has no presence in the interface. Maybe it’s a simple oversight, or perhaps the team at Figma plans to evolve Auto Layout to make this combination obsolete. In any case, right now there is no better way to distribute objects and create consistent spacing than with Constraints and Layout Grids. By adding this tool to our toolbox, we can remove another barrier to creating flexible layouts and truly reusable components when designing in Figma.

在了解了約束和布局網格的強大組合之后，我就停止思考為什么它在界面中不存在。 也許這只是一個簡單的疏忽，或者Figma的團隊計劃開發Auto Layout來使這種組合過時。 無論如何，目前沒有比約束和布局網格更好的方法來分配對象和創建一致的間距。 通過將此工具添加到我們的工具箱中，我們可以消除在Figma中進行設計時創建靈活布局和真正可重用組件的另一障礙。

You can play and experiment with all the examples from this article by duplicating a Figma Community file.

您可以通過復制Figma社區文件來播放和嘗試本文中的所有示例。