編者按：這是 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 →

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

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

閱讀文章 >>

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極5網站_2020年第一波實用設計工具合集