Figma 的核心概念：Frame

語言: CN / TW / HK
時間 2022-05-26 14:00:00
主題:

我們前面已經多次説過， Figma 和傳統設計工具最大的不同之處就是 Frame 了，但 Frame 是一個很好用但卻不那麼容易理解的概念。

因此在這次 Figma 報吿裏，我們首先需要了解的就是「到底什麼是 Frame」。

從 div 説起

在傳統設計工具中，我們畫一個按鈕時，需要先畫一個背景圖層，再添加一個文字圖層疊在上方，然後把它們打包成一個組。

但是，前端工程師實現一個按鈕的時候並不是這樣構成的。他們直接使用一個 div 容器來包裹這段文字，然後再給 div 容器添加圓角、背景色樣式。 也就是説，這個 div 即是容器也包含了一個背景。

Figma 的 Frame 功能和這個 div 有異曲同工之處。如下圖，上面這個按鈕就是用 Frame 畫的，從圖層界面看起來它擁有更加精簡的圖層數量，但實際上並沒有那麼簡單。

除了上面所説的區別，Frame 和 Group 還有三點差別：

Group Frame
大小由其子元素決定 大小由自己決定
縮放 Group 時子元素都會跟隨伸縮 縮放 Frame 時其子元素表現由自身的限制方式決定
子元素不可能超出它的範圍，所以不可裁切 可以裁切子元素內容，所以 Frame 可以代替蒙版

總的來説，Frame 要比 Group 強大很多，Figma 的其他核心功能不少也都和 Frame 有關，比如説還可以給 Frame 添加布局柵格、自動佈局、原型選項，Frame 的子元素還可以添加約束規則，而且組件也是一種特殊的 Frame。我們從它們右側的屬性面板也能看出來，Frame 是更復雜的。

Frame 如何體現 Figma 的設計理念

模塊化設計

Frame 借鑑於開發實現中的 div，除了可以精簡圖層數量， 更重要的是它把開發實現中的模塊化思想引進了 Figma 。當開發拿到一個設計稿時，腦海中會立刻浮現這個頁面是由哪些模塊構成的，最後的代碼也是由一個個模塊嵌套而成的。如下圖，整個頁面大致可以分為 Header、Content 和 Footer 三個模塊，每個模塊又可以分為更小的模塊，比如 Header 又可以分為 StatusBar （狀態欄）和 PageHeader （頁面頂欄）。如此一來，整個代碼結構清晰分明，更好維護了。

設計也應如此，我們可以藉助 Frame 的多層嵌套特性，來拆分頁面中的模塊。如下圖，通過多級 Frame 嵌套保持圖層的結構和視覺上的模塊基本一致（組件和自動佈局元素也是 Frame，只不過是特殊的 Frame）。

在開始設計前，應該先在腦海中構思這個頁面由哪些模塊組成；在畫圖時，要習慣性地使用 Frame 拆分模塊，保持圖層的結構清晰。 這樣做不僅可以讓我們的設計稿更容易維護，也會潛移默化地影響我們的設計思路，讓我們在思考設計時更加有條理有邏輯。

響應式設計

在實際業務中響應式佈局很常見，在 Figma 中我們可以藉助佈局柵格（Layout grid）和約束（Constraints）來實現響應式設計。

佈局和柵格是兩個很經典的設計方式，在很早之前的 Bootstrap 中就有 12 列柵格佈局，幫助我們快速排布元素。而 Ant design 的柵格則更加精細，最多可以分為 24 列。

在 Figma 中，我們可以給 Frame 添加柵格佈局，但它的作用更像是自己用的參考線，不一定能夠和開發那邊的柵格佈局對齊。Figma 的柵格佈局分為三種：

  • 網格 ：生成網格參考線，一般在畫圖標時會使用 1×1px 的網格方便像素對齊，或者添加 4×4px 的網格方便快速對齊，遵循上篇所述的 8px 基準網格。
  • 行 ：生成行佈局參考，支持自定義行數、間距、邊距。
  • 列 ：列很常見，我們經常用來做一些橫向的均分參考，支持自定義列數、間距和邊距。

