Prototypr.io 最新一期的設(shè)計(jì)工具合集來(lái)了！這次的合集包含了23 款涵蓋不同領(lǐng)域、針對(duì)不同需求的實(shí)用工具！無(wú)論是圖庫(kù)還是各種功能強(qiáng)大的 Figma 插件，應(yīng)該都切中了許多設(shè)計(jì)師同學(xué)的需求，不過(guò)我最喜歡的還是能幫我制作風(fēng)格超級(jí)復(fù)古的網(wǎng)頁(yè)或者 UI 的 98.css ！

多的不說(shuō)了，下面來(lái)具體看看吧：

?? 色彩和圖標(biāo)工具

1.?Cone 2.0 →

這是一個(gè)適合在 iPhone 上使用的實(shí)時(shí)取色工具，它可以幫你識(shí)別潘通色，根據(jù)鏡頭取景框生成 Color Bucket，并且能夠借助「色盲模式」來(lái)幫你規(guī)避可能有風(fēng)險(xiǎn)的配色。

此外，這款 APP 還附帶有 iPhone 和 Apple Watch 云同步功能，讓你隨時(shí)使用之前自己創(chuàng)建的 Color Bucket。

2.?Duo?→

Duo 是 Alex Pate 所創(chuàng)建的一套包含 100 種不同配色的合集，這些配色可以直接使用，也可以在 JSON 中使用，讓你可以非常便捷地添加到網(wǎng)頁(yè)當(dāng)中。

3.?Line Icons →

這是一組為設(shè)計(jì)師和開發(fā)者準(zhǔn)備的線性圖標(biāo)合集，包含 2000 款圖標(biāo)，所有的圖標(biāo)包含有不同的格式：SVG、AI、Web字體等等。你可以在其中找到包含商業(yè)、通訊、食物等各種不同的類別。這個(gè)版本是完全免費(fèi)的。

??? 插畫圖庫(kù)

1.?Black Illustrations →

這是由 John D.Saunders 所創(chuàng)建的關(guān)于有色人種的免費(fèi)插畫圖庫(kù)，插畫中包含了30多種不同格式的高清插畫，包括 JPG、PNG 和 Sketch 等格式。和很多插畫圖庫(kù)類似，這里的插畫圖庫(kù)都是可定制元素的，值得試試。

2.?Delicious Illustrations →

這是一套以美食為主題的插畫圖標(biāo)合集，其中包含36套多彩的插畫和80個(gè)單色的圖標(biāo)，所有的都是 SVG 格式的。這套插畫圖庫(kù)完整版的售價(jià)是9美元，部分插畫是免費(fèi)的。

3.?404 Illustrations →

誰(shuí)說(shuō) 404 報(bào)錯(cuò)頁(yè)面一定是無(wú)聊的？這個(gè)名為 404 Illustrations 的插畫圖庫(kù)就是一個(gè)超有趣的 404 專用插畫頁(yè)面合集，這些插畫設(shè)計(jì)非常的可愛有趣，并且這些插畫可以在 Sketch 和 Figma 當(dāng)中編輯！

?? UI 套件

1.?Unit UI Kit →

如何快速開始一個(gè)設(shè)計(jì)項(xiàng)目？UI 套件是一個(gè)不錯(cuò)的入手點(diǎn)。Unit UI Kit 包含了 160 多個(gè)不同的免費(fèi)UI組件，涵蓋了按鈕、文本、選項(xiàng)卡等 UI 組件和不同的頁(yè)面，所有的組件都和 Sketch 兼容，你可以輕松地將它們添加到不同的設(shè)計(jì)當(dāng)中，并進(jìn)行自定義。

2.?Contra Wireframe Kit →

Contra 是一款開源的線框圖設(shè)計(jì)框架，其中包含 150 多個(gè)組件和 50 多屏的組件，可以供你快速地繪制線框圖和原型。這套組件工具包當(dāng)中還包含了 Pablo Stanley 和 Open Peeps 的插畫。Cointra 可以用于 Figma、Sketch 和 Studio，無(wú)論商用還是個(gè)人使用都是免費(fèi)的。

3.?UI Design Daily →

UI Design Daily 是 Ildiko Gaspar 所創(chuàng)建的一個(gè)是設(shè)計(jì)內(nèi)容推薦平臺(tái)，其中包含有不同的 UI 設(shè)計(jì)項(xiàng)目和相應(yīng)的源文件。它是完全免費(fèi)的，無(wú)限制使用。這些源文件兼容 Sketch、Figma 和 Adobe XD 等軟件。

? CSS 資源

1.?Pattern.css →

這是一套 CSS 背景圖案庫(kù)，Pattern.css 當(dāng)中包含數(shù)十個(gè)不同的圖案，你可以直接下載使用，也可以使用 npm 來(lái)安裝它。

2.?98.css →

如果你是一個(gè)懷舊的人，那么你可能會(huì)喜歡這個(gè)模擬90年代 Windows UI 的 CSS 庫(kù)，它可以讓你生成類似 Windows 98 視覺風(fēng)格的界面。

3.?Dark CSS Generator →

