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

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

?? 配色和字體

1.?Gradienta →

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

2.?Cover Colors →

這是一套基于音樂專輯封面來生成配色方案的工具，這樣你就不會(huì)因?yàn)闊o休止的配色選擇而感到不知所措了。

3.?Leonardo →

這是一款開源配色生成器，它會(huì)基于對不對需求來生成配色方案。你只需要選擇好配色和對比度，然后復(fù)制結(jié)果，就能在你自己的設(shè)計(jì)當(dāng)中使用了！

4.?Litur →

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

5.?Fonts Ninja →

Fonts Ninja 可以在你瀏覽字體的時(shí)候，快速識別它，這樣方便你在設(shè)計(jì)當(dāng)中使用。

6.?Handy Font →

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

?? 平面設(shè)計(jì)

1.?Vectornator Pro for Mac →

Mac版的 Vectornator 是一款設(shè)計(jì)工具，其中包含有一組強(qiáng)大的矢量工具，并且可以快速啟動(dòng)，并且可以實(shí)時(shí)協(xié)作。

?? 無代碼工具

1.?Bravo Studio →

Bravo Studio 是一款無需代碼的移動(dòng)端 APP 構(gòu)建工具，它能夠?qū)?Figma 原型轉(zhuǎn)換成為 iOS 和 Android 應(yīng)用，全過程無需代碼。

2.?Appratio →

Appratio 是一款無代碼應(yīng)用構(gòu)建工具，使用托拽控件快速完成布局和功能，然后創(chuàng)建 iOS、Android 和 Web 應(yīng)用。這款工具可以靈活快速地自定義應(yīng)用中的任何內(nèi)容。

3.?Slides 5 →

Slides 5 是一款靜態(tài)網(wǎng)站構(gòu)建工具，這款工具帶有不同的模塊和模板，你可以為自己的項(xiàng)目進(jìn)行自定義設(shè)計(jì)。

4.?Fronty →

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

?? 原型和線框圖工具

1.?Figma Auto Layout →

Figma 一直在傾聽用戶的需求并隨之不斷發(fā)展，如今添加了自動(dòng)布局功能，這意味著按鈕可以根據(jù)文本大小進(jìn)行調(diào)整，移動(dòng)某個(gè)控件的時(shí)候，布局會(huì)隨之自動(dòng)調(diào)整，嵌套元素會(huì)隨著內(nèi)容進(jìn)行自動(dòng)調(diào)整。

2.?Figma Mobile Upload →

在進(jìn)行了頭腦風(fēng)暴和集體討論之后，這款工具就可以充當(dāng)草圖和數(shù)字設(shè)計(jì)之間的橋梁，你所需要做的是將你所拍攝的照片借助這個(gè)工具，放到 Figma 文件當(dāng)中。它是團(tuán)隊(duì)協(xié)作的利器。

3.?Third →

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

4.?Wireframer →

你可以使用這款工具來提升線框圖中的文本。Wireframer 包含獨(dú)特的可定制的 SVG 元素，你可以根據(jù)項(xiàng)目調(diào)整其中的樣式。

5.?Pixelworm →

為了確保你的設(shè)計(jì)能夠正確地落地，Pixelworm 是為移動(dòng)端的設(shè)計(jì)和開發(fā)所準(zhǔn)備的，它能夠檢查代碼是否和 Sketch 文件相匹配。

?? 代碼工具

1.?React Cosmos 5 →

你可以使用 React Cosmos 5 來構(gòu)建可擴(kuò)展的 UI。借助這款工具，你可以輕松地測試和迭代 React 組件，輕松調(diào)試代碼，創(chuàng)建和發(fā)布組件庫。

2.?Looop.dev →

使用?Looop.dev 可以制作 Canvas/WebGL 動(dòng)畫原型！這是一個(gè)基于 Web 的創(chuàng)意編碼工具，并且已經(jīng)擁有一堆可供學(xué)習(xí)和使用的資源。

3.?Zecoda →

Zecode 可以立即將你的 Sketch 項(xiàng)目轉(zhuǎn)化成為 Vue.JS ，這意味著你可以將你的設(shè)計(jì)迅速變化成為響應(yīng)迅速的網(wǎng)站。

4.?Uplaunch →

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

5.?ApiFlash →

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

? 產(chǎn)品和項(xiàng)目管理

1.?Product Management Tactics Vol. 3 →

這是關(guān)于產(chǎn)品管理和策略的免費(fèi)電子書。這一卷當(dāng)中包含了 Basecamp、Superhuman、Walmart 等公司產(chǎn)品負(fù)責(zé)人對于不同主題的見解。除此之外，剩下的內(nèi)容是針對 2019 年產(chǎn)品會(huì)議中和行業(yè)相關(guān)的頂級演講。

2.?Sizle →

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

3.?Pizdata App →

Pizdata 是一款 web 應(yīng)用，能夠幫你更快完成設(shè)計(jì)任務(wù)。這款工具非常適合初創(chuàng)企業(yè)使用。

4.?Gantt →

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

??? 彩蛋

1.?TiltMaps v2 →

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

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