在線協(xié)作設(shè)計(jì)工具 Figma 在 8 月 1 日深夜（北京時(shí)間）宣布正式支持插件。這一消息令所有的 Figma 用戶都極為振奮，插件可以讓我們的設(shè)計(jì)流程充滿更多可能，同時(shí)還可以幫助設(shè)計(jì)師節(jié)省不少時(shí)間，提升工作效率。

Figma 正式支持插件

其實(shí)早在今年 5 月，就有用戶貢獻(xiàn)了一套非官方的插件市場(chǎng)，里面也有一些比較不錯(cuò)的插件。但是沒(méi)過(guò)幾天 Figma 官方就和其作者協(xié)商將它下線了，因?yàn)檫@可能會(huì)存在一些安全隱患。

社區(qū)版插件市場(chǎng)

一個(gè)多月后，F(xiàn)igma 就宣布了插件開(kāi)發(fā)者內(nèi)測(cè)計(jì)劃，邀請(qǐng)用戶參與插件開(kāi)發(fā)流程。直到前幾天，F(xiàn)igma 在官方博客發(fā)布了一系列插件開(kāi)發(fā)者訪談，并宣傳其直播活動(dòng)，來(lái)預(yù)熱插件化的正式到來(lái)。

Figma 插件市場(chǎng)當(dāng)晚上線后，一共只有五十幾款插件，但種類還算豐富。Figma 團(tuán)隊(duì)當(dāng)時(shí)嚴(yán)格審核內(nèi)測(cè)資格，應(yīng)該就是為了保證內(nèi)測(cè)插件的多樣性。我第一時(shí)間安裝了一些插件來(lái)體驗(yàn)。

Content Reel

這是微軟設(shè)計(jì)團(tuán)隊(duì)做的一個(gè)內(nèi)容填充插件，可以自動(dòng)使用人名、國(guó)家、郵箱等進(jìn)行圖層填充。你還可以設(shè)置內(nèi)容格式，比如人名可以指定來(lái)自某個(gè)國(guó)家或者所屬性別，數(shù)字可以指定是否有小數(shù)點(diǎn)等等。這個(gè)插件還提供圖標(biāo)填充，不過(guò)要先安裝對(duì)應(yīng)的圖標(biāo)字體，頭像填充功能還在開(kāi)發(fā)中。

微軟的內(nèi)容填充插件

Figmotion

Figmotion是一個(gè)時(shí)間軸動(dòng)畫(huà)制作插件，使用它可以給元素添加一些過(guò)渡動(dòng)效。目前這個(gè)版本還比較簡(jiǎn)單，只能給部分屬性添加過(guò)渡效果，而且不能添加事件觸發(fā)。制作好的動(dòng)畫(huà)可以導(dǎo)出視頻或者 Gif，也可以直接復(fù)制 CSS 或 JSON 代碼。這個(gè)如果能和 Figma 本身的原型功能相結(jié)合，就能做出點(diǎn)擊后顯示 loading 動(dòng)畫(huà)這種效果，期待它的后續(xù)完善。

時(shí)間軸動(dòng)畫(huà)插件

Mapsicle

Mapsicle 是一個(gè)很有意思的插件，他可以幫你生成地圖，嵌入到設(shè)計(jì)圖中。它的地圖數(shù)據(jù)來(lái)自于 Mapbox，如果你有 Mapbox 賬號(hào)，還可以在 Mapbox 中制作自定義風(fēng)格的地圖，并使用 Mapsicle 添加 token 的方式來(lái)嵌入你自己制作的地圖。

地圖生成插件

Google Sheets Sync

這款插件可以幫助你將谷歌表格中的數(shù)據(jù)填充到對(duì)應(yīng)的圖層中。只需要在谷歌表格中寫(xiě)上對(duì)應(yīng)的表頭，比如 title，在 Figma 中將圖層命名為 # 加對(duì)應(yīng)表頭名稱，如 #title，再往插件中填寫(xiě)表格公開(kāi)分享的鏈接，它就能自動(dòng)將表格中的數(shù)據(jù)同步到圖層中。

對(duì)于已經(jīng)有了數(shù)據(jù)表格的設(shè)計(jì)師，這種方式可以幫助我們快速填充內(nèi)容，讓設(shè)計(jì)稿更加接近真實(shí)場(chǎng)景。

谷歌表格數(shù)據(jù)填充插件

Super Tidy

Super Tidy 可以幫助你快速整理多個(gè) Frame，你可以將它們按照一定間距整齊排列，還可以順便更改名字，并將左側(cè)圖層結(jié)構(gòu)中的順序按照實(shí)際順序顯示。目前 Figma 已包含自動(dòng)對(duì)齊功能，但是沒(méi)有自動(dòng)排序和命名，Super Tidy 算是一個(gè)增強(qiáng)版自動(dòng)對(duì)齊。

快速整理插件

Chart

Chart 是一個(gè)可以幫助你快速生成各種圖標(biāo)的插件。你不僅可以選擇圖表類型，還可以定義曲線的分布形態(tài)是上升還是下降，自定義圖表顏色，等等。而數(shù)據(jù)來(lái)源不僅可以隨機(jī)生成，還可以手動(dòng)填寫(xiě)表格，或者上傳 JSON 文件。

Chart 插件

Iconify

