大家好，我是灰色執(zhí)照~

已經(jīng)有很長的一段時間沒有開發(fā)新的 Figma 插件了，都害怕自己手生了。于是今天想著利用生活中的一些碎片時間嘗試一下開發(fā)一款新插件。

往期插件：

經(jīng)過將近 5 天時間的努力（構(gòu)思+設(shè)計+代碼），一口氣開發(fā)了兩款 Figma 插件。

第一款：快速生成矢量地圖的產(chǎn)品：NB Vector Map

第二款：快速制作樹形控件的產(chǎn)品：NB Tree

這兩款插件都是 100%免費的，大家可以放心使用，永遠(yuǎn)都不會有任何收費相關(guān)的行為！接下來我們先介紹一下第一款插件：NB Vector Map 大家在 Figma 社區(qū)直接搜索：NB Vector Map，也可以訪問如下網(wǎng)頁地址來獲取插件： https://www.figma.com/community/plugin/1276372655585538432

插件的功能非常簡單 ，就是生成全球各個國家的矢量地圖（svg 格式，鋼筆路徑帶分層）

以下就是插件的界面，非常的簡單直觀，根據(jù)四大洲進(jìn)行分類，各個國家按照字母順序排序

你需要哪個國家的地圖，就點擊哪個名稱就可以了。

功能就是這么簡單直觀。怎么樣，很方便有沒有。接下來我們接著介紹第二款插件：NB Tree

顧名思義，他就是一款生成樹形菜單的插件。

過去的工作中，我經(jīng)常要做類似的東西：

又或者是這樣的東西：

于是我直接開發(fā)了一款直接生成樹形菜單的插件，他的操作比較簡單，如下圖所示：

插件還有以下功能：

1. 圖標(biāo)必須可以配置（常用的加號減號必須可以改成三角形之類的）

我先參考了一下阿里巴巴比較有名的 Ant Design 框架，它們的圖標(biāo)就是有這樣 2 種常見的形式。我設(shè)計的插件，不但這些東西要可以配置，還必須是以組件（Compment）的形式生成它們。這樣用戶可以一處修改，處處生效。

2. 樹形菜單必須可以自由定義復(fù)選框（很多時候我們并不是用它來跳轉(zhuǎn)，而是用它來做選擇）

3. 菜單要可以保存數(shù)據(jù)，下次打開我能夠“續(xù)上”。（編輯一顆樹可不是簡單的事情，做到一半下班了，我希望明天能繼續(xù)）

4. 插件是免費的（這個不用我多說，經(jīng)濟(jì)下行的今天，設(shè)計師賺點辛苦錢畢竟也都不容易）

大家可以到 b 站查看它的所有功能介紹：https://www.bilibili.com/video/BV1Lu411P7uK/

插件使用地址（你直接在 Figma 社區(qū)搜索 NB tree 也可以）：https://www.figma.com/community/plugin/1277617397519127165/NB-Tree

寫在最后

雖然這是一款功能比較簡單或者說單一的工具，但是它依舊是我非常用心制作的，每一個細(xì)節(jié)我都有很努力的去完善它（如果你現(xiàn)在還有不足之處，記得加我的微信：nbcharts 反饋給我）我相信 NB Tree 一定是一款高效率的工具，可以節(jié)約你的工作時間，提高你的工作效率。制作不易，工具又 100%免費，求使用的朋友給個五星好評，不過分吧？