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

在過(guò)去的一年當(dāng)中，大量的免費(fèi)圖庫(kù)涌現(xiàn)了出來(lái)，創(chuàng)建免費(fèi)圖庫(kù)、提供素材服務(wù)似乎成為了一種新的趨勢(shì)。在過(guò)去的一個(gè)月當(dāng)中，還有很多新的、值得推薦的設(shè)計(jì)工具，接下來(lái)我們一起來(lái)看看。

一、插畫(huà)圖庫(kù)

算起來(lái)，今年 6 月幾乎是一個(gè)插畫(huà)圖庫(kù)月，這個(gè)月出現(xiàn)了大量的插畫(huà)免費(fèi)圖庫(kù)，除了之前我們所推薦的 UnDraw（使用的是MIT授權(quán)協(xié)議）之外，額外還有6個(gè)相當(dāng)不錯(cuò)的插畫(huà)圖庫(kù)。

1. 藝術(shù)圖庫(kù)?Mixkit Art →

Mixkit Art 是一個(gè)藝術(shù)風(fēng)格插畫(huà)圖庫(kù)，這意味著你可以在你的設(shè)計(jì)當(dāng)中，借助這樣的圖庫(kù)賦予設(shè)計(jì)以更濃郁的藝術(shù)氣息。當(dāng)然，這個(gè)圖庫(kù)是免費(fèi)的！這也是我最喜歡的詞！

2.?404頁(yè)面生成 Trendy 404s →

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

3.?角色插畫(huà)生成工具 Stubborn Generator →

這是一個(gè)免費(fèi)的插畫(huà)生成工具，能夠幫你的項(xiàng)目創(chuàng)建一個(gè)獨(dú)特的、富有故事性的插畫(huà)。這套工具包含 25 個(gè)角色和 50 種不同的背景，可以使用 Sketch 和 Figma 進(jìn)行自定義設(shè)計(jì)。

4.?剪紙風(fēng)插畫(huà)工具 Paper Illustrations 1.0 →

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

5.?兒童涂鴉轉(zhuǎn)換工具 Drawow →

你不得不承認(rèn)，有時(shí)候最有創(chuàng)造力的還是孩子。這套工具能夠幫你將孩子們的涂鴉作品轉(zhuǎn)化成為漂亮的插畫(huà)，這不僅能夠給你的家庭生活帶來(lái)更多樂(lè)趣，也能為你提供有用的插畫(huà)素材。

6.?角色插畫(huà)包 Grape Illustration Pack →

這套插畫(huà)圖形包含了 20 個(gè)非常友好的角色，包含 AI、SVG 和 EPS 三種格式，你可以通過(guò)編輯和調(diào)整應(yīng)用在自己的品牌當(dāng)中，你甚至可以添加一些動(dòng)畫(huà)。

當(dāng)然，即使有這些新的工具，千萬(wàn)不要忘記 UnDraw，他們還提供 100% 完全免費(fèi)的 SVG 插畫(huà)集，并且現(xiàn)在還提供了最新的 Adobe XD 插件，戳這里查看：

二、UI 工具包和設(shè)計(jì)素材

1. 設(shè)計(jì)系統(tǒng)入門?Getting Started With Design Systems →

這是一套來(lái)自 Marvel 的電子書(shū)，可以幫你了解設(shè)計(jì)系統(tǒng)的基本運(yùn)作原理，并且會(huì)帶你創(chuàng)建一套屬于自己的設(shè)計(jì)系統(tǒng)。

2.設(shè)計(jì)雜志?Rooki.design →

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

3.?設(shè)計(jì)系統(tǒng) Eva Design System →

很多時(shí)候，設(shè)計(jì)師的設(shè)計(jì)系統(tǒng)會(huì)基于一個(gè)現(xiàn)有的設(shè)計(jì)系統(tǒng)來(lái)做，所以我們?yōu)槟阃扑]這套 Eva Design System。它高度可定制化，易于調(diào)整，可以集成你自己的品牌元素，可以實(shí)現(xiàn) Web 和移動(dòng)端的設(shè)計(jì)。目前它可以用于 Sketch，試試看！

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

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

5.?UI 框架 Storefront UI →

雖然 Vue.js 目前依然還是一個(gè)比較年輕的工具，但是它已經(jīng)是最為強(qiáng)大的 UI 開(kāi)發(fā)框架了。在此基礎(chǔ)上搭建起來(lái)的 Storefront UI 是一個(gè)非常有用的工具包，可以幫你構(gòu)建電商網(wǎng)站和移動(dòng)端 APP。

三、樣機(jī)工具

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

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

2.?視覺(jué)稿工具 Hamok →

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

3.?設(shè)計(jì)框架 Octopus.do →