Iconify 里面包含很多圖標(biāo)庫(kù)，可以幫助你快速將圖標(biāo)貼到畫(huà)布中。目前 Iconify 里面有 Material Design 圖標(biāo)、Ant Design 圖標(biāo)、Feather 圖標(biāo)等數(shù)十個(gè)圖標(biāo)庫(kù)，數(shù)量還是挺多的。

圖標(biāo)插件

Interplay

Interplay 可以幫助你從現(xiàn)有的組件庫(kù)中直接創(chuàng)建組件。目前 Interplay 中只有 Reactstrap（用 React 寫(xiě)的 Bootstrap）和 Ant Design 兩個(gè)組件庫(kù)，你還可以注冊(cè)提交自己的組件庫(kù)。

自動(dòng)生成設(shè)計(jì)組件

?Interplay 支持組件調(diào)整，你可以通過(guò)可視化界面自定義組件的一些屬性，來(lái)生成自定義的組件。

調(diào)整組件 

從生成的圖層結(jié)構(gòu)來(lái)看，應(yīng)該是直接按照 HTML 代碼層級(jí)轉(zhuǎn)化為圖層層級(jí)，導(dǎo)致圖層冗余，而且生成的組件還不能自適應(yīng)尺寸，需要手動(dòng)調(diào)整一下。不過(guò)，這個(gè)插件已經(jīng)可以幫我們節(jié)省很多時(shí)間了，也幫我們將真實(shí)的設(shè)計(jì)系統(tǒng)和設(shè)計(jì)組件聯(lián)系起來(lái)。

Paddet

Paddet 可以幫助你根據(jù)文字自動(dòng)生成內(nèi)邊距。當(dāng)你調(diào)整文字之后，只需要運(yùn)行一下該插件，它就會(huì)自動(dòng)幫你改變外面容器的大小，使其產(chǎn)生內(nèi)邊距，并生成布局柵格。

自動(dòng)生成內(nèi)邊距

Figma Walker

Figma Walker 相當(dāng)于一個(gè)快速啟動(dòng)器，有了它你就不需要在左側(cè)圖層結(jié)構(gòu)中苦苦尋找，直接輸入關(guān)鍵字并上下移動(dòng)選中圖層，回車即可直接到達(dá)圖層所在位置。

Figma Walker

作為一個(gè)設(shè)計(jì)平臺(tái)，插件可以讓 Figma 的功能更加豐富，同時(shí)更靈活地適應(yīng)不同用戶的需求。但是從安全性和穩(wěn)定性考慮，F(xiàn)igma 沒(méi)有很快推出插件，而是穩(wěn)扎穩(wěn)打地向前推進(jìn)。這個(gè)過(guò)程有一些曲折，但是從最終的結(jié)果來(lái)看，F(xiàn)igma 的插件還是很成功的。

插件生態(tài)對(duì)于設(shè)計(jì)工具很重要，F(xiàn)igma 的競(jìng)爭(zhēng)者 Sketch 的成功很大程度上可以說(shuō)有插件開(kāi)發(fā)者的功勞，但是 Sketch 卻不是很重視這一塊。早期沒(méi)有插件市場(chǎng)，官方文檔也不夠詳細(xì)，插件開(kāi)發(fā)上手很難。同時(shí)，官方開(kāi)放接口不足，很多插件開(kāi)發(fā)者依賴底層方法，導(dǎo)致插件不夠穩(wěn)定，每次 Sketch 升級(jí)都有很多插件不能用。

Figma 大概是總結(jié)了這些教訓(xùn)，提供了很詳細(xì)的文檔，而且插件開(kāi)發(fā)是基于 Web 技術(shù)的，上手難度大大減小。最重要的一點(diǎn)是，F(xiàn)igma 插件需要官方審核才可以上市場(chǎng)。官方 審核要求 很嚴(yán)格，還提供了統(tǒng)一的樣式庫(kù)，這樣既保證了插件風(fēng)格和自身界面統(tǒng)一，也能讓插件生態(tài)健康發(fā)展。

官方提供的樣式組件庫(kù)

從其技術(shù)細(xì)節(jié)來(lái)看，F(xiàn)igma 插件運(yùn)行機(jī)制類似于 Chrome 的插件，訪問(wèn)界面元素的代碼運(yùn)行在沙箱內(nèi)，和用戶界面代碼分開(kāi)，保證了安全性。為了做到這些，F(xiàn)igma 團(tuán)隊(duì)在技術(shù)上也攻克了很多難關(guān)（見(jiàn) 官方博客），不過(guò)這一切都是值得的。

目前 Figma 插件市場(chǎng)中的插件還不是很多，但我相信隨著團(tuán)隊(duì)慢慢經(jīng)營(yíng)，插件生態(tài)會(huì)越來(lái)越好，而且結(jié)合 Figma 開(kāi)放 API，可以做更多有意思的事情。

參考鏈接：

●Figma 插件市場(chǎng)：https://www.figma.com/c

●插件介紹：https://www.figma.com/blog/introducing-figma-plugins/

●插件開(kāi)發(fā)文檔：https://www.figma.com/plugin-docs/intro/

●開(kāi)放 API：https://www.figma.com/developers/api

作者：leadream

原文：https://sspai.com/post/56041

封面圖片來(lái)源于：Dribbble/ Roma Filippov