一年一度的 Figma Config 大會(huì)又來(lái)了，這次 Figma 又給我們帶來(lái)了一些重磅更新，最令人激動(dòng)的是使 Figma 中的設(shè)計(jì)和開發(fā)更加緊密地結(jié)合在一起。本文為普及型文章，幫助大家快速了解 Figma Config 2023 更新的新功能。具體功能詳解可期待明天的文章。

更多Figma 技巧：

一、Design system 設(shè)計(jì)系統(tǒng)

Design token

推薦指數(shù)：☆☆☆☆☆

在此前的一兩年中，社區(qū)中有很大一批聲音希望 Figma 支持原生的 Design token 能力，這次它終于來(lái)了！在 Config 大會(huì)中 Dylan Field 稱之為 Variables，能夠?qū)崿F(xiàn)期待已久的 Token 嵌套 Token 的能力，不再需要借助第三方插件，體驗(yàn)感拉滿。

Variables 變量類型

推薦指數(shù)：☆☆☆☆☆

有四種類型的變量。每一種都可以應(yīng)用于特定的屬性和元素。之前只有 顏色、字體、投影、柵格才能設(shè)為樣式發(fā)布到設(shè)計(jì)組件庫(kù)，現(xiàn)在寬度、間距、Padding、圓角、描邊等都可以通過(guò) Variables 配置樣式發(fā)布到設(shè)計(jì)組件庫(kù)。

Variable modes 變體模式

推薦指數(shù)：☆☆☆☆☆

按模式（如明暗）定義和組織變量的不同值，并將其應(yīng)用于您的設(shè)計(jì)以在主題之間切換。

以下是可以使用模式切換的幾種實(shí)用場(chǎng)景：

1. 不同的顏色主題，如淺色和深色模式
2. 不同的語(yǔ)言以查看設(shè)計(jì)中稿的適配效果
3. 不同設(shè)備尺寸下設(shè)計(jì)稿的展示效果

Component statistics 設(shè)計(jì)組件使用分析

推薦指數(shù)：☆☆☆

通過(guò)設(shè)計(jì)系統(tǒng)分析檢查團(tuán)隊(duì)組件和變體的頻率和使用情況。使用數(shù)據(jù)來(lái)標(biāo)記需要幫助以提高效率和改善的設(shè)計(jì)資產(chǎn)。根據(jù)官方介紹，這個(gè)功能目前只有企業(yè)版才能使用。

二、Dev Mode 開發(fā)者模式

開發(fā)模式目前處于公開測(cè)試階段，在 Config 大會(huì)中提到 2023 年之前對(duì)所有用戶免費(fèi)，2024 年開始將會(huì)是付費(fèi)版本才有的功能。

更快獲取開始 Code 所需的信息

推薦指數(shù)：☆☆☆☆

開發(fā)者模式就像設(shè)計(jì)文件的瀏覽器檢查器，只需懸停并單擊對(duì)象即可獲取尺寸、規(guī)格和樣式等詳細(xì)信息，所有這些都在不會(huì)影響設(shè)計(jì)文件的安全。

保持工作流協(xié)調(diào)一致

推薦指數(shù)：☆☆☆☆

開發(fā)者模式下也可以運(yùn)行插件了，當(dāng)所有內(nèi)容整合到 Figma 中時(shí)，可以簡(jiǎn)化工作流程，可以不需要在在設(shè)計(jì)庫(kù)、代碼庫(kù)和項(xiàng)目管理工具之間反復(fù)跳轉(zhuǎn)。

Figma for VS Code 插件

推薦指數(shù)：☆☆☆☆☆

在 VS Code 中可以安裝 Figma 插件，直接在 VS Code 中預(yù)覽設(shè)計(jì)稿、查看標(biāo)注，并且可以直接將 Figma 自動(dòng)生成的代碼參數(shù)直接調(diào)用到代碼編輯器當(dāng)中，開發(fā)者可以不需要反復(fù)在代碼編輯器和 Figma 中跳轉(zhuǎn)就能完成開發(fā)工作。

Storybook and Figma

推薦指數(shù)：☆☆☆☆

在 Storybook 中可以直接對(duì)比預(yù)覽 Figma 文件

Section 可以狀態(tài)標(biāo)記

推薦指數(shù)：☆☆☆☆

Scetion 可以標(biāo)記 Ready for dev 狀態(tài)，提醒開發(fā)者這部分內(nèi)容已準(zhǔn)備就緒可以開發(fā)

查看設(shè)計(jì)稿的歷史版本更新

推薦指數(shù)：☆☆☆☆

通過(guò)將設(shè)計(jì)稿與之前的版本進(jìn)行比較，以準(zhǔn)確了解發(fā)生了什么變化，從而減少與設(shè)計(jì)師之間的反復(fù)討論。

三、Auto Layout 自動(dòng)布局更新

支持配置最大、最小寬度

推薦指數(shù)：☆☆☆☆☆

在此之前，自動(dòng)布局只能配置 固定尺寸、適應(yīng)內(nèi)容和填充容器，現(xiàn)在可以給容器設(shè)置最大、最小寬度，以更加貼切地滿足設(shè)計(jì)需求。

支持 Wrap 流式布局

推薦指數(shù)：☆☆☆☆☆

當(dāng)容器寬度不夠時(shí)，可以自動(dòng)將后面的元素往下排列。

四、Prototype 高級(jí)原型設(shè)計(jì)

**解鎖數(shù)學(xué)表達(dá)式，**讓原型感覺(jué)真實(shí)

推薦指數(shù)：☆☆☆☆

使用加、減、乘、除等條件邏輯、數(shù)學(xué)表達(dá)式和高級(jí)原型設(shè)計(jì)功能生成動(dòng)態(tài)字符串或數(shù)值，快速構(gòu)建更加逼真的原型。

使用內(nèi)聯(lián)預(yù)覽快速進(jìn)行更改

在編輯完設(shè)計(jì)稿之后，可以直接在畫布上播放和預(yù)覽原型，以實(shí)現(xiàn)快速反饋循環(huán)和快速迭代。

推薦指數(shù)：☆☆☆☆

參考鏈接

1. https://www.figma.com/release-notes/
2. https://www.figma.com/whats-new/