国产a一级毛片爽爽影院_欧美日韩亚洲中字二区在线播放_国产在线每日都有更新_日韩中文字幕tv在线看_日韩美女婬乱大片A级网站_韩国无遮免费羞羞漫画_久久亚洲精品无码播放偷妻_国产成人777爽视频_色噜噜狠狠成人中文综合18_国产精品免费高清在线观看

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

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

今天我們就來(lái)聊聊這個(gè)話題。

一、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)的組件特征，都可以通過(guò)【Number】來(lái)進(jìn)行添加。在設(shè)置Variables 時(shí)，則可以通過(guò)選擇使用場(chǎng)景，來(lái)進(jìn)行數(shù)字上的用法區(qū)分。

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

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

我們從以下 5 個(gè)方面來(lái)使用 Variables：

1. 圓角選項(xiàng)

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

2. 間距選項(xiàng)

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

3. 色板選擇

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

4. 布局方式

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

5. 模式選擇

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

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

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

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

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

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

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

這樣做的好處是：

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