Web 沒有固定尺寸，移動端設備的屏幕尺寸也越來越多樣，如果一稿能夠適配多屏，可以替我們節省很多時間。響應式約束（Constraints）就可以幫我們做到一稿適配多屏。如下圖，當我們拉伸時，狀態欄左邊和右邊的圖標一直保持在兩側，輸入框一直跟隨父級被拉伸，這些都是通過給內部元素添加響應式約束來實現的。

不同於柵格佈局，響應式約束是給 Frame 的子元素添加的屬性，它決定了該元素在父級 Frame 尺寸改變時的行為。如下圖，我們給這個時間文本設置的是水平方向上居左，垂直方向上居中，所以在我們拖拽外部 Frame 的時候，它會一直保持在左邊，同樣地右邊的網絡電池圖標一直保持在右邊。

如果我們在設計時給所有元素都添加相應的響應式規則，在屏幕尺寸差異不大時，只需要完成一個尺寸的設計，最後將其複製一份，改為其他尺寸，所有的設計都會自動適配，這就實現了一稿多配。從上面的描述中你應該注意到了，佈局柵格是添加在 Frame 上面的，而約束是添加在 Frame 裏面的元素（子元素）身上的。響應式約束還可以和佈局柵格結合使用，做出更加複雜的佈局規則，在後面動態響應式佈局裏面會詳細講解。

組件式設計

組件是一種特殊的 Frame，如果你把一個 Group 轉為組件，它會自動變為一個 Frame。你不能把它變回 Group，除非把組件解除。

原型動效

在 HTML 中容器可以設置內部滾動，Frame 也是一個容器，所以它也可以設置內部滾動。比如下圖中推薦模塊，我們設置容器可以橫向滾動，這樣在原型模式下就可以橫向滾動裏面的內容了。

在滾動時有些元素需要固定位置，比如 App 的底欄，我們可以勾選該元素的 Fix position when scrolling （滾動時固定位置），這樣在原型模式下滾動內容時它的位置不會變。

蒙版

蒙版或者遮罩（Mask），是設計軟件中很常見的一種功能，一般用來將圖形裁切為某種形狀。Figma 中也有蒙版，但是我不推薦使用，因為大部分情況下我們使用 Frame 的 Clip content（裁切內容）可以更自由地實現裁切。

蒙版圖層結構複雜，會讓你的設計結構變得不清晰，所以推薦使用 Frame 的內容裁切，可以大大減少蒙版的使用。

Frame 的基本操作技巧

對於很多初次接觸 Frame 的朋友來説，Frame 像是一個不受控制的淘氣鬼，總是有自己的想法，導致最後放棄使用 Frame，所以我在這裏給大家介紹一些關於 Frame 的操作魔法，幫你更好地控制它。

創建 Frame

在前面我們介紹了可以使用快捷鍵 Cmd+Option+G/Ctrl+Alt+G 快速創建 Frame，其實這只是其中之一。我們還可以點擊頂部工具欄的「井」字形圖標來創建，或者按下快捷鍵 F 來創建。按下後在畫布中拖拽框選出一個區域，這個區域內的元素就會被自動包含進這個 Frame。

在按下 F 之後，你的光標會變成「十」字形，此時就可以在畫布中拖拽出一個 Frame，右邊會同時出現預置 Frame 尺寸選擇，你可以直接點擊選擇一個常用的設備尺寸來快速創建。

直接在畫布中創建的 Frame 就是畫板，它的名字會直接顯示在畫布中，雙擊可以修改。非一級元素的名字不會直接顯示在畫布中，所以如果你發現某個元素的名字直接顯示出來了，説明它是最外層 Frame，需要在左邊圖層列表裏面把它移到某個畫板內部。

