導(dǎo)讀：在 Figma 中可以使用 group（組）或 frame（畫框）來組織元素，但它們又有一些不同。合理地選擇如何使用它們，能夠幫助我們更好地設(shè)計(jì)。本文來自 Figma 官方博客，由卓浩翻譯。

你知道在 Figma 中何時(shí)該使用 group（組），何時(shí)該使用 frame（畫板）嗎？它們都是承載其它元素的容器，但它們也有自己獨(dú)特的屬性和使用方法。它們彼此之間的區(qū)別并不總是很明顯，所以為了幫助區(qū)分它們，我寫了這篇入門的文章。

group（組）

與其他設(shè)計(jì)工具類似，Figma 中的 group 允許你將多個(gè)元素組合在一起作為一個(gè)頂級(jí)圖層。group 的邊界大小（邊界大小指長(zhǎng)和寬）由它的子元素決定，因此調(diào)整邊界大小或移動(dòng)這些元素將導(dǎo)致 group 的邊界大小自動(dòng)調(diào)整。你可以在選擇對(duì)象后按下 ? + G（Mac）或 Ctrl + G（Win）來快速編組。

進(jìn)行編組的操作是非破壞性的，這意味著被編組的圖層不會(huì)永久地組合在一起。在任何時(shí)候你都可以通過按 ? + Shift + G（Mac）或 Ctrl + Shift G（Win）來取消編組。

當(dāng)你想要在設(shè)計(jì)中管理更少的圖層或僅僅是想要將相關(guān)的圖層組合在一起時(shí)，將分散的圖層合并成 group 非常有用。例如，你可以選擇將分散的公司 logo 圖層合并成一個(gè) group。單擊 group 中的任何子元素都將會(huì)選擇整個(gè) group，此時(shí)你可以將其作為畫布上的單個(gè)對(duì)象進(jìn)行移動(dòng)或操作。如果需要選擇 group 中特定的某個(gè)子元素，可以通過雙擊來實(shí)現(xiàn)。

你還可以利用 group 內(nèi)的智能排序等功能來調(diào)整元素之間的間距。在下面的示例中，你可以看到 group 的邊界大小會(huì)根據(jù)子元素的大小自動(dòng)調(diào)整。

當(dāng)子元素調(diào)整邊界邊界或重新定位時(shí)，group 的邊界會(huì)自動(dòng)調(diào)整

使用常規(guī)方法調(diào)整 group 的邊界大小時(shí)，子元素的矢量圖形將按照你希望的情況比例縮放。但是效果、文字尺寸和描邊的大小不會(huì)自動(dòng)進(jìn)行縮放。如果你希望同時(shí)縮放這些屬性，請(qǐng)使用縮放工具（按下 K 切換）。如果要設(shè)置子元素的 constraints（自適應(yīng)約束）調(diào)整方式，請(qǐng)考慮使用 frame，因?yàn)樽釉貙⑹冀K相對(duì)于最接近的父級(jí) frame 的邊界大小進(jìn)行自適應(yīng)調(diào)整，而不是相對(duì)于父級(jí) group 的邊界大小。

左邊是使用常規(guī)方法來調(diào)整包含矢量圖稿和文本的 group，右邊是使用縮放工具（K）來調(diào)整組 group 邊界大小

frame（畫框）

在理解上，你可能會(huì)想到其他設(shè)計(jì)工具中的 artboard（畫板），實(shí)際上 frame 可以作為我們?cè)?Figma 中的畫板使用。與此同時(shí)，畫板 frame 還可以理解為未定義前的 component（組件）。frame 和 component 是在 Figma 中創(chuàng)建動(dòng)態(tài)布局的重要組成部分。

在深入研究 frame 的行為和屬性之前，讓我們快速介紹一下可以創(chuàng)建 frame 的三種方法。

• 在頂部菜單欄中選擇 frame 工具（F），然后從右側(cè)的屬性面板中選擇預(yù)置設(shè)備尺寸。這將在你的畫布上創(chuàng)建一個(gè)新 frame，新 frame 的尺寸就是你所選的預(yù)置設(shè)備的精確尺寸。
• 選擇 frame 工具后，在畫布區(qū)域單擊并拖動(dòng)以創(chuàng)建所需邊界大小的 frame。
• 與 group 類似，你可以選擇畫布上的現(xiàn)有元素，并通過按 ? + Opt + G（Mac）或 Ctrl + Alt + G （Win）將其組合為一個(gè) frame。

如果你希望執(zhí)行相反的操作并刪除 frame，鍵盤快捷鍵與取消編組相同：? + Shift + G（Mac）或 Ctrl + Shift G（Win）。現(xiàn)在讓我們深入了解 frame 的獨(dú)特功能和用途。

frame 邊界大小

frame 的邊界大小獨(dú)立于其子元素。如果在 frame 內(nèi)重新定位或縮放子元素，frame 的邊界不會(huì)自動(dòng)調(diào)整。如果希望 frame 的尺寸重新調(diào)整以適應(yīng)內(nèi)容，可以單擊右側(cè)屬性面板中的“調(diào)整邊界大小以適應(yīng)”按鈕。

frame 的邊界不會(huì)自動(dòng)調(diào)整，如果希望 frame 的尺寸重新調(diào)整以適應(yīng)內(nèi)容，可以單擊右側(cè)屬性面板中的“調(diào)整邊界大小以適應(yīng)”按鈕

值得注意的是，Figma 中的 frame 與組件的行為幾乎完全相同。您可以將 frame 轉(zhuǎn)換為組件來重復(fù)使用它，如果將現(xiàn)用的子組件分離出來，您將看到它會(huì)被轉(zhuǎn)換為 frame。