在進(jìn)行UX設(shè)計(jì)的時(shí)候，搭建正確的產(chǎn)品框架結(jié)構(gòu)是工作中最為重要的部分。這款工具能夠幫助設(shè)計(jì)師和產(chǎn)品經(jīng)理更快更好地搭建程序原型，構(gòu)建設(shè)計(jì)，創(chuàng)建可視化的網(wǎng)站地圖，并且動(dòng)態(tài)地核算成本。這款工具快速且易于使用。

四、配色和圖標(biāo)工具

1.? Colors & Fonts →

Colors & Fonts 是出自 Michael Andreuzza 的一個(gè)免費(fèi)分享項(xiàng)目，他精心選擇了一些視覺(jué)風(fēng)格和效果非常突出的設(shè)計(jì)作品，你可以從中獲取布局、配色和字體相關(guān)的靈感，只需要簡(jiǎn)單點(diǎn)擊就可以添加到你的設(shè)計(jì)項(xiàng)目當(dāng)中去（也就是復(fù)制粘貼）。

2.?圖標(biāo)包 Joy Pixels 5.0 →

這是一套非常有趣的圖標(biāo)合集，包含 230 多種新的的表情符號(hào)和超過(guò) 1500 款被重新設(shè)計(jì)過(guò)的圖標(biāo)。所有的這些都是免費(fèi)的（僅供個(gè)人使用）。

五、協(xié)作工具

1.?創(chuàng)意協(xié)作工具 Shape →

著名的設(shè)計(jì)機(jī)構(gòu) IDEO 將他們多年以來(lái)開(kāi)放式創(chuàng)新的經(jīng)驗(yàn)融入到這款名為 Shape 的工具當(dāng)中，他可以用來(lái)構(gòu)建、測(cè)試和改進(jìn)創(chuàng)意設(shè)計(jì)協(xié)作，可以讓產(chǎn)品的創(chuàng)建更加高效。

2. 思維導(dǎo)圖工具?Whimsical Mind Maps →

來(lái)看看這款高效又漂亮的思維導(dǎo)圖工具吧，它有著非常實(shí)用的實(shí)時(shí)協(xié)作功能，你可以在幾秒鐘的時(shí)間以內(nèi)就和協(xié)作者組織出新的想法，輸出思維導(dǎo)圖。

3.?文檔集成工具 FYI →

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

六、設(shè)計(jì)代碼工具

1.?Polypane →

Polypane 是本月非?；鸬囊豢罟ぞ?，它可以用來(lái)創(chuàng)建網(wǎng)站和 APP，全程在瀏覽器中完成。它適合開(kāi)發(fā)者、設(shè)計(jì)師、產(chǎn)品經(jīng)理、QA 以及任何通過(guò)網(wǎng)絡(luò)來(lái)工作的人使用。

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

這是一個(gè)非常棒的小插件，可以為你的網(wǎng)站并切模式。你所需要做的事情很簡(jiǎn)單，就是復(fù)制一段代碼嵌入到網(wǎng)站當(dāng)中，你就可以立刻擁有深色模式了。

3.?CSS動(dòng)畫(huà)工具 CSS Wand →

CSS Wand 是一款開(kāi)源工具，只需要復(fù)制粘貼，你就能擁有漂亮的 CSS 動(dòng)畫(huà)，定制起來(lái)也非常方便。

4.?UI自動(dòng)生成工具 UIbot →

有沒(méi)有聽(tīng)說(shuō)過(guò)程序化設(shè)計(jì)（programmatic design）？如果沒(méi)有，那么不妨試試 UIBot 這款工具，它可以隨機(jī)地生成不同尺寸的設(shè)計(jì)、配色和排版布局，全程借助程序自動(dòng)完成。

5.?CSS轉(zhuǎn)換工具 Stylish →

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

七、用戶研究工具

1.?機(jī)器學(xué)習(xí)預(yù)測(cè)工具 Eyetato →

Eyetato 是一款借助機(jī)器學(xué)習(xí)來(lái)實(shí)現(xiàn)的工具，Eyetato 能夠預(yù)測(cè)用戶會(huì)看你的 APP 的哪些地方，而這種預(yù)測(cè)是基于成千上萬(wàn)的真實(shí)的的眼動(dòng)測(cè)試得出的結(jié)果。這款工具能夠幫你更好地洞悉用戶習(xí)慣。

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

錄制視頻很麻煩？現(xiàn)在在這款工具的幫助下，你可以直接在瀏覽器當(dāng)中錄制視頻，非常簡(jiǎn)單，非常實(shí)用。

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

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

八、特別推薦工具

1、設(shè)計(jì)工具時(shí)光機(jī) Time Machine

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

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

除此之外 Prototypr.io 團(tuán)隊(duì)正在開(kāi)發(fā)最新的 Prototypr 3，它會(huì)是一個(gè)改進(jìn)之后更加強(qiáng)大的平臺(tái)，并且為你提供更加出色的設(shè)計(jì)工具。