除此之外，我們還可以使用自動佈局 Shift+A 和組件 Cmd+Option+K 的快捷鍵來快速創建 Frame，只不過它們是一種特殊的 Frame。

縮放

如果我們拖拽右下角縮放一整個 Group，裏面的元素會跟着縮放，但是 Frame 卻不同，縮放整個 Frame 它裏面的元素的變化取決於上文所説的響應式約束，在縮放時可能會出現意想不到的情況。如果你想在縮放 Frame 時讓它的子元素忽略這些響應式約束規則，可以在縮放的同時按下 Cmd/Ctrl 鍵不放。

自適應內容大小

由於 Frame 的尺寸大小不是由內部元素決定的，所以當你調整內部元素的位置大小之後，Frame 並不會自動適應它，此時我們可以點擊右邊的自適應內容圖標，讓 Frame 的尺寸自動適應內部元素的尺寸。

吸附

Frame 有自動吸附，在我們拖拽一個元素經過 Frame（普通 Frame、自動佈局 Frame 或者 Main 組件）時，它會被自動吸附進去，變為這個 Frame 的子圖層。會不會被吸附一般是取決於被拖拽元素的大小，如果它比目標 Frame 大就不會被吸附，如果比 Frame 小就會被吸附。

如果我們想要相反的效果，可以在拖拽後按下 空格鍵 或 Cmd/Ctrl 。按下 空格鍵 再拖拽，就不會被吸附；相反地，按下 Cmd/Ctrl 再拖拽，就會被強制吸附。需要注意的是，一定要先按下再拖拽，時機很重要。

同樣地，當我們移動某個 Frame 的子元素時，很容易在移出邊界時丟失父子關係，此時也可以按下 空格鍵 ，來保證這個子元素和 Frame 的層級關係不變。

快速選擇

如果我們的設計稿擁有多層 Frame 嵌套，默認點擊元素時會先選中外層，雙擊才會逐步進入下一層，如果想直接選中最內層的元素，我們可以按下 Cmd/Ctrl 再去點擊。

因為使用 Frame 之後，我們的圖層結構會出現很深的層級，需要在這些層級之間切換會有點麻煩，比如我們想快速選擇一個元素的父圖層，或者想選中一個 Frame 的所有子圖層。這裏就不得不推薦兩個快捷鍵： Enter 和 Shift+Enter 。按 Enter 可以快速進入下一層，按 Shift+Enter 可以快速選中上一層。這在我們需要快速改變某個 Frame 的所有子元素屬性時很有用，直接 Shift+Enter 選中所有元素，而不需要從左邊一個個選擇。這一對快捷鍵再是我們實際設計過程中經常使用提升的效率不是一點半點，所以建議大家多多使用以習慣它。

Frame 和 Group 該用哪個？

從上文中我們瞭解了 Frame 的優勢，那麼是不是在設計時應該全部都使用 Frame 而拋棄 Group 呢？

是，但不完全是，沒有必要可以不使用 Group。Frame 的尺寸不受內部元素影響，擁有自己的屬性，而 Group 的尺寸由內部元素決定（撐開），給它添加的屬性（顏色、描邊等）會被子元素繼承，在前期探索時使用 Group 會更快一點，而且在畫一些結構邏輯不是那麼強的東西（比如插畫）時 Group 也比較方便。

Group 的快捷鍵是 Cmd/Ctrl+G ，Frame 的快捷鍵是 Cmd+Option+G/Ctrl+Alt+G ，但解除它們的快捷鍵都是 Cmd/Ctrl+Shift+G 。Frame 和 Group 可以互相切換，選中後只需要點擊右邊頂部的下拉菜單切換即可。

關聯閲讀

> 下載少數派 2.0 客户端、關注 少數派公眾號，解鎖全新閲讀體驗 :newspaper: 

> 實用、好用的正版軟件，少數派為你呈現 :rocket:

「」