調(diào)整 frame 的邊界

在調(diào)整邊界大小時(shí)，frame 和 group 的行為會(huì)有所不同。瀏覽下圖可知，調(diào)整 group 時(shí)內(nèi)部的子元素也將跟隨外部邊界大小進(jìn)行調(diào)整。而默認(rèn)情況下，對(duì) frame 的邊界大小調(diào)整不會(huì)影響其子元素的尺寸。但是你可以給子元素設(shè)置 constraints（自適應(yīng)約束），這樣當(dāng)你調(diào)整 frame 時(shí)，內(nèi)部子元素會(huì)根據(jù)你設(shè)置的 constraints 來自適應(yīng)。默認(rèn)情況下 constraints 被設(shè)置為頂部和左側(cè)距離固定。

當(dāng)你希望子元素能夠在父級(jí) frame 變化時(shí)保持自身相對(duì)位置和大小時(shí)，設(shè)置 constraints 是非常有用的，而這也是創(chuàng)建響應(yīng)式組件所必需的。下面的動(dòng)圖展示了 group、未定義 constraints 的 frame 和定義了 constraints 的 frame 在尺寸變化時(shí)的區(qū)別。

溫馨提示：如果要在調(diào)整 frame 邊界大小時(shí)忽略 constraints，請(qǐng)?jiān)谕蟿?dòng) frame 邊框時(shí)按住 ?（Mac）或 Ctrl（Win）

超出 frame 的內(nèi)容

由于 frame 的邊界大小可以獨(dú)立于其子元素進(jìn)行調(diào)整，配合內(nèi)容裁切（clip content）功能（可在右側(cè)屬性面板中看到）可以有許多不同的使用方式。以下是一些常見示例：

隱藏超出 frame 的元素：通過啟用內(nèi)容裁切，可以隱藏超出 frame 的元素。

顯示邊界以外的元素：通過禁用內(nèi)容裁切，你可以讓超出 frame 邊界大小的元素保持可見。例如，如果要?jiǎng)?chuàng)建一個(gè)包含雙引號(hào)標(biāo)點(diǎn)符號(hào)的 frame，則可以調(diào)整框架的邊界大小，使其邊界大小與文本框的左邊緣對(duì)齊，使引號(hào)留在框架邊界大小之外。在這種情況下，你可以更容易地對(duì)齊設(shè)計(jì)中的主體對(duì)象。

控制顯示內(nèi)容的數(shù)量：通過設(shè)置適當(dāng)?shù)淖赃m應(yīng)約束并啟用內(nèi)容裁切，你可以構(gòu)建展開時(shí)顯示更多內(nèi)容的 frame 或組件。例如，你有一個(gè)下拉菜單，它可以擁有不同數(shù)量的選項(xiàng)，這時(shí)就可以使用這種簡(jiǎn)單的方法來調(diào)整 frame 邊界大小以控制菜單項(xiàng)數(shù)目。

原型中超出 frame 的元素：超出 frame 邊界大小的元素可以設(shè)置為在原型內(nèi)滾動(dòng)。例如，在你的設(shè)計(jì)中可以創(chuàng)建一個(gè) frame 來容納滾動(dòng)輪播。你可以設(shè)置超出 frame 的元素的行為為滾動(dòng)，以便在原型模式下查看時(shí)可以滾動(dòng)內(nèi)容。

網(wǎng)格布局

你可以為每個(gè) frame 或組件設(shè)置獨(dú)一無二的網(wǎng)格布局。這樣，你就可以結(jié)合網(wǎng)格布局和 constraints（自適應(yīng)約束），通過它們的共同作用，來實(shí)現(xiàn)一些特別的自適應(yīng)效果。在下面的示例中，您可以看到最外層 frame 有一個(gè) 2 列的網(wǎng)格布局，底部標(biāo)簽欄有一個(gè)嵌套的 frame，它有 3 列網(wǎng)格布局。通過合理的自適應(yīng)約束設(shè)置，當(dāng)最外層 frame 的邊界大小發(fā)生變化時(shí)，子元素的邊界大小會(huì)相對(duì)于布局網(wǎng)格自動(dòng)調(diào)整。

總結(jié)

你可以通過多種方式（一起或單獨(dú)）使用 group 和 frame 來實(shí)現(xiàn)不同的元素行為。

推薦在以下情況下使用 group：

• 你希望將多個(gè)元素組合到一起，但不影響他們的可編輯性
• 你希望將多個(gè)元素組合在一起，以便在縮放時(shí)保持跟隨縮放（例如：由多個(gè)形狀組成的logo或符號(hào)）
• 你希望在操作 group 的邊界大小時(shí)可以使子元素自動(dòng)適應(yīng)

推薦在以下情況下使用 frame：

• 你希望獨(dú)立于子元素控制 frame 的邊界大小
• 你希望定義子元素的自動(dòng)調(diào)整行為（自適應(yīng)約束）
• 你希望對(duì)象被 frame 邊界大小剪切，或者位于 frame 的邊界大小之外
• 你希望原型中具有嵌套滾動(dòng)的行為（例如：水平輪播或者可以隨意移動(dòng)的地圖）
• 你希望在該元素中使用網(wǎng)格布局

作者：Figma 設(shè)計(jì)布道師 Thomas Lowry
翻譯：卓浩
地址：https://www.figma.com/blog/groups-vs-frames

總結(jié)

以上是生活随笔為你收集整理的frame中src怎么设置成一个变量_在 Figma 中如何选择 group（组）或 frame（画框）？...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。