針對 UI入門者的 Figma Variants 推廣

就在本週 Figma Variants 正式推出了！一邊研究和測試功能中，覺得變數的功能也越來越接近程式裡控制組建化元件狀態、屬性、變數的方式。希望藉由 Figma Variants 可以讓剛接觸 UI 且尚未了解工程師是如何實作設計的人 ，藉這個機會了解更多觀念。

如果你是剛接觸 UI數位科技領域的設計師，這篇文章將會適合你。而本篇將搭配螞蟻金服推出的 Ant.Design 來說明和實作範例。尚對 Design librairy或各個 UI pattern 還很陌生的朋友們 可以一併透過 Ant.Design 來了解。

Ant Design 是一套由知名網路公司螞蟻金服所開源出來的UI Library，除了library還附上了詳細的指南，以及設計語言，跟你說你遇到什麼情形的時候應該怎麼做，以及每個設計背後代表的意義。

大致了解 Ant Design 的背景後那我們開始吧！

Ant. DesignButton介紹

透過https://ant.design/components/button-cn/ 的說明我們了解到，在按鈕元件裡除了我們過去熟悉的 hover、actvie 外，工程師還可以透過改變它們各種屬性中的值來改變樣貌和狀態讓它來實踐頁面的各種應用。

那推出 Variant 前，我們是如何在 Figma、Sketch 裡實作呢？大部分有在維護嚴謹設計元件庫 Desgin Library 的團隊大多會用運用命名以及分隔符號 \ 來掌握元件的各種屬性和狀態

Figma

Sketch

搭配了這次新推出的功能 Variants 讓設計的過程更直覺化，可直接藉由屬性面板來維護和操作元件

https://www.youtube.com/watch?v=y29Xwt9dET0

實作

將設計好的 Radio 組利用 Variants 打造成方便使用的 Component

完成範例

實作練習

<欲玩玩看範例或練習，進到檔案後，請先點擊 Duplicate>

最後我們可以回顧看看 Ant.design 裡 Radio 的說明和動態範例

https://ant.design/components/radio-cn/

Variants 詳細應用

若我還沒建立元件庫或團隊已經有龐大的元件庫，該怎麼適應這次的新功能？官網有推出完整的影片教學和示範，無論你是哪種情形按照著教學舉一反三，都能不那麼痛的改變自己原先的設計流程，提升工作效率

https://www.figma.com/community/file/903303571898472063/Figma-Variants-Playground

中文翻譯版 by Rei

https://www.figma.com/file/OelyRywS0sPLhuu6LVlVnn/Figma-Variants-Playground-(%E4%B8%AD%E6%96%87-by-Rei)?node-id=1017%3A0

希望本分享可以幫助剛開始踏上 UIUX 之路的你或是想選擇一套適合自己設計工具的你