Figma Config 2023大會落幕！幫你快速了解全部新功能：簡要版

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

更多Figma 技巧：

一、Design system 設計系統

Design token

推薦指數：☆☆☆☆☆

在此前的一兩年中，社區中有很大一批聲音希望 Figma 支持原生的 Design token 能力，這次它終于來了！在 Config 大會中 Dylan Field 稱之為 Variables，能夠實現期待已久的 Token 嵌套 Token 的能力，不再需要借助第三方插件，體驗感拉滿。

Variables 變量類型

推薦指數：☆☆☆☆☆

有四種類型的變量。每一種都可以應用于特定的屬性和元素。之前只有 顏色、字體、投影、柵格才能設為樣式發布到設計組件庫，現在寬度、間距、Padding、圓角、描邊等都可以通過 Variables 配置樣式發布到設計組件庫。

Variable modes 變體模式

推薦指數：☆☆☆☆☆

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

以下是可以使用模式切換的幾種實用場景：

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

Component statistics 設計組件使用分析

推薦指數：☆☆☆

通過設計系統分析檢查團隊組件和變體的頻率和使用情況。使用數據來標記需要幫助以提高效率和改善的設計資產。根據官方介紹，這個功能目前只有企業版才能使用。

二、Dev Mode 開發者模式

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

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

推薦指數：☆☆☆☆

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

保持工作流協調一致

推薦指數：☆☆☆☆

開發者模式下也可以運行插件了，當所有內容整合到 Figma 中時，可以簡化工作流程，可以不需要在在設計庫、代碼庫和項目管理工具之間反復跳轉。

Figma for VS Code 插件

推薦指數：☆☆☆☆☆

在 VS Code 中可以安裝 Figma 插件，直接在 VS Code 中預覽設計稿、查看標注，并且可以直接將 Figma 自動生成的代碼參數直接調用到代碼編輯器當中，開發者可以不需要反復在代碼編輯器和 Figma 中跳轉就能完成開發工作。

Storybook and Figma

推薦指數：☆☆☆☆

在 Storybook 中可以直接對比預覽 Figma 文件

Section 可以狀態標記

推薦指數：☆☆☆☆

Scetion 可以標記 Ready for dev 狀態，提醒開發者這部分內容已準備就緒可以開發

查看設計稿的歷史版本更新

推薦指數：☆☆☆☆

通過將設計稿與之前的版本進行比較，以準確了解發生了什么變化，從而減少與設計師之間的反復討論。

三、Auto Layout 自動布局更新

支持配置最大、最小寬度

推薦指數：☆☆☆☆☆

在此之前，自動布局只能配置 固定尺寸、適應內容和填充容器，現在可以給容器設置最大、最小寬度，以更加貼切地滿足設計需求。

支持 Wrap 流式布局

推薦指數：☆☆☆☆☆

當容器寬度不夠時，可以自動將后面的元素往下排列。

四、Prototype 高級原型設計

**解鎖數學表達式，**讓原型感覺真實

推薦指數：☆☆☆☆

使用加、減、乘、除等條件邏輯、數學表達式和高級原型設計功能生成動態字符串或數值，快速構建更加逼真的原型。

使用內聯預覽快速進行更改

在編輯完設計稿之后，可以直接在畫布上播放和預覽原型，以實現快速反饋循環和快速迭代。

推薦指數：☆☆☆☆

參考鏈接

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