編者按：新一輪的干貨素材來了！這次依然是來自 Prototypr.io 設計干貨大合集，他們會根據設計工具的屬性，給它們分門別類。這次的合集中，各種設計工具數量不少，總會有幾款你能用得上的。

在過去的一年當中，大量的免費圖庫涌現了出來，創建免費圖庫、提供素材服務似乎成為了一種新的趨勢。在過去的一個月當中，還有很多新的、值得推薦的設計工具，接下來我們一起來看看。

一、插畫圖庫

算起來，今年 6 月幾乎是一個插畫圖庫月，這個月出現了大量的插畫免費圖庫，除了之前我們所推薦的 UnDraw（使用的是MIT授權協議）之外，額外還有6個相當不錯的插畫圖庫。

1. 藝術圖庫?Mixkit Art →

Mixkit Art 是一個藝術風格插畫圖庫，這意味著你可以在你的設計當中，借助這樣的圖庫賦予設計以更濃郁的藝術氣息。當然，這個圖庫是免費的！這也是我最喜歡的詞！

2.?404頁面生成 Trendy 404s →

有了 Trendy 404s 之后，忘掉那些無聊的 404 頁面吧。在它的幫助之下，你可以讓你的 404 頁面更加有趣，不再單調局促。

3.?角色插畫生成工具 Stubborn Generator →

這是一個免費的插畫生成工具，能夠幫你的項目創建一個獨特的、富有故事性的插畫。這套工具包含 25 個角色和 50 種不同的背景，可以使用 Sketch 和 Figma 進行自定義設計。

4.?剪紙風插畫工具 Paper Illustrations 1.0 →

高度定制化的扁平插畫是一種勢不可擋的趨勢。這套剪紙風的插畫工具里面的素材都是矢量的，有 AI 和 Sketch 兩個版本，100% 可以商用。

5.?兒童涂鴉轉換工具 Drawow →

你不得不承認，有時候最有創造力的還是孩子。這套工具能夠幫你將孩子們的涂鴉作品轉化成為漂亮的插畫，這不僅能夠給你的家庭生活帶來更多樂趣，也能為你提供有用的插畫素材。

6.?角色插畫包 Grape Illustration Pack →

這套插畫圖形包含了 20 個非常友好的角色，包含 AI、SVG 和 EPS 三種格式，你可以通過編輯和調整應用在自己的品牌當中，你甚至可以添加一些動畫。

當然，即使有這些新的工具，千萬不要忘記 UnDraw，他們還提供 100% 完全免費的 SVG 插畫集，并且現在還提供了最新的 Adobe XD 插件，戳這里查看：

二、UI 工具包和設計素材

1. 設計系統入門?Getting Started With Design Systems →

這是一套來自 Marvel 的電子書，可以幫你了解設計系統的基本運作原理，并且會帶你創建一套屬于自己的設計系統。

2.設計雜志?Rooki.design →

真正想要找到免費又合適的設計素材是一件很難的事情，Rooki.design 是一個年輕的設計師線上雜志，你在這里能夠找到很多學習資源和獲取靈感所需要的一切。

3.?設計系統 Eva Design System →

很多時候，設計師的設計系統會基于一個現有的設計系統來做，所以我們為你推薦這套 Eva Design System。它高度可定制化，易于調整，可以集成你自己的品牌元素，可以實現 Web 和移動端的設計。目前它可以用于 Sketch，試試看！

4.?UI工具套件 UI Kitten 4.0 →

這是一套基于 React Native UI 的新手 UI 工具套件，由 Akveo 所創建，其中包含深色和淺色兩種主題，可以更好地同后端集成到一起。

5.?UI 框架 Storefront UI →

雖然 Vue.js 目前依然還是一個比較年輕的工具，但是它已經是最為強大的 UI 開發框架了。在此基礎上搭建起來的 Storefront UI 是一個非常有用的工具包，可以幫你構建電商網站和移動端 APP。

三、樣機工具

1.?圖形編輯器 Artboard Studio 2.0 →

在正式推出一年之后，在線圖形編輯工具 Artboard Studio 推出了 2.0 的版本，包含最新的協作和實時反饋的功能，并且引入了瀏覽器內編輯視覺稿的功能。

2.?視覺稿工具 Hamok →

