七月干貨來了！29款超實用設(shè)計工具合集

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

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

一、插畫圖庫

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.?UI 框架 Storefront UI →

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

三、樣機(jī)工具

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

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

2.?視覺稿工具 Hamok →

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

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

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

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

1.? Colors & Fonts →

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

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

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

五、協(xié)作工具

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

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

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

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

3.?文檔集成工具 FYI →

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

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

1.?Polypane →

Polypane 是本月非常火的一款工具，它可以用來創(chuàng)建網(wǎng)站和 APP，全程在瀏覽器中完成。它適合開發(fā)者、設(shè)計師、產(chǎn)品經(jīng)理、QA 以及任何通過網(wǎng)絡(luò)來工作的人使用。

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

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

3.?CSS動畫工具 CSS Wand →

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

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

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

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

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

七、用戶研究工具

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

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

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

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

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

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

八、特別推薦工具

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

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

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

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