Prototypr.io 最新一期的設計工具合集來了！這次的合集包含了23 款涵蓋不同領域、針對不同需求的實用工具！無論是圖庫還是各種功能強大的 Figma 插件，應該都切中了許多設計師同學的需求，不過我最喜歡的還是能幫我制作風格超級復古的網(wǎng)頁或者 UI 的 98.css ！

多的不說了，下面來具體看看吧：

?? 色彩和圖標工具

1.?Cone 2.0 →

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

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

2.?Duo?→

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

3.?Line Icons →

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

??? 插畫圖庫

1.?Black Illustrations →

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

2.?Delicious Illustrations →

這是一套以美食為主題的插畫圖標合集，其中包含36套多彩的插畫和80個單色的圖標，所有的都是 SVG 格式的。這套插畫圖庫完整版的售價是9美元，部分插畫是免費的。

3.?404 Illustrations →

誰說 404 報錯頁面一定是無聊的？這個名為 404 Illustrations 的插畫圖庫就是一個超有趣的 404 專用插畫頁面合集，這些插畫設計非常的可愛有趣，并且這些插畫可以在 Sketch 和 Figma 當中編輯！

?? UI 套件

1.?Unit UI Kit →

如何快速開始一個設計項目？UI 套件是一個不錯的入手點。Unit UI Kit 包含了 160 多個不同的免費UI組件，涵蓋了按鈕、文本、選項卡等 UI 組件和不同的頁面，所有的組件都和 Sketch 兼容，你可以輕松地將它們添加到不同的設計當中，并進行自定義。

2.?Contra Wireframe Kit →

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

3.?UI Design Daily →

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

? CSS 資源

1.?Pattern.css →

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

2.?98.css →

如果你是一個懷舊的人，那么你可能會喜歡這個模擬90年代 Windows UI 的 CSS 庫，它可以讓你生成類似 Windows 98 視覺風格的界面。

3.?Dark CSS Generator →

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

?? 學習資源

1.?Product Disrupt 2.0 →

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

2.?User Testing Field Guide →

這是一份實用性很強的用戶測試指南，借助它，你可以滿懷信心地做用戶測試了。它會教你如何設定合理的測試目標，選擇對的測試方法，以及正確的工具。

3.?Coding List →

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

?? 新冠疫情相關

1.?SaaS for COVID →

新冠肺炎導致很多科技公司進行了針對性的調整，很多 SaaS 類的服務都進行了相應的升級和調整，其中不少都降價甚至免費了，更具體的信息，你可以在這個網(wǎng)站看到。

2.?Overcome Financial Crisis →

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

?? 設計工具

1.?Flow →

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

2.?Figma Importer for Framer →

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

3.?Background Generator →

這是一個可以生成自定義背景的生成工具，它旨在將自定義的視覺元素導入到不同的設計項目，或者社交媒體網(wǎng)站當中，你可以通過它的側邊欄的設置功能來進行快速的調整。

4.?Frametastic →

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

5.?Show + Tell for Figma→

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

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

6.?Camille 2.0 →

如果你想為你的移動端設備進行3D 和虛擬現(xiàn)實的設計，那么你可以試試 Camille，它可以幫你的 iOS 和 Android 設備提供最佳的 AR 和 VR 的元素設計，并且能夠導出并進行3D打印。

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

往期干貨：