在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)，有許多軟件工具可供使用。多年來(lái)，該行業(yè)的發(fā)展經(jīng)歷了許多軟件的迭代，從最初的photoshop，到oursketch.com，再到今天的figma。這些軟件工具使我們的設(shè)計(jì)非常方便。今天，讓我們與大家分享一下自動(dòng)布局，這是最流行的產(chǎn)品設(shè)計(jì)工具figma的核心功能之一。

1.自動(dòng)布局是什么。

在IOS規(guī)范中，Autolayout是一種開發(fā)工具，用于構(gòu)建自適應(yīng)界面。通過(guò)自動(dòng)布局，您可以定義管理應(yīng)用程序內(nèi)容的規(guī)則（稱為約束）。

Figma中的自動(dòng)布局是指在增加或減少子集元素時(shí)，當(dāng)子集元素的大小發(fā)生變化時(shí)，子集元素可以通過(guò)預(yù)先制定的規(guī)則自動(dòng)改變。

2.自動(dòng)布局的優(yōu)點(diǎn)。

對(duì)于UI設(shè)計(jì)來(lái)說(shuō)，最重要的不是設(shè)計(jì)有多好看，而是能夠準(zhǔn)確地恢復(fù)開發(fā)設(shè)計(jì)草稿。從開發(fā)的角度來(lái)看，自動(dòng)布局的設(shè)計(jì)理念。

此外，在使用自動(dòng)布局設(shè)計(jì)界面時(shí)，不需要查看每個(gè)元素之間的距離是多少像素。只需在間距屬性中調(diào)整數(shù)值，以便更標(biāo)準(zhǔn)化格柵系統(tǒng)。

當(dāng)自動(dòng)布局用于整個(gè)界面時(shí)，界面間距將自動(dòng)調(diào)整，如果需要在界面中添加一個(gè)模塊，則只需要將其拖動(dòng)到自動(dòng)布局的圖層下方。

綜上所述：大大縮短了間距計(jì)算。元素對(duì)齊調(diào)整（重復(fù)工作），可以框架UI設(shè)計(jì)草稿，從開發(fā)角度幫助設(shè)計(jì)界面，提高界面開發(fā)的恢復(fù)程度。

3.自動(dòng)布局如何創(chuàng)建。

如果需要多個(gè)元素，選擇一個(gè)需要?jiǎng)?chuàng)建自動(dòng)布局的原色。

SHIFT+A是創(chuàng)建自動(dòng)布局的快捷鍵，也可以選擇右鍵點(diǎn)擊autoleyout(自動(dòng)布局)

Autolayouttolayout的屬性將出現(xiàn)在右側(cè)的屬性欄中，一個(gè)是自動(dòng)布局，另一個(gè)是調(diào)整尺寸。

屬性自動(dòng)布局。

1.自動(dòng)布局的上下方向可以調(diào)整。

2.子集間距：子集元素間距的調(diào)整。

3.內(nèi)部邊距：用自動(dòng)布局調(diào)整元素的統(tǒng)一邊距。

4.對(duì)齊和邊距：元素與自動(dòng)布局的邊距方向可以單獨(dú)調(diào)節(jié)，也可以選擇9種內(nèi)部對(duì)齊來(lái)調(diào)節(jié)單獨(dú)的邊距。

大小屬性調(diào)整。

圖像和文字在屬性框中實(shí)際上是一個(gè)東西。

(上邊文字看圖標(biāo)表示故名思義控制左右，下邊文字控制上下方向。

對(duì)于填充容器，只要理解了這三個(gè)選項(xiàng)，基本上自動(dòng)布局就會(huì)非常清晰，所有選項(xiàng)都是一樣的。

首先，我們來(lái)看看什么是固定寬度。

固定寬度

顧名思義，固定寬度就是寬度不變，即在自動(dòng)化布局的寬度屬性發(fā)生變化時(shí)，我們需要調(diào)整屬性。

適應(yīng)內(nèi)容

因此，容器的變化是適應(yīng)子集元素的變化。

填充容器

因此，子集元素隨著容器的變化而變化。

上述說(shuō)明都是針對(duì)寬度的變化，高度變化也是同樣的小伙伴可以手動(dòng)操作。