第一波！2020年3月超實用設計工具大合集

新年新氣象，宅家做設計搞開發的同學似乎效率都提升，這個月 Prototypr.io 這個月的設計工具大合集當中，涵蓋了 10 個不同類別，功能豐富多樣的新玩意！這次的合集當中有很多令人眼前一亮的好東西，比如驚艷的圖庫網站 Open Peeps，基于人智能的關鍵詞配色生成器，還有可以超快借鑒你所喜歡網站的配色和樣式的 Figma 插件！

往期干貨也非常給力：

下面快來看看吧！

??? 插畫圖庫

1.?Open Peeps →

Open Peeps 是一個最新的手繪圖庫，它提供給你相當充裕的創作空間，你可以在它提供的平臺上對人物角色以及所處的場景進行自定義，這樣就可以應用于你自己的設計作品當中。

2.?ITG.digital →

ITG 是一個在線的插畫生成工具，只需幾分鐘，你就可以創建獨特的、富有故事性的插畫，在這個過程中，你可以調用不同的元素來進行搭配，定制性極強。你可以將這些插畫應用在APP、網站和社交媒體上，非常不錯~

3.?Lottiefiles for Figma →

Lottiefiles 也是最近超級熱的一款 Figma 插件，能夠幫你將各種免費的 Lottie 動畫轉為 GIF 和 SVG 插入到你的設計當中。如果你正在找最新的、有用的 Figma 插件，一定要看下面這篇文章：

?? 配色工具

1.?Vangogh →

這是一個使用人工智能驅動的配色工具，它能夠根據你要的關鍵詞幫你找到合適的配色方案。這款工具借助機器學習的技術，在網上數以百萬計的圖片中搜索、獲取配色，并且生成符合你的關鍵詞的配色。

2.?Color Safe →

Color Safe 是為你提供對比度良好、符合 WCAG 規范的配色方案，這樣的配色方案有著更加優良的可訪問性，帶來更加優秀的用戶體驗。

3.?Colors & Fonts 4.0 →

來自 Michael Andreuzza 的配色庫 Colors & Fonts 升級到 4.0 了，這個工具又一次升級改進，最新版支持下載 Figma 格式的配色我二年，支持 Tailwind CSS，支持顏色選擇器，支持漸變圖案和顏色代碼轉換。它們對于數字設計的支持越來越好了，值得使用！

?? 設計資訊和資源

1.?Vincent →

Vincent 是一個每日設計和前端相關的設計新聞資訊的 APP，目前它主要推出了 iOS 版的，并且 Android 版也將很快安排上。作為一個垂直領域的聚合閱讀工具，Vincent 非常適合想要第一時間了解最新設計資訊的同學。

2.?DesignValley →

DesignValley 是一個設計師和設計愛好者的精選工具誒機，你會在 DesignValley 中投遞、發現和共享自己喜歡的設計素材和設計資源。在一個地方找到你所有的設計工具，它的價值是非凡的。

3.?FrontendSource →

FrontendSource 是一個給設計師和前端開發者的資源合集，從 Vue、React 到 Jekyll、Gatsby、HTML 等各種資源一應俱全。除此之外，這個網站中還包含了組件、主題、UI Kit 等常見設計資源，非常全面。

?? UI 工具包

1.?iOS 31 GUI →

這是一組超級全面的 iOS 平臺的 UI Kit 合集，其中包含上百個不同的 UI 組件，且都涵蓋了深色和淺色模式。所有的元素都有 Sketch、Figma、Adobe XD 的版本，并且符合人機界面交互準則，除此之外，它還支持蘋果最新的 SF Symbols。

2.?Filter →

這是一個 Figma 插件，插件為你提供 20 多種不同的自定義篩選器控件，你可以根據自己的需求，來選擇篩選機制，根據自己的喜好進行編輯。

?? 設計工具

1.?Lunacy Designer 5.0 →

這是一款 Windows 平臺的全功能圖形編輯器，最新版本為 5.0 并且是 Beta 狀態。最新版中包含了人工智能加持的一鍵去背景功能，集成了最新的 UI Kit功能，修復了超過 1000 個 Bug。同時，作為一款圖形編輯器，它可以直接使用 Sketch 文檔，性能強勁且穩定。

