Figma 的群組物件：Group & Frame 的特點與用法

6 min readOct 3, 2020

在初期使用 Figma 時，偶爾會搞不清楚應該使用 Group 或是 Frame 來群組物件。找到了 Figma 官方的說明文件，部分翻譯的官方的說明加上我自己的理解，分享給大家！

Group 的特點與用法

Figma 中的 Group 可以把多個物件組合在一起，成為一個群組。群組的邊界是由裡面的物件所決定的，因此調整這些物件的大小或移動這些物件會讓這個群組的邊界也跟著一起調整。

相對的如果調整群組內物件的大小，群組的邊界也會跟著改變。但是 Effect, Stroke, Font size 並不會一起跟著整個群組的尺寸調整。如果要在群組的狀況下調整 Effect, Stroke, font size 必須使用 Scale tool，或者改用 Frame。

某些物件經常需要一起移動時，將他們 Group 起來可以讓之後需要移動時變得非常方便，也不會不小心動到已經決定好的間距，例如 Logo。

如果用過 Sketch 的人，你可能會認為他是 Sketch 裡面的 Artboard，但實際上 Frame 的應用範圍更廣。在 Figma 中，他可以是每個設計的基礎元件，也可以是一個 top-level 的框架（如 Artboard）。

Frame 的尺寸與內部物件的尺寸是「不相關的」，改變內部物件尺寸不會影響 Frame 的尺寸；而 Group 是相關的，改變內部物件尺寸會直接改變 Group 尺寸（如上段所提）。

但如果你希望 Frame 的尺寸能剛好包覆所有的內部物件，可以再調整好內部物件後點擊 icon (Resize to fit) 來自動縮放 Frame 尺寸，如下圖：

而 component 尺寸規則也和 Frame 相同，是與內部物件不相關的。

因為 Frame 的尺寸與內部物件不相關，因此調整 Frame 尺寸時，內部物件並不會跟著調整，如下圖：（與 Group 不同，Group 會跟著調整喔！）

但是 Frame 可以用 constraint 設定內部物件和 Frame 之間的關係，Default 的設定是內部物件都會對齊 Frame 的 Top & Left，如上圖。

而且你也可以自行設定各種對齊的規則，這將會是設計 UI 和 compoenent 時非常重要的功能！

因為 Frame 尺寸與內部物件是不相關的，所以可以完成各種介面上的排版：

當你有物件想要放在超過 Frame 的框架，並且隱藏在 frame 外的部分時，先將物件一部分移出 Frame 範圍，這時設定尺寸的地方將會出現 clip content 的 check box，將它勾選即可裁切 Frame 外的物件，如下圖：

2. 顯示超出 Frame 的物件：

有時候會需要部分內容與其他物件對其，但其他物件不需對齊，這時可以把不須對齊的物件移到 Frame 外面，如下圖：

3. 下拉選單的應用：

有時設計下拉選單 component 時，在不同地方會有不同的選項數量，這時可以透過 clip content 的方法直接隱藏不需顯示的選項，如下圖：

4. 製作 Prototype 的應用：（最常用到！）

將 Frame 尺寸設定為顯示內容的尺寸，並勾選 clip content 將 Frame 外的物件隱藏，接著在 prototype 的 overflow behavior 選擇你要水平或者垂直 scroll。設定完成即可在 Present 時看到可以選動的內容，如下圖：

以上是 Figma 官方文件說明 Frame 和 Group 的特點。

我自己的經驗是，只有最單純的群組需求時用 Group 來群組，其他都可以用 Frame，畢竟 Frame 才有更進階的 constraint, clip content 等等設定，未來如需製作 component 也可以直接轉換。

以 UI/UX Designer 身份工作了六年多，目前使用 Figma 跨部門與 PM, Engineer 合作。目前正在準備 Figma 一對一客製化教學課程，不管是初學者、跨領域或者想轉換跑道的人都可以和我聊聊 :)

📮 missa.designer@gmail.com

看完文章如果有任何想法或想更進一步討論的主題，歡迎留言給我 📝如果你覺得文章還不錯，請給我一些拍手 👏
如果你覺得文章有幫你更理解一些事情，請長按給我 10 個以上的拍手 😍