To Frame or Not to Frame, That is the question | 聊聊 Figma 中 Frame, Group 的使用情境與限制

Sep 20th, 2020

image

在 Figma 裡有兩種方式可以群組多個物件，分別是 Groups 與 Frames，這篇文章會分別介紹兩者的使用情況，以及一些實作上的限制。對了，官方也提供一份詳細的文件跟檔案讓大家可以玩看看。這次文章有以下段落:

  1. Groups

  2. Frames

  3. Object Inspect 檢視距離工具的限制

Groups

Groups 是將多個物件群組的容器，其邊界大小由內容物決定。多選物件後按下 ⌘+ G 可以產生一個 Groups，再按下  ⌘+ SHIFT+ G  可以解除 Groups:

  • 第一次點擊 Group 會選擇整個 Groups 包含內部物件，Doule Click 內部物件可以選到內部物件

  • 調整內部物件會連動改變 Groups 的邊界

  • 調整 Groups 大小 (resizing)，會連動內部物件一起改變大小

實用撇步: 當你的內部物件有字體時直接調整 Group 大小是不能伸縮文字的，按下 K 會進入 Scale 模式，這時候你就能好好縮放文字了

Frames

Frame 是第二種能將多個物件群組的容器，要將 Group 切換成 Frame 有以下方便的做法，當然你也能倒過來把 Frame 切換成 Group:

  • Frame 會在 canvas 上出現名字，名字會出現在左上方

  • 調整內部物件 並不會 連動改變 Frame 的邊界

  • Clip & Resize: 顯示超出範圍的物件 / 調整 Frame 符合內容物的大小:

  • 調整 Frame 大小 (resizing)，內部物件會根據 constraints 規則改變大小、位置

Constraints: 物件在容器調整大小時所套用的變形規則，一般來說物件在 Frame 伸縮時並不會有任何 resizing，只會定在 Top & Left 的位置，可以透過調整 水平方向 Scale 、垂直方向 Scale 讓物件在 Frame 被調整時跟著調整大小

  • Layout grids: Frame 裡面還能加入參考網格線，幫助你在排版時能做更好的佈局:

Object Inspect 檢視距離工具的限制

點物件後按住 Option 滑到其他物件時，可以查看物件與物件之間的距離。通常用來檢查設計稿的間距是不是有符合規範 (譬如常用的 8px grid system) 而 Figma 對於巢狀的容器之間並沒有辦法很好的去檢視物件之間的關係，大家可以在範例上試著玩看看:


第一個範例，拿一個簡單的方形去做間距檢查，實測後是無法對 Group 容器裡面的物件做檢查的行為，而對 Frame 做檢查的話，只有裡面未被放入容器的物件可以被檢查 (Frame container 裡面灰色的物件)

第二個範例，對於容器內對彼此做檢查。跟上面範例一樣的， Group 內的物件是無法從外被檢查的，但連本來可以檢查 Frame 裡面的物件的功能，都無效了 🧐 目前是找不到官方任何有關檢查邏輯的解釋，不知道各位對於這個工具的使用心得如何？如果有什麼小技巧也歡迎寫個信跟我分享！

2020/09/21 更新，感謝 Howard Huang 的分享，只要按下 option + command 就可以跨容器檢查任何物件之間的距離了！🎉🎉🎉

小結

使用 Groups 與 Frame 並沒有正確錯誤之分，兩者允許巢狀使用、也能互相包在一起。如果你正在製作 Logo 、或是由多種形狀組成的物件 (icon)，我想 Groups 會是合適的容器。

而官方則是推薦用 Frames 的方式來建立複雜的 UI，我想是因為從 UI System 的角度來看， Resizing 時並不希望會同時改變物件兩個維度 (譬如按鈕只會希望改變寬度，但鎖定高度)，因此使用 Groups 的話就比較不適合，使用可以自由定義 Resize 規定的 Frame 會有更多彈性。

想知道更多的細節可以直接到官方 Help Center article，如果想使用文章中的範例，可以從這裡複製這份檔案。這就是今天有關 Figma 容器的 Tips，歡迎分享給身邊一樣感到困惑的朋友

Back

Designtips.today

🕶