不再當Figma新手：讓UI設計稿更加專業的必要細節

優秀的UI設計稿，其價值不僅在於華麗的外表，更體現於背後所傳達的一致性、邏輯與縝密決策。透過這篇文章，你將能跳脫一昧聚焦於軟體操作上的窠臼、快速地認識常見的新手誤區及背後與之連結的重要觀念，朝更專業的UI設計邁進。

※本文為個人經驗分享，儘管具體細節可能因不同公司或團隊的運作方式而有所差異，但整體方向與原則依然適用。

使用Frame而不是Group

在 Figma 裡，幾乎99.9%情況下你都應該用「Frame」而不是「Group」來包住元件。這是因為只有Frame才具備Auto layout——重現真實網頁、App排版關係的重要功能。

操作Figma與操作一般的繪圖軟體有些不同，當你將一群物件「包」在一起時，並非只是為了方便快速選取而已，連帶地，你也必須要思考這些物件間的排版關係。儘管這個概念並未被明確強調，但卻是UI設計師的必備素養。

舉例來說，當你在製作同時具有Icon和文字的按鈕時，你會很自然地將它們視為一個整體，對吧？這時，就需要思考它們該如何排版。具體思考步驟如下：

1. 首先，應該先定義按鈕的範圍，因此用Frame來畫出按鈕的寬度、高度
2. 接下來，是Icon與文字中間的間隔永遠需保持4pt，所以設定了Auto layout，並調整Gap
3. 最後，是Icon與文字的組合，永遠需要置於按鈕的水平、垂直置中位置，因此調整了Auto layout的Alignment

由於我們人類可以看見UI，所以前述邏輯常被下意識地省略；但對於沒有眼睛的電腦來說，就需要細心地一個個將規則列清楚，它才知道該怎麼做。由此類推，比這更複雜、精細的UI，就需要用更多的Frame+Auto layout來堆砌！例如：複數個按鈕的排列、複數個卡片的列表……全部都是！

如果你對於Auto layout不太熟悉，可以看以下來自Figma官方的教學影片：

詳細的Auto layout容器與子元素可設定的屬性如下：

設有Auto layout的Frame

Auto layout內元素

※寬度與高度的判斷皆為由外至內進行。Figma會先處理Auto layout本身的寬高，然後再處理內部元素的寬高。

※寬度設定為填滿容器的元素，會填滿扣除其餘元素寬度及間距後的所有寬度（但不會小於設定的min-width或超過max-width）。高度同理。

將Icon給「框」起來

Icon本身是由相對複雜的向量圖案組成，先天形狀、大小就不規則，如果我們直接將未經處理的Icon用於設計中，就會對間距計算、排版造成混亂。

正確的做法是，將Icon放置於一個正方形的Frame內後再使用它。如此一來，無論Icon圖案再不規律，排版時也只需要考慮外側的正方形框就好。

這樣的做法不僅是為了方便，也是為了替平衡視覺重心做準備。舉個最簡單的例子，儘管上圖所有形狀的大小都是相同的，但奇妙的是，正方形看起來就是比圓形還大一些、還重一些。遇到這種情況，「視覺上的一致」就比「絕對的精確」還要重要，因此要予以修正。

Material Design的Icon頁面中，即定義了Icon的外框尺寸、邊距，以及用於對應上述問題的參考線Keyline。這份Keyline裡，正方形的大小就設定的比圓形還小一些，如此一來，遠遠地看上去兩著的視覺份量就會相似。在繪製Icon時參考這些Keyline，就能輕鬆做出協調的Icon組合。

使用基於8pt數值的間距

有了前面的規整矩形、Frame基礎後，接下來我們就能來談「間距」了！在UI設計中，使用基於8pt的間距數值（8/16/24/32等等）可以使元素無形間彼此對齊，產生秩序與協調的美，間距的層級關係也更好管理。例如：相同層級的元素彼此間隔8pt，而不同層級的元素間彼此需間隔2倍——也就是16pt。

儘管理論上來說，你可以採用任何數值為基礎的間距數值數列，但行業中多以8pt為慣例。

使用網格

當你設計到一半，腦中突然冒出：「欸，這個元素的寬度或高度到底要設多少才對啊？」這個時候，最好的解決辦法便是使用網格系統！

網格系統的原理與剛剛介紹過的間距原理相同，都是透過數學上的規律來創造設計的協調與一致性。

網格系統的使用方法，通常是將框劃分12欄，然後依此決定框內部的元素寬度。而特意劃分為12欄的原因，是因為它可以提供1*12、6*2、3*4、4*3、2*6等多樣排版組合。你可以自由決定一個元素，要佔據多少欄位的空間。同時，你也不必拘泥於一定要把所有欄位填滿。選擇讓元素佔據7個欄位的空間，剩下5個欄位留白的做法也是可行的。

另外要補充的是，網格雖然提供了規律的排版依據，但如果過度依賴它，整體畫面就可能變得過於工整、缺乏活力。所以有時候，適當地打破規則，像是讓某個元素直接滿版，也是必要的。

使用常見的寬高比例

UI元素的寬度與高度，可不是設計師想怎麼樣就怎麼樣。使用特定的寬度、高度，除了滿足前面提到的間距、網格等排版上的考量外，也會直接影響使用者的操作體驗。

舉例來說，如果你正在設計一個像Youtube的影音平台，把影片預覽圖的比例設為16:9，會是比較明智的選擇。這是因為大部分的影片本來就是這個比例。使用這個常見比例，不但能確保使用者看到完整的影片畫面，也能讓創作者不用額外製作特別尺寸的預覽圖。這就是「設計」與「實際使用情境」之間的重要連結。

活用Components

在設計UI時，你會發現有許多元素是反覆出現、使用的，例如頁面頂部的導覽列、按鈕、卡片、選項、列表……等等。以「按鈕」為例，如果有一天，你想要修改按鈕的顏色，但這些按鈕已經散佈於上百個畫面中了，該怎麼辦？難道就只能一個個手動修改設計稿中的所有按鈕嗎？

要避免遇上這樣的麻煩，最好的方法便是從一開始就善用Figma的元件（Component）功能。

將按鈕等高頻率使用的元素建立為元件以後，你就可以在設計時從元件複製出它們的「分身（實例Instance）」。這些分身的外觀、內容預設都和本體完全相同，但你也可以依需要再加以編輯，像是改動按鈕的文字。當本體的樣式發生變動時，變更會自動套用在所有分身上；而分身上的變動，則不會影響本體。如此一來，就能更加輕鬆地維持設計的一致性、提升效率。

除此之外，元件還能進一步設定變體（Variant）和屬性（Property），方便你為同個元件製作多種變化。舉例來說，你可以為「Button」元件製作大、中、小三種變體，以應對不同使用情境。與此同時，Figma會自動建立一個屬性（預設名稱為Property 1），來區分這些變體的差異。由於這三種變體的主要差別在於大小，所以將屬性名稱改為「Size」會更加適合。

使用具邏輯、一致的圖層命名規則

預設情況下，Figma 的圖層命名格式通常是「圖層類型 + 數字」，例如 「Rectangle 1」「Text 3」。不難想像，當圖層一多的時候，這種命名方式會讓你很難快速找到需要的內容。因此，為圖層取一個有意義的名稱（如 ProfileCard、Header 等）不僅可以幫助自己理清設計架構，也能讓團隊成員更容易理解與溝通。

此外，有些團隊可能會借鑑程式碼的命名習慣，使用統一的格式來命名圖層，如：

而在表達Frame層級關係上，以下是較為常見的做法，但具體的命名方式仍因團隊而異。

值得注意的是，輸出以斜線區隔做命名的Frame時，Figma會建立多層資料夾（假設輸出Home/Product/ProductDetail這個Frame，Figma會建立Home→Product雙層資料夾，然後最裡頭才會是名為ProductDetail的檔案）。

建立具有架構的variables

Variables是管理設計稿中的色彩、數值的最好方式。但正因為varaibles系統相當地複雜，所以許多初學者並未能正確地建立variables架構、從中獲益。

一般來說，variables依照層級可區分為：

接著，你會需要使用Collections來管理這些Variables。最基本的情況下，你至少需要各一個Collection來分別管理基礎型、索引型variable。推薦你將管理基礎型variable的collection命名為「Primitive」；而管理索引型的則命名為「Semantic」。有了這個架構後，你就能盡情地在設計中使用variables啦！

如果你想知道更多關於Variables是什麼、如何使用，可以參考Google Material Design的文章（文中將Variables稱作Tokens）。

妥善命名Variables

正如圖層、Frame需要清晰且表意的命名，Variables也同樣需要。Variables的常見命名規則與前段介紹的完全相同，且使用「/」符號分隔時，Figma也會自動建立類似資料夾的架構。

除此之外，考慮目標平台的慣用命名規則來命名也是可行的做法之一。例如在決定網頁外表的CSS程式碼中，就規定要使用中線命名法；而App端則多採用駝峰命名法。

/*定義CSS變數*/
--red-50: #fef2f2;
--red-100: #fee2e2;
--red-200: #fecaca;

準備樣式文件，隨時評估特定樣式的存在必要性

俗話說：「少即是多」。設計的精妙之處，在於運用最少的規則、規劃，適應最多的情況。Figma中的Styles、Variables，也同樣適用這個規則。隨著設計的不斷迭代，不斷評估、淘汰、合併樣式，才能使設計極致地精鍊。

因此，推薦你將所有用到的樣式及其對應的數值列出、整理成一份文件，如此便能視覺化地評估樣式是否有存在的必要。

關於製作樣式文件的細節，具體可參考我寫的這篇文章：

製作Figma樣式文件的必要訣竅

樣式文件(Style guides)是用來規範設計系統各個元素的文件，無論是正式或非正式的，都會涵蓋顏色、字體、效果等細節。制定樣式文件能夠確保設計的品質與一致性，提供團隊可參照的設計標準，進而加速設 […]

hsiehchengyi.com

讓Spaciiing幫你輕鬆邁向專業

本文所提及的眾多要訣中，其實絕大多數都只需要一點點的知識，但執行起來，卻仰賴極大的毅力與細心。運用我所開發的Figma外掛程式Spaciiing，你就能比別人用更少的時間，獲得更好的成果。

每月只需$3美元，即可無限制使用10種以上可大幅提升效率的工具，包含文中用到的 清理圖層名稱、精準設定間距、型錄、設定寬高比……等等。除此之外，還包含了每日繪製流程圖必備的「畫箭頭」功能也包含在內。一款程式就能省下單獨購買10種外掛程式的錢，毫無疑問划算。

追蹤我的IG帳號@chengyi_hsieh

我的最新動態都在這裡！

追蹤

PROMOTION

用Figma做設計從未如此輕鬆

利用Spaciiing(plugin)一鍵調整間距、畫箭頭、製作樣式文件

暸解詳情