為了緩解視覺疲勞，越來(lái)越多的人開始選擇深色模式，而 Kasloyan 和 Stanislav 創(chuàng)建的這個(gè) Dark CSS Generator 則可以快速地將任何網(wǎng)頁(yè)切換為深色主題。

?? 學(xué)習(xí)資源

1.?Product Disrupt 2.0 →

Product Disrupt 匯集了很多精選的設(shè)計(jì)資源，來(lái)學(xué)習(xí)產(chǎn)品設(shè)計(jì)，從博客文章，到音頻播客、圖書、Youtube 頻道等等。這個(gè)平臺(tái)旨在為你提供自由且相對(duì)精準(zhǔn)的學(xué)習(xí)資源指引，此外，它還針對(duì)產(chǎn)品設(shè)計(jì)不同階段的學(xué)習(xí)參考指引，進(jìn)行了劃分。

2.?User Testing Field Guide →

這是一份實(shí)用性很強(qiáng)的用戶測(cè)試指南，借助它，你可以滿懷信心地做用戶測(cè)試了。它會(huì)教你如何設(shè)定合理的測(cè)試目標(biāo)，選擇對(duì)的測(cè)試方法，以及正確的工具。

3.?Coding List →

如果你真的想學(xué)代碼，那么這份編程開發(fā)課程表單，一定要收下。它能夠幫你找到你所需要的技能對(duì)應(yīng)的知識(shí)和教程。

?? 新冠疫情相關(guān)

1.?SaaS for COVID →

新冠肺炎導(dǎo)致很多科技公司進(jìn)行了針對(duì)性的調(diào)整，很多 SaaS 類的服務(wù)都進(jìn)行了相應(yīng)的升級(jí)和調(diào)整，其中不少都降價(jià)甚至免費(fèi)了，更具體的信息，你可以在這個(gè)網(wǎng)站看到。

2.?Overcome Financial Crisis →

這是一本免費(fèi)的電子書，內(nèi)容是關(guān)于設(shè)計(jì)師如何對(duì)抗經(jīng)濟(jì)上的危機(jī)，如何有效地應(yīng)對(duì)各種財(cái)務(wù)狀況上的問(wèn)題，如何更好地管理自己的工作和生活。

?? 設(shè)計(jì)工具

1.?Flow →

Flow 是一款動(dòng)畫工具，但是它同時(shí)還能導(dǎo)出可用的代碼。一方面，它可以接納來(lái)自 Sketch 的設(shè)計(jì)文檔，另一方面，它又能將動(dòng)畫導(dǎo)出到 Lottie、aSVG、iOS、HTML 和 React 上使用，它有緩動(dòng)，有多種格式和分辨率，有定制化的代碼模板。

2.?Figma Importer for Framer →

這款工具能夠?qū)⒛愕?Figma 中做好的設(shè)計(jì)導(dǎo)入到 Framer 當(dāng)中，并且快速創(chuàng)建交互式的原型。你可以輕松地構(gòu)建靜態(tài)原型，甚至 UI ，將想法快速變成現(xiàn)實(shí)！它目前加入了更加開放的工作流程，讓團(tuán)隊(duì)協(xié)作更加具有競(jìng)爭(zhēng)優(yōu)勢(shì)。

3.?Background Generator →

這是一個(gè)可以生成自定義背景的生成工具，它旨在將自定義的視覺元素導(dǎo)入到不同的設(shè)計(jì)項(xiàng)目，或者社交媒體網(wǎng)站當(dāng)中，你可以通過(guò)它的側(cè)邊欄的設(shè)置功能來(lái)進(jìn)行快速的調(diào)整。

4.?Frametastic →

Frametastic 是一個(gè)Figma 插件，可以在不同的窗口中測(cè)試你的設(shè)計(jì)，你需要做的，就是保存好你最喜歡的幀組合，添加約束，然后讓這款插件來(lái)幫你進(jìn)行測(cè)試。

5.?Show + Tell for Figma→

Show + Tell 是一個(gè)全新的插件，它可以幫你在 Figma 當(dāng)中創(chuàng)建演示文稿。可是，為什么是在 Figma 內(nèi)做這個(gè)事情？原因很簡(jiǎn)單：效率+速度。做設(shè)計(jì)項(xiàng)目的同時(shí)完成演示文稿的設(shè)計(jì)不是很自然而然的事情嗎？沒有必要換軟件，而且 Figma 能帶來(lái)頗為不錯(cuò)的保真度。

此外，這款插件還能實(shí)現(xiàn)自動(dòng)滾屏、支持任意尺寸，并且能夠讓框架和組件始終保持最新，在展示的同時(shí)無(wú)縫地展示原型，無(wú)需切換應(yīng)用，并且能夠通過(guò)鏈接進(jìn)行分享。

6.?Camille 2.0 →

如果你想為你的移動(dòng)端設(shè)備進(jìn)行3D 和虛擬現(xiàn)實(shí)的設(shè)計(jì)，那么你可以試試 Camille，它可以幫你的 iOS 和 Android 設(shè)備提供最佳的 AR 和 VR 的元素設(shè)計(jì)，并且能夠?qū)С霾⑦M(jìn)行3D打印。

原文作者：Sofia
原文鏈接：Black Illustrations, 98.CSS, Product Disrupt and 19 more tools!

往期干貨：