越來越多的設(shè)計師和設(shè)計團(tuán)隊開始選擇使用 Figma 來進(jìn)行 UI 和產(chǎn)品設(shè)計了。 憑借著快速發(fā)展的社區(qū)和大量的第三方插件、服務(wù)以及素材，加之橫跨三大平臺（Windows、Mac、Linux），Figma 已經(jīng)開始全方位地同 Sketch 進(jìn)行競爭 。

當(dāng)然，用 Figma 不僅要熟悉原本的功能，而且要了解并熟悉各種第三方的工具、插件和服務(wù)。這次的文章推薦 14 款幫你提升設(shè)計效率的 Figma 平臺的插件和素材：

1、矢量角色插畫

這是一個超級好用的角色矢量插畫合集，總計包含 78 張不同的角色插畫，適用于不同的場景和狀態(tài)，比如跳舞、談話、開車、拍照等，這些插畫都可以在 Figma 當(dāng)中自定義，并且可以應(yīng)用在各種項目當(dāng)中。

2、用于 APP 的 3D 模型

3D 元素 在 UI 設(shè)計當(dāng)中越來越普遍的使用，這也是 2021 年最值得關(guān)注的趨勢。所以，這個插件就相當(dāng)值得用了，這個工具所提供的 3D 元素在細(xì)節(jié)上是無法編輯的，但是你可以拿著它們直接使用，應(yīng)用到 UI 界面當(dāng)中去，也相當(dāng)方便了。

這組 3D 模型總計有 26 種不同的形狀，22 種不同的組件，以及 12 套視覺稿模板。除此之外，還有作者提供的設(shè)計教程。

3、Flamingo 設(shè)計系統(tǒng)

設(shè)計系統(tǒng)是好東西，而方便上手的小型設(shè)計系統(tǒng)更是很多設(shè)計師的最愛。這套名為 Flamingo 的設(shè)計系統(tǒng)是基于原子設(shè)計系統(tǒng)的原則來做的，其中包含以下幾個層級：

·基底：色彩、字體、陰影、元素；
·原子：按鈕、輸入框、選擇按鈕、文本區(qū)域、復(fù)選框等；
·模塊：表單元素、提醒、推送、下拉菜單、選區(qū)等；
·組織：導(dǎo)航、頁頭頁腳、側(cè)邊欄等；
·模板：一系列不同類型的頁面模板

這套設(shè)計系統(tǒng)最初是作者為所屬的公司所設(shè)計的，后來應(yīng)大家需求對外公開可以免費下載使用。

4、Figma 動畫示例教程

在 Figma 當(dāng)中，做靜態(tài)的界面并不麻煩，那做動畫呢？這個教程就是教你如何使用 Smart Animate 來實現(xiàn)不同的動畫并提供相應(yīng)的模板。這次的教程當(dāng)中，總計有 7個部分，分別涉及到漢堡菜單、滑動選項卡、延遲加載、頁面過渡、下拉刷新、滑動交互、多步模態(tài) 等7種常見的交互動畫。

5、Teenyicons 圖標(biāo)合集

Teenyicons 是一個很棒的圖標(biāo)合集，其中包含 1160 個不同的圖標(biāo)，涵蓋了線性和填充兩種不同的樣式，而且筆觸和細(xì)節(jié)都是可編輯的。而這套圖表有著相當(dāng)詳細(xì)的分類，比如技術(shù)、創(chuàng)作、房地產(chǎn)、任務(wù)、聊天、社交等等等等。

6、Segment UI Kit

Segment UI Kit 是一個基于 Android 組件的自定義 UI 工具包，其中涵蓋了配色、版式、圖標(biāo)以及大量的預(yù)定義的組件。這套工具包對于設(shè)計師和開發(fā)者而言，都非常容易上手使用。

工具包中的組件包含 380 個不同的組件和流程，涵蓋了工具欄、導(dǎo)航欄、選項卡、卡片組件、下拉菜單、表單、按鈕等等。

7、用戶交互歷程地圖

這款工具就強(qiáng)大了，它是一個協(xié)助設(shè)計師將交互和用戶歷程結(jié)合到一起的映射工具，其中包括可拓展的用戶角色，你可以從用戶流程開始入手，通過這款工具，逐步延展，拓展到產(chǎn)品的各個細(xì)節(jié)，從而搭建出完整的用戶歷程，將流程和交互完美地串聯(lián)到一起。

