variable（變數）：
如果跟軟體工程師講到 variable ，應該是「無人不知，無人不曉」吧？ variable 在工程開發上已經是「基本標配」，但是應用在 UI 設計上還算新穎，感謝 figma 引進 variable 概念，讓設計師與工程師之間的溝通更進了一步。

• 什麼是 variable（變數） ？
  它是由型態(type)、名稱(name) 、 值(value)組合而成，變數的型態有很多種類，目前 figma 支援四種變數型態：Color、Number、String、Boolean。我們可以針對這四種型態設定需要的變數（variable）以供設計 UI 時使用。
• 如何設定？以顏色為例：

1. 在沒有選取任何物件、section、frame 的情況下，右側面版會看到 Local variables，點選右邊的小 icon，會彈出設定視窗。（ps.也可以按 Esc 鍵跳離所有選取，就會看到右側面版的 Local variables）
2. 點擊 Variable collection 右邊的「…」，彈出設定視窗，點選 Create collection，創建一個集合（例：color)，將變數以collection分門別類歸納，以方便管理。
   
3. 點擊下方的「＋ Create variable」，點選 Color ，就會產出一組 color variable。
   
4. 對這組 color variable 進行修改（Name、Value）完成第一組 variable。
   
5. 點擊下方的「＋ Create variable」繼續增加 variable，我們加五組 color variable。
   　（也可以按 shift + enter 快捷鍵，就可以複製出一組 variable 進行修改。）
   

• 如何應用？以顏色為例：

1. 設計出一個按鈕物件，點選該物件，在右側面版找到「fill」下方的顏色。
2. 點擊該顏色，會彈出色彩面版，點選 「Libraries」頁籤，就會看到剛剛設定的 5 個 color variable。
3. 點選 「gray-200」，面版中「fill」下方的顏色色碼則變成 variable 的名稱，即完成 variable 套用。
   
4. Scoping ：當 variable 越來越多的時候，針對不同的功能可以使用的 variable 會有所不同，例如：gray-100～gray-300 是專門給填色用的（Fill）， gray-400～gray-500 是專門給外框用的（Stroke），我們可以給它們設定一個使用範圍，這樣就會在不同功能中僅顯示該功能可用的 variable ，不會一拖拉庫的全部顯示。
   a. 先選取要設定 Scoping 的 variable（gray-100～gray-300），可用 shift 加選。
   b. 進入 Scoping 頁籤，取消所有勾選，僅勾選「Fill」。
   c. 再選取第二組要設定 Scoping 的 variable（gray-400～gray-500），可用shift加選。
   d. 進入 Scoping 頁籤，取消所有勾選，僅勾選「Stroke」。
   

這樣我們就可以根據不同功能選擇套用該功能專用的 vailable，是不是很好用呢？

• 四種變數型態：Color、Number、String、Boolean：
  除了以上介紹的 Color variable 之外，就像先前講的，figma 支援四種變數型態，至於其餘的三種型態的作法大同小異，例如：可以用 Number 來定義各種間距（padding-md、padding-lg），用 String 設定預設文字或語系切換（input-placeholder、error-text、Ch、En）用 Boolean 來定義元件是否顯示等等，捧油們可以試著做做看喔！
• variable 與 style 之區別
  如果還記得之前的 Shared style （第十篇） 並且做了一些設定，當你在套用 variable 的時候，面版下方會看到 variable 及 style 可供選擇（如圖 1）。而且當你要新增設定的時候，figma 也會讓你選擇是要設定成 variable 或是 style ？（如圖 2）。
  

這時你一定會有疑問：兩者有何不同？他們的應用情境是？我們用一個圖表來說明：

如果你做的是小型專案，UI 相對不複雜，也沒有設計系統，那建議只要做 Shared style 即可（殺雞焉用牛刀）；如果是大型專案，為了設計一致性，我們會用設計系統來規範，這時就建議（強烈建議）用 variable 來設定，且 variable 配合 Design Token，更能發揮其強大的作用，我們視目以待。