為了讓你做好組件設計，Figma 更新了哪些功能？

Figma 在 Config 2023 的大會上發布了很多新功能。在做組件和搭建設計系統方面，Figma 更新的最核心功能當屬 Variables 了。今天我們就來聊聊這個話題。

相關總結：

一、Variables 是什么？

新功能 Variables 可以理解為“變量”。代替原有的 Styles 樣式，并充當 Design Tokens，相當于是 Design Tokens 的一種新的呈現形式。

使用 Figma 新增和設置 Variables 的方法如下：

1. 在已建好的 Libraries 文件中可以看到添加入口。在列表里可增加「Number」、「Color」、「String」和「Boolean」這 4 類 Variables：

2. 添加圓角、間距這類與數字相關的組件特征，都可以通過「Number」來進行添加。在設置 Variables 時，則可以通過選擇使用場景，來進行數字上的用法區分。

比如：在設置圓角 Conner 時，可以將這組數值的展示范圍僅選中 “Conner radius”，這樣關于圓角的設置數據就只會在設置圓角時看到，間距、邊距等數值的設置也是同理：

3. 添加所有的 Variables 后需要進行 Libraries 的發布更新。之后在其他的設計文件中打開 Libraries 的開關，就可以使用 Variables 了：

我們從以下 5 個方面 來使用 Variables：

①圓角選項

在設計文件右側編輯面板中的圓角選項處，點擊六邊形 icon，即可選擇圓角大小的 Variables，選中后，圓角的數值會帶有灰色底，示意數據已綁定 Variables：

②間距選項

間距可以在右側編輯 Auto layout 面板中點擊邊距旁的六邊形 icon、點擊下拉菜單中的 Apply variables 都可選擇間距的 Variables 大小：

③色板選擇

色彩的 Variables 和之前的功能用法沒有大的區別，只是色彩的圖標示意從圓形變成了方形。選中 Variables 后的色值會帶有灰色底，以示意已綁定成功：

④布局方式

對于一些可能會因為頁面寬度變化而產生布局問題的組件（通常是復合組件或者整體寬度比較寬的組件），也可以通過新增的布局功能進行調整，使用使用“自動折行”功能后，組件可以跟隨頁面的寬度自行換行，不會出現內容缺失：

⑤模式選擇

如果你有其他的場景模式（Mode）需求（比如淺色模式和深色模式等），可以增加一列或幾列的 Variables。當你在設計稿中的所有元素都以綁定了 Variables，那么在 Layer 操作面板的旁邊就會看到六變形按鈕，點擊選擇后可以直接進行不同設計風格和 Mode 的切換。Mode 切換可以一鍵直接改變整個頁面的效果，但僅對頁面上已經綁定了 Variables 的元素或組件起作用：

二、已建好的 Figma 組件庫是否需要跟著更新？

有很多同學之前在搭建 Figma 的組件庫時，已經使用過 Style 列表的方法來作為色彩和字體的選項工具。我之前也介紹過一些插件，可以幫助設計師來管理和應用組件樣式。

此次 Figma 添加的 Variables 功能，基本可以替代大多數第三方插件的功能，也比普通的 Style 在使用時更為順暢。

我個人很支持大家對于已經搭建好的或者正在建設中的 Figma 組件庫進行一輪更新和升級。使用新的 Variables 功能，對所有的特征進行整理和錄入，并將之與組件特征進行了一一綁定。這樣做的好處是：

1. 便于緊跟以后 Figma 功能的更新和迭代，官方的功能升級，自然在價格和質量上都會更優；
2. 如果有暗黑模式（dark mode）或者其他多語言、多主題色的頁面更改需求，可以直接切換之間的模式，也不再需要安裝插件；
3. 業務設計師在特殊的業務場景中，在現有組件的基礎上做更多的設計樣式變更，使操作更加簡單、可控和有序。

歡迎關注作者微信公眾號：「長弓小子」