2.?Pixilart →

Pixiilart 是一款在線像素繪圖平臺，如果你也喜歡像素藝術，那么你可以在這里找到志趣相投的藝術家和發燒友，在這里共享你的設計，或者發掘更多有趣的設計。

3.?Figma Handoff?→

Figma Handoff 是一個設計交付工具，可以幫助你從 Figma 設計文件生成標注，方便開發人員查看。它是一個線上應用，通過?Figma API?獲取設計數據，并生成離線或在線標注，但不會將你的數據保存至任何服務器。這款插件來自中國

4.?DraftXR →

DraftXR 是一款 Adobe XD 平臺的 VR 設計原型插件，雖然它做的是 2D 的設計，但是能夠在兼容 WebVR 的 HMD 當中進行預覽和測試，非常不錯。

5.?Waymark →

這是一款用來創建產品路線圖的工具，Waymark 能夠生成 png 格式的產品路線圖，你可以將這個路線圖用于演示，它讓你的展示內容易于理解，易于執行。

?????? 無代碼工具

1.?Airsite →

Airsite 是一款移動端應用程序，讓你可以以極為簡單的方式來構建簡單的網站，而構建過程在你的 Android 手機或者 iPhone 上完成就可以了。

2.?Devsync →

這是一款可視化的 CSS 編輯器，它可以與你的無代碼編輯器實時同步編輯，這款 Chrome Devtools 拓展可以讓你實時有效地觀察到你的操作和樣式，無需編寫 CSS 代碼。

3.?Make Stories →

MakeStories 是一款無代碼 AMP Story （AMP Stories和Snapchat Stories、YouTube Reels極為相似）構建工具，它使用快速拖放的功能來幫你來構建互動式的故事效果，結合其中 75 種不同的效果，將你的制作能力提升到一個極高的程度。比如你可以使用 AMP 動畫、一鍵龔律全、自定義字體來為你的設計增添樂趣。同時，它有著豐富的庫，因為它還集成了諸如 WordPress 和 Drupal 等工具。

?? 設計系統

1.?Superposition for Figma →

Superposition 是一款實用性極強的軟件，如果你喜歡某個網站，并且想使用它的配色、排版甚至樣式，那么你可以用 Superposition 來實現這一目標。

2.?Sleuth for Sketch →

Sleuth 是一款開源工具，它能夠幫你了解如何使用組件，以及何時使用組件。借助它，你可以評估你的設計系統能夠對你的流程、以及外部世界都有哪些影響。根據它的創建者 Sean Rice 所說，Sleuth 更像是一個 Figma 的組件分析工具，不過它是適用于 Sketch 的。

?? 團隊工具

1.?Tools for Teams →

團隊協作需要有適合團隊使用的工具，那么這個列表就是精選之后的團隊協作工具列表。從管理到設計，從開發到分析，這里所涉及到的工具幾乎涵蓋了團隊協作的絕大多數需求和場景。

2.?Zeplin 3.0 →

Zeplin 是一款非常流行的在線設計和協作工具，如今更新到最新的 3.0 版了，在這個新版當中，包含了許多令人興奮的新功能，比如鏈接組件功能，讓開發者能夠防偽代碼庫中的組件，而 Zeplin API 則通過內部腳本、小程序甚至其他應用來訪問數據，并且可以自定義。

??? 圖片優化工具

1.?TinyImage for Figma →

這是一個 Figma 上的圖片壓縮工具，它可以將你在從 Figma 導出 png 和 jpeg 格式圖片的時候，壓縮 90%！

2.?AI Image Enlarger →

這是一個基于人工智能的圖片放大工具，它可以在不降低畫質的前提之下，幫你將圖片無損放大。值得一提的是，它是完全免費的。

3.?CloudApp for iOS →

CloudApp 是一個錄屏和文件管理工具，你可以在任何地方創建錄屏、圖片和文件，并且分享出去。借助這款工具，你還能創建收藏夾，便于快速訪問。

?? 測試工具

1.?Responsive Website Test →

這是一個網站測試工具，可以替你進行跨設備的測試，查看你的網站在各種不同的設備上的相應速度，它比 Devtools 更快，并且可以更快進行可視化的展示，并且會優先為你展示三種常見屏幕的測試結果。