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

Figma 正式支持插件

其實早在今年 5 月，就有用戶貢獻了一套非官方的插件市場，里面也有一些比較不錯的插件。但是沒過幾天 Figma 官方就和其作者協(xié)商將它下線了，因為這可能會存在一些安全隱患。

社區(qū)版插件市場

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

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

Content Reel

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

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

Figmotion

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

時間軸動畫插件

Mapsicle

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

地圖生成插件

Google Sheets Sync

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

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

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

Super Tidy

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

快速整理插件

Chart

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

Chart 插件

Iconify

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

圖標插件

Interplay

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

自動生成設(shè)計組件

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

調(diào)整組件 

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

Paddet

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

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

Figma Walker

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

Figma Walker

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

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

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

官方提供的樣式組件庫

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

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

參考鏈接：

●Figma 插件市場：https://www.figma.com/c

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

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

●開放 API：https://www.figma.com/developers/api

作者：leadream

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

封面圖片來源于：Dribbble/ Roma Filippov