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

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

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

點贊 33
收藏 121
繼續閱讀相關文章

發表評論 已發布 5

還可以輸入 800 個字
 
 
載入中....
5 收藏