Figma發(fā)布了許多新功能，本篇文章將以Figma中的核心功能——Variables為例，分析Variables的操作和使用，希望能對產(chǎn)品設(shè)計的你有所幫助。

Figma 在 Config 2023 的大會上發(fā)布了很多新功能。在做組件和搭建設(shè)計系統(tǒng)方面， Figma 更新的最核心功能當(dāng)屬 Variables 了。

今天我們就來聊聊這個話題。

一、Variables 是什么？

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

使用 Figma 新增和設(shè)置Variables 的方法如下：

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

② 添加圓角、間距這類與數(shù)字相關(guān)的組件特征，都可以通過【Number】來進(jìn)行添加。在設(shè)置Variables 時，則可以通過選擇使用場景，來進(jìn)行數(shù)字上的用法區(qū)分。

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

③ 添加所有的 Variables 后需要進(jìn)行 Libraries 的發(fā)布更新。之后在其他的設(shè)計文件中打開Libraries的開關(guān)，就可以使用 Variables 了。

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

1. 圓角選項

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

2. 間距選項

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

3. 色板選擇

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

4. 布局方式

對于一些可能會因為頁面寬度變化而產(chǎn)生布局問題的組件（通常是復(fù)合組件或者整體寬度比較寬的組件），也可以通過新增的布局功能進(jìn)行調(diào)整，使用使用“自動折行”功能后，組件可以跟隨頁面的寬度自行換行，不會出現(xiàn)內(nèi)容缺失。

5. 模式選擇

如果你有其他的場景模式（Mode）需求（比如淺色模式和深色模式等），可以增加一列或幾列的 Variables。

當(dāng)你在設(shè)計稿中的所有元素都以綁定了 Variables，那么在 Layer 操作面板的旁邊就會看到六變形按鈕，點擊選擇后可以直接進(jìn)行不同設(shè)計風(fēng)格和 Mode 的切換。

Mode切換可以一鍵直接改變整個頁面的效果，但僅對頁面上已經(jīng)綁定了 Variables 的元素或組件起作用：

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

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

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

我個人很支持大家對于已經(jīng)搭建好的或者正在建設(shè)中的 Figma 組件庫進(jìn)行一輪更新和升級。使用新的 Variables 功能，對所有的特征進(jìn)行整理和錄入，并將之與組件特征進(jìn)行了一一綁定。

這樣做的好處是：

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