Figma Config 2023 更新簡(jiǎn)報(bào)
一年一度的 Figma Config 大會(huì)又來了，這次 Figma 又給我們帶來了一些重磅更新，最令人激動(dòng)的是使 Figma 中的設(shè)計(jì)和開發(fā)更加緊密地結(jié)合在一起。本文為普及型文章，幫助大家快速了解 Figma Config 2023 更新的新功能。具體功能詳解可參考 Figma 社區(qū)官方操作文檔指引。
一、Design system 設(shè)計(jì)系統(tǒng)Design token
推薦指數(shù)：??????????
在此前的一兩年中，社區(qū)中有很大一批聲音希望 Figma 支持原生的 Design token 能力，這次它終于來了！在 Config 大會(huì)中 Dylan Field 稱之為 Variables，能夠?qū)崿F(xiàn)期待已久的 Token 嵌套 Token 的能力，不再需要借助第三方插件，體驗(yàn)感拉滿。
Variables 變量類型
推薦指數(shù)：??????????
有四種類型的變量。每一種都可以應(yīng)用于特定的屬性和元素。之前只有 顏色、字體、投影、柵格才能設(shè)為樣式發(fā)布到設(shè)計(jì)組件庫，現(xiàn)在寬度、間距、Padding、圓角、描邊等都可以通過 Variables 配置樣式發(fā)布到設(shè)計(jì)組件庫。
Variable modes 變體模式
推薦指數(shù)：??????????
按模式（如明暗）定義和組織變量的不同值，并將其應(yīng)用于您的設(shè)計(jì)以在主題之間切換。
以下是可以使用模式切換的幾種實(shí)用場(chǎng)景：
-
不同的顏色主題，如淺色和深色模式
-
不同的語言以查看設(shè)計(jì)中稿的適配效果
-
不同設(shè)備尺寸下設(shè)計(jì)稿的展示效果
Component statistics 設(shè)計(jì)組件使用分析
推薦指數(shù)：??????
通過設(shè)計(jì)系統(tǒng)分析檢查團(tuán)隊(duì)組件和變體的頻率和使用情況。使用數(shù)據(jù)來標(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ì)庫、代碼庫和項(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ù)：????????
通過將設(shè)計(jì)稿與之前的版本進(jìn)行比較，以準(zhǔn)確了解發(fā)生了什么變化，從而減少與設(shè)計(jì)師之間的反復(fù)討論。
支持配置最大、最小寬度
推薦指數(shù)：??????????
在此之前，自動(dòng)布局只能配置 固定尺寸、適應(yīng)內(nèi)容和填充容器，現(xiàn)在可以給容器設(shè)置最大、最小寬度，以更加貼切地滿足設(shè)計(jì)需求。
支持 Wrap 流式布局
推薦指數(shù)：??????????
當(dāng)容器寬度不夠時(shí)，可以自動(dòng)將后面的元素往下排列。
解鎖數(shù)學(xué)表達(dá)式，讓原型感覺真實(shí)
推薦指數(shù)：????????
使用加、減、乘、除等條件邏輯、數(shù)學(xué)表達(dá)式和高級(jí)原型設(shè)計(jì)功能生成動(dòng)態(tài)字符串或數(shù)值，快速構(gòu)建更加逼真的原型。
使用內(nèi)聯(lián)預(yù)覽快速進(jìn)行更改
推薦指數(shù)：????????
在編輯完設(shè)計(jì)稿之后，可以直接在畫布上播放和預(yù)覽原型，以實(shí)現(xiàn)快速反饋循環(huán)和快速迭代。