這是一款非常易于使用的視覺稿工具，可以使用 URL 或者圖片來創建視覺稿。它提供了一整套模板，并且生成響應式視覺稿，展示出各種不同的效果。

3.?設計框架 Octopus.do →

在進行UX設計的時候，搭建正確的產品框架結構是工作中最為重要的部分。這款工具能夠幫助設計師和產品經理更快更好地搭建程序原型，構建設計，創建可視化的網站地圖，并且動態地核算成本。這款工具快速且易于使用。

四、配色和圖標工具

1.? Colors & Fonts →

Colors & Fonts 是出自 Michael Andreuzza 的一個免費分享項目，他精心選擇了一些視覺風格和效果非常突出的設計作品，你可以從中獲取布局、配色和字體相關的靈感，只需要簡單點擊就可以添加到你的設計項目當中去（也就是復制粘貼）。

2.?圖標包 Joy Pixels 5.0 →

這是一套非常有趣的圖標合集，包含 230 多種新的的表情符號和超過 1500 款被重新設計過的圖標。所有的這些都是免費的（僅供個人使用）。

五、協作工具

1.?創意協作工具 Shape →

著名的設計機構 IDEO 將他們多年以來開放式創新的經驗融入到這款名為 Shape 的工具當中，他可以用來構建、測試和改進創意設計協作，可以讓產品的創建更加高效。

2. 思維導圖工具?Whimsical Mind Maps →

來看看這款高效又漂亮的思維導圖工具吧，它有著非常實用的實時協作功能，你可以在幾秒鐘的時間以內就和協作者組織出新的想法，輸出思維導圖。

3.?文檔集成工具 FYI →

FYI 能夠幫你將文檔集中到一起，并且將你正在使用的 APP 都打通。連接不同的 APP 只需要幾秒鐘時間，并且還可以借助 Chrome 瀏覽器插件，可以直接一站式解決問題。

六、設計代碼工具

1.?Polypane →

Polypane 是本月非常火的一款工具，它可以用來創建網站和 APP，全程在瀏覽器中完成。它適合開發者、設計師、產品經理、QA 以及任何通過網絡來工作的人使用。

2.?深色模式插件 Darkmode Widget →

這是一個非常棒的小插件，可以為你的網站并切模式。你所需要做的事情很簡單，就是復制一段代碼嵌入到網站當中，你就可以立刻擁有深色模式了。

3.?CSS動畫工具 CSS Wand →

CSS Wand 是一款開源工具，只需要復制粘貼，你就能擁有漂亮的 CSS 動畫，定制起來也非常方便。

4.?UI自動生成工具 UIbot →

有沒有聽說過程序化設計（programmatic design）？如果沒有，那么不妨試試 UIBot 這款工具，它可以隨機地生成不同尺寸的設計、配色和排版布局，全程借助程序自動完成。

5.?CSS轉換工具 Stylish →

Stylish 是一款非常便捷的瀏覽器工具，可以直接將 CSS 組件轉化為 React 樣式的組件。

七、用戶研究工具

1.?機器學習預測工具 Eyetato →

Eyetato 是一款借助機器學習來實現的工具，Eyetato 能夠預測用戶會看你的 APP 的哪些地方，而這種預測是基于成千上萬的真實的的眼動測試得出的結果。這款工具能夠幫你更好地洞悉用戶習慣。

2. 視頻錄制工具 RecordScreen.io →

錄制視頻很麻煩？現在在這款工具的幫助下，你可以直接在瀏覽器當中錄制視頻，非常簡單，非常實用。

3. 用戶反饋跟蹤工具?Shipright →

Shipright 是一款能夠跟蹤用戶反饋的工具，確保你所有需要的信息都能匯總在一個地方，從功能訴求，到用戶反饋，以及產品痛點等等。

八、特別推薦工具

1、設計工具時光機 Time Machine

在策劃這些新鮮工具的同時，Prototypr.io 團隊還制作了一款專門跟蹤各種設計工具更新的工具──設計工具時光機。它能夠跟蹤包括 Sketch、Figma、Adobe XD、Marvel 等頂級設計工具的大版本更新。

借助這款工具，你能清楚地知道你可以借助這些工具的新功能做到哪些事情。

除此之外 Prototypr.io 團隊正在開發最新的 Prototypr 3，它會是一個改進之后更加強大的平臺，并且為你提供更加出色的設計工具。