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

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

group（組）

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

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

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

你還可以利用 group 內的智能排序等功能來調整元素之間的間距。在下面的示例中，你可以看到 group 的邊界大小會根據子元素的大小自動調整。

當子元素調整邊界邊界或重新定位時，group 的邊界會自動調整

使用常規方法調整 group 的邊界大小時，子元素的矢量圖形將按照你希望的情況比例縮放。但是效果、文字尺寸和描邊的大小不會自動進行縮放。如果你希望同時縮放這些屬性，請使用縮放工具（按下 K 切換）。如果要設置子元素的 constraints（自適應約束）調整方式，請考慮使用 frame，因為子元素將始終相對于最接近的父級 frame 的邊界大小進行自適應調整，而不是相對于父級 group 的邊界大小。

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

frame（畫框）

在理解上，你可能會想到其他設計工具中的 artboard（畫板），實際上 frame 可以作為我們在 Figma 中的畫板使用。與此同時，畫板 frame 還可以理解為未定義前的 component（組件）。frame 和 component 是在 Figma 中創建動態布局的重要組成部分。

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

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

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

frame 邊界大小

frame 的邊界大小獨立于其子元素。如果在 frame 內重新定位或縮放子元素，frame 的邊界不會自動調整。如果希望 frame 的尺寸重新調整以適應內容，可以單擊右側屬性面板中的“調整邊界大小以適應”按鈕。

frame 的邊界不會自動調整，如果希望 frame 的尺寸重新調整以適應內容，可以單擊右側屬性面板中的“調整邊界大小以適應”按鈕

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

調整 frame 的邊界

在調整邊界大小時，frame 和 group 的行為會有所不同。瀏覽下圖可知，調整 group 時內部的子元素也將跟隨外部邊界大小進行調整。而默認情況下，對 frame 的邊界大小調整不會影響其子元素的尺寸。但是你可以給子元素設置 constraints（自適應約束），這樣當你調整 frame 時，內部子元素會根據你設置的 constraints 來自適應。默認情況下 constraints 被設置為頂部和左側距離固定。

當你希望子元素能夠在父級 frame 變化時保持自身相對位置和大小時，設置 constraints 是非常有用的，而這也是創建響應式組件所必需的。下面的動圖展示了 group、未定義 constraints 的 frame 和定義了 constraints 的 frame 在尺寸變化時的區別。

溫馨提示：如果要在調整 frame 邊界大小時忽略 constraints，請在拖動 frame 邊框時按住 ?（Mac）或 Ctrl（Win）

超出 frame 的內容

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

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

顯示邊界以外的元素：通過禁用內容裁切，你可以讓超出 frame 邊界大小的元素保持可見。例如，如果要創建一個包含雙引號標點符號的 frame，則可以調整框架的邊界大小，使其邊界大小與文本框的左邊緣對齊，使引號留在框架邊界大小之外。在這種情況下，你可以更容易地對齊設計中的主體對象。

控制顯示內容的數量：通過設置適當的自適應約束并啟用內容裁切，你可以構建展開時顯示更多內容的 frame 或組件。例如，你有一個下拉菜單，它可以擁有不同數量的選項，這時就可以使用這種簡單的方法來調整 frame 邊界大小以控制菜單項數目。

原型中超出 frame 的元素：超出 frame 邊界大小的元素可以設置為在原型內滾動。例如，在你的設計中可以創建一個 frame 來容納滾動輪播。你可以設置超出 frame 的元素的行為為滾動，以便在原型模式下查看時可以滾動內容。

網格布局

你可以為每個 frame 或組件設置獨一無二的網格布局。這樣，你就可以結合網格布局和 constraints（自適應約束），通過它們的共同作用，來實現一些特別的自適應效果。在下面的示例中，您可以看到最外層 frame 有一個 2 列的網格布局，底部標簽欄有一個嵌套的 frame，它有 3 列網格布局。通過合理的自適應約束設置，當最外層 frame 的邊界大小發生變化時，子元素的邊界大小會相對于布局網格自動調整。

總結

你可以通過多種方式（一起或單獨）使用 group 和 frame 來實現不同的元素行為。

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

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。