用一篇文章，從零開始幫你用好 Figma 的元件庫功能

對於設計系統，我們最熟悉和常用的應該就是設計元件了，即 UI kits，包括輸入框、按鈕、文字、連結、下拉選單等等。作為構成一個介面的最小元素，UI kits 可以理解成這些最小元素的常用集合體的稱呼。下一步，我將使用 figma 這個軟體，教大家如何使用 Component 的功能。

figma 軟體的四大優勢

在 Sketch 的時代，團隊設計師的協作方式是通過一個本地的 Sketch 規範檔案，以複製貼上的方式來複用一些元素和控制元件，但是隨著專案的不斷髮展，設計師之間的協作也越來越多，使用 Sketch 軟體管理元件庫的協同不及時的問題就暴露了出來了。

1. Sketch 協同困難

Sketch 軟體管理元件庫的方式很難及時地通知協同的同事，需要口頭通知或者在工作群中告知大家更新了新元件庫檔案，很多手頭上多條業務線並行的設計師常常會忽略更新元件庫的通知，造成元件庫不同步，更有甚者需要在長長的聊天記錄中尋找更新的資訊，費時又費力。

2. Sketch 通知不及時

也許有人會說，Sketch 有個自動進行提醒功能，一旦有更新，就會在右上角顯示一條提示資訊，設計師只需要點選提醒，下載最新元件檔案即可完成更新。但是這個功能在強大的 figma 軟體面前還是顯得微不足道。

3. figma 是多人協作利器

正是因為 Sketch 的短板，設計師迫切需要一款雲協作軟體來降低通訊和協作成本。多人協作算是 figma 的特色功能，可以在自己的操作介面實時看到別的角色是在做什麼操作。

4. figma 的社群（練習場功能）

在 figma 的社群，世界各地的設計師分享他們自己的設計原始檔，可以看到很多設計效果是如何實現的。

figma 每一次功能更新在社群裡面都會有 play groud，相當於將每一次更新的功能變成一個個小案例，經過自己的實際操作後，更新的功能其實也就學會了，可以應用到自己的實際工作之中，非常實用。

5. 四大優勢總結

figma 作為一款劃時代的產品，我總結四點優勢：

• 它以多人協作為核心功能，主打線上多人協作；
• 無論你是 Mac 還是 windows 系統都可以使用；
• 不管是介面設計還是原型製作都可以做到；
• 還有強大的社群資源可以借鑑。

元件庫的原子理論

1. 元件理論的起源

一談到設計元件庫，就不得不說“原子設計理論”，這套理論是在 2013 年，由前端開發工程師 Brad Forst 在《Atomic Design》一書中提及的概念，在化學世界中，所有的物質都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成宇宙萬物。

2. 五個層面各指什麼元素

原子設計理論的出現就是為了幫助我們去搭建設計系統，Brad Forst 從化學學科類吸取知識，認為設計元件應該由 5 個層面內容構成：原子、分子、組織、模版和頁面，通過這 5 個層面構建一張產品介面。

• 原子：指的是最小的單位，比如顏色、字號、圖示等。
• 分子：指由兩個或多個原子組裝而成具有功能性的元件，比如搜尋框、tab 欄等。
• 組織：指分子和原子組成的更大組裝體，比如詳情模組、內容資訊區域等。
• 模版：指區域模版構成的頁面模版，比如產品的詳情頁、列表頁、異常頁等。
• 頁面：指模板在設計師和工程師的協作下，變成實際的頁面。

元件的基礎知識

在 Sketch 中元件的功能是“Symbol”，在 figam 中則是“Componer”，其功能是一樣的只是兩款軟體的叫法不同。以下是我整理“Componer”四點基礎知識。

1. 建立元件的方法

在 figma 中建立元件有兩種方法；

第一種：滑鼠選中將要元件化的元素，這時頂部工具欄由一個功能鍵變成了兩個功能鍵，點選“Greate Componer”的功能鍵，元素由灰色邊框變成紫色邊框，即建立成功。

第二種：滑鼠選中將要元件化的元素，按快捷鍵

“command+option+k”，即建立成功。*我比較推薦使用第二種方法，畢竟快捷鍵可以提高我們做圖的效率。

2. 元件的父級和子級

元件有兩個級別，我們可以根據圖示的樣式進行區分，四個實心菱形樣式的圖示就是父級、一個空心菱形樣式的圖示就是子級。

將父級元件變成子級的元件有兩種方法：

• 第一種：按住已經元件化的元素，按住“option”滑鼠不放，將父級元素拖動到空白處，就會出現子級元素。
• 第二種：或者是按快捷“command+d”也會在旁邊出現一個子級元件。

3. 編輯元件

正是因為父級的元件是可以覆蓋子級元件的樣式，當我們去更改父級裡面一個元素，比如是顏色，那子級裡面的元素就會跟著改變。

但是子級元件的更改樣式，父級的元件將不會受到影響，比如我更改子級元件的圓角度由 0 改成 100，你可以看到父級元件樣式沒有受到影響。

除了這個關係，子元件也是可以清除樣式的迴歸到父級元件最原始的樣式，比如選中子級元件為他更改顏色和圓角度數，點選“resrt overrrides”即可去除所有元件樣式。

當然，新的樣式也是可以同步到之前老樣式的元件，只需要選中新樣式的元件，點選“push overrides to main component”，之前所有的元件將採用新的樣式

取消元件狀態的快捷鍵也是有的，只要按住“command+option+b”就可以了。

假設你的老闆對彈窗介面的按鈕樣式不滿意，要求由直角改成圓角，這個時候只需要更改父級別元件的圓角，頁面中所有子級元件將統一都改成圓角，大大地提高了工作效率。

4. 追蹤元件

追蹤父級元件這個功能不怎麼常用，但是還有必要宣告一下，選中子級元件，點選右側“go to main Componer”即可。

管理建立的元件

元件的基礎功能都講清楚了，接下來對元件管理的知識點進行講解，我個人理解這一部分也是很重要了，因為我以下講解的四個部分內容是環環相扣的，只有做好前一步下一步才可以順利進行。

1. 元件的命名

首先就是大家容易忽略的問題，很多人對元件的命名沒有規律，以至於在第二步呼叫元件的時候困難重重。

我建議使用「/」來為元件命名，用於給元件進行分類，這樣可以幫助 figma 判斷元件內元素的層級，如圖：

命名好了之後，可以點選“assts”輸入你命名的元件名稱就可以找到元件了。比如我搜索“icon”，就可以找到所有命名為icon 的元件了。

這裡有一個技巧，如果你在建立元件的時候，在“component”這裡對這個元件進行了簡短的文字描述說明，點選“assts”搜尋的時候元件的旁邊就會出現氣泡彈窗，彈窗的內容可以讓你清楚地知道元件是幹什麼用的，針對於元件數量特別多的系統，很好用。

2. 元件的巢狀

當我們把元素都製作成元件後，就可以進行元件的嵌套了也就是“巢狀元件”，也就是說一個元件可以包含另外一個元件。比如下面這個按鈕是 icon 和文字構成的（紫色是父級、藍色是子級），在父級中我們可以隨意地更改 icon 的數量，來改變子級的樣式。

3. 元件的替換

正是因為有前兩步規範的元件命名和元件巢狀，我們在搭建頁面時候可以輕鬆自如地根據元件的命名，隨意地替換元件的樣式。

或者是在一個按鈕元件的基礎上，根據 icon 的命名替換成符合需求功能的不同按鈕。

比如下面這個場景中的 tab 欄，將按鈕將由兩個替換成一個，或者是更改主題顏色等等業務需求都可以通過元件替換功能去實現。