8、UX 模板

這個工具和前者有點相似，它是用來創(chuàng)建用戶角色、用戶歷程并且可以進(jìn)行用戶調(diào)查和訪談，可以說是一個全功能的 UX 設(shè)計輔助工具。

UX 模板這個工具可以完全自定義用戶角色，根據(jù)你的業(yè)務(wù)需求和流程需求進(jìn)行極為細(xì)致的控制。用戶歷程部分也是可以完整定義的，而用戶調(diào)研和訪談的方面，會給你提供完整的問題列表和自定義空間，并且根據(jù)不同的階段進(jìn)行優(yōu)化。

9、Airtable Blocks UI Kit

借助這套工具，你可以在 Airtable 平臺上開始構(gòu)建程序。雖然 Figma 本身在素材和結(jié)構(gòu)的處理上井井有條，但是在自動布局上，則處理的比較苛刻。不過在 Airtable Block UI Kit 上，則能夠適當(dāng)緩解這方面的問題。另外，這套 Ui Kit 也是相當(dāng)完整的，其中涵蓋了間距、文本樣式、顏色、按鈕等必不可少組件。

10、Figma 信息圖 UI Kit

這是一套涵蓋龐大數(shù)據(jù)可視化組件的 UI 套件，非常適合用來設(shè)計儀表盤，用作信息展示和數(shù)據(jù)呈現(xiàn)，你可以在其中找到絕大多數(shù)的可視化的組件，復(fù)雜的數(shù)據(jù)圖表乃至于專業(yè)的財務(wù)數(shù)據(jù)組件，無論是深色還是淺色都可以兼容。

這套信息圖 UI Kit 是 Premium Figma Charts & Infographics UI Kit 的精簡版，但是即便如此也相當(dāng)夠用了。

11、Templatery 展示模板

我們都很清楚，如果你想要你的想法能夠從設(shè)計中脫穎而出，那么你很大程度需要視覺上美觀且有效的演示文稿。這些模板能夠幫你快速上手。這是一組被精心設(shè)計的模板，功能足夠扎實，視覺富有創(chuàng)意。你并不需要將每一個模板內(nèi)的圖片都導(dǎo)出，只需要在原型模式下連接這一套框架，然后就可以直接播放展示。

如今 Templatery 內(nèi)包含總計 10 個演示模板，每個模板中涵蓋 10 ~12 張精美的幻燈片，并且這套模板還會不斷更新。

12、EXO 設(shè)計系統(tǒng)

這當(dāng)然不是出自韓國男團(tuán)的設(shè)計組件……這是一套包含有排版、配色、按鈕等各色組件、卡片和常用字段的精心制作的設(shè)計系統(tǒng)。這套設(shè)計系統(tǒng)和其他的類似，除了基礎(chǔ)的版式、配色之外，組件的部分非常完整和豐富。此外，這套設(shè)計系統(tǒng)還額外增加了 22 套功能性模板，滿足不同的展示需求。

13、Pajamas UI kit 組件庫

這是一套能夠和 GitLab 設(shè)計系統(tǒng)進(jìn)行接駁的 UI Kit 組件庫，其中包含 33 個不同類別、嚴(yán)格約束、設(shè)計精美的組件，最大程度地降低設(shè)計成本，通過這樣的組件庫，你可以將創(chuàng)建設(shè)計系統(tǒng)的速度提高 2 ~ 3 倍。

14、Radius 設(shè)計套件

最后要推薦的壓軸素材，就是這套 Radius 設(shè)計系統(tǒng)套件了。它是一套設(shè)計得非常整潔的組件庫，其中不僅本身的樣式設(shè)計整潔易用，而且其中涵蓋了如何使用這些樣式、組件的清晰的說明和指南。它最大程度降低了工具本身可能帶來的風(fēng)險和壓力，讓上手使用非常方便。這套工具還將注入自動布局和組件約束等功能有機(jī)地結(jié)合進(jìn)來，讓你構(gòu)建設(shè)計系統(tǒng)的時候，速度更快。

更多 Figma 相關(guān)文章：