編者按：這是 Prototypr.io 在2020年出的第一套設計工具合集，其中所涵蓋的設計工具和素材類型涵蓋了多個不同的領域，實用性沒得說。

這是 2020 年的第一波實用的設計干貨合集！這次的合集當中包含了26 款有趣且實用的設計工具和素材。這些工具很好地反應出當下的設計趨勢——它們涇渭分明地分為「實用代碼做設計」和「完全無需代碼做設計」這兩種趨勢。下面我們具體看一下吧：

?? 配色和字體

1.?Gradienta →

為你的設計項目提供超過150種 CSS 色彩漸變，Gradienta 是一款開源工具，它提供了 JPG、PNG、SVG 等格式的可下載素材，并且根據需求選擇尺寸。此外，這款工具是完全符合 MIT 許可的。

2.?Cover Colors →

這是一套基于音樂專輯封面來生成配色方案的工具，這樣你就不會因為無休止的配色選擇而感到不知所措了。

3.?Leonardo →

這是一款開源配色生成器，它會基于對不對需求來生成配色方案。你只需要選擇好配色和對比度，然后復制結果，就能在你自己的設計當中使用了！

4.?Litur →

這款 iOS 配色工具讓你可以隨時隨地搜集周圍的配色，它會根據你的選擇的色彩，提供不同的配色組合。此外，它還有創建完整的配色方案，讓你在設計的時候直接用上。

5.?Fonts Ninja →

Fonts Ninja 可以在你瀏覽字體的時候，快速識別它，這樣方便你在設計當中使用。

6.?Handy Font →

這是 5 款手寫英文字體的合集，Handy Fonts 提供不同格式的文件供你使用，包括 OTF 和 WOFF。每款字體都包含有 300 個不同的字形和符號，全部的標點符號和西文字體的支持。

?? 平面設計

1.?Vectornator Pro for Mac →

Mac版的 Vectornator 是一款設計工具，其中包含有一組強大的矢量工具，并且可以快速啟動，并且可以實時協作。

?? 無代碼工具

1.?Bravo Studio →

Bravo Studio 是一款無需代碼的移動端 APP 構建工具，它能夠將 Figma 原型轉換成為 iOS 和 Android 應用，全過程無需代碼。

2.?Appratio →

Appratio 是一款無代碼應用構建工具，使用托拽控件快速完成布局和功能，然后創建 iOS、Android 和 Web 應用。這款工具可以靈活快速地自定義應用中的任何內容。

3.?Slides 5 →

Slides 5 是一款靜態網站構建工具，這款工具帶有不同的模塊和模板，你可以為自己的項目進行自定義設計。

4.?Fronty →

Fronty 是一款基于 AI 的圖片轉 HTML 轉換器，這款工具可以與 HTMl 和 CSS 一起使用，因此你可以將圖片輕松變成真實的網站，無需編寫代碼的能力。

?? 原型和線框圖工具

1.?Figma Auto Layout →

Figma 一直在傾聽用戶的需求并隨之不斷發展，如今添加了自動布局功能，這意味著按鈕可以根據文本大小進行調整，移動某個控件的時候，布局會隨之自動調整，嵌套元素會隨著內容進行自動調整。

2.?Figma Mobile Upload →

在進行了頭腦風暴和集體討論之后，這款工具就可以充當草圖和數字設計之間的橋梁，你所需要做的是將你所拍攝的照片借助這個工具，放到 Figma 文件當中。它是團隊協作的利器。

3.?Third →

Third 是一款插件，讓你可以在 Figma 當中導入、添加光源、渲染。它能夠進行高分辨率的渲染，支持多種不同的 3D 對象和模型。

4.?Wireframer →

你可以使用這款工具來提升線框圖中的文本。Wireframer 包含獨特的可定制的 SVG 元素，你可以根據項目調整其中的樣式。

5.?Pixelworm →

為了確保你的設計能夠正確地落地，Pixelworm 是為移動端的設計和開發所準備的，它能夠檢查代碼是否和 Sketch 文件相匹配。

?? 代碼工具

1.?React Cosmos 5 →

你可以使用 React Cosmos 5 來構建可擴展的 UI。借助這款工具，你可以輕松地測試和迭代 React 組件，輕松調試代碼，創建和發布組件庫。

2.?Looop.dev →

使用?Looop.dev 可以制作 Canvas/WebGL 動畫原型！這是一個基于 Web 的創意編碼工具，并且已經擁有一堆可供學習和使用的資源。

3.?Zecoda →

Zecode 可以立即將你的 Sketch 項目轉化成為 Vue.JS ，這意味著你可以將你的設計迅速變化成為響應迅速的網站。

4.?Uplaunch →

Uplaunch 是一系列「Coming soon」頁面的幾何，這套庫里面包含了可與 Mailchimp 和 Zapier 集成的 HTML5/CSS3/JS模板，除此之外 Uplaunch 還附帶了 Sketch、Figma 和 PSD響應的源文件。

5.?ApiFlash →

使用 ApiFlash，你可以從網址直接捕獲整個頁面和移動端界面的截圖！這個 API 可以讓你控制界面大小、比例、CSS 和 JS 注入等。

? 產品和項目管理

1.?Product Management Tactics Vol. 3 →

這是關于產品管理和策略的免費電子書。這一卷當中包含了 Basecamp、Superhuman、Walmart 等公司產品負責人對于不同主題的見解。除此之外，剩下的內容是針對 2019 年產品會議中和行業相關的頂級演講。

2.?Sizle →

Sizle 提供了一種更快的方式來構建出色的演示文稿，它包括專業的模板，平滑效果和分析工具。此外，它還具有極簡的用戶界面，易于瀏覽。Sizle 的鏈接跟蹤功能和高 FPS 動畫可以確保演示過程中的順暢和引人入勝。

3.?Pizdata App →

Pizdata 是一款 web 應用，能夠幫你更快完成設計任務。這款工具非常適合初創企業使用。

4.?Gantt →

這款工具能夠以精美的方式來呈現項目時間表，Gantt.io 包含有各種不同的模板，直觀高效的界面，多用戶編輯功能以及高分辨率導出功能。

??? 彩蛋

1.?TiltMaps v2 →

這款有趣的工具能夠讓你自由地創建地球上任何地方的地圖海報！只需要輸出位置名稱即可！

如果你對于干貨素材感興趣，不妨看看去年的干貨合集：