不會寫代碼的設計師要如何實現功能？找到對的工具，壓根不需要代碼知識！所以，在這最新一期的 Prototypr.io 最新設計工具大合集當中，所推薦的不少工具就是為此而生的！快來看看吧！

?? 代碼設計工具

1.?Framer Guide to React →

近年來，React 已經成為了大型 Web 應用中最常用到的 JavaScript 框架。在最新的版本當中，Framer 添加了許多相應的功能，而這份指南能帶你了解相應的理論、語法和工具。

2.?BuilderX →

這是一個基于瀏覽器的設計工具，可以協助生成 React Native 和 React 代碼。BuilderX 致力于彌合設計師和開發者之間的鴻溝，將他們的工作內容整合到同一個平臺上。

3.?Sketch to Code →

借助這個工具，你可以將你所設計的 Sketch 文檔拖進去，就能直接導出相應的配色素材和可供 Xcode 使用的 Swift 代碼。

4.?Kodika.io →

無需任何代碼技能，你可以借助 Kodika.io 通過托拽就能夠直接生成相應的 iOS 應用。無需任何代碼技能，就可以使用成型的模塊構建完整的 iOS 應用。

5.?Material Builder →

Material Builder 是一個快速的、可以自定義的工具，幫你輕松創建美觀且響應迅速的網站。這款搭建工具的基礎是 Bootstrap，可以保持不同部分的一致性。

6.?Divjoy →

這是一個很棒的設計類編碼工具，Divjoy 是一個 React 代碼庫生成器，可以幫你輕松啟動 React 項目，整合素材，選取模板，然后逐步完善整個代碼庫。

?? 插畫圖庫工具

1.?Open Doodles →

Open Doodles 是一個免費的矢量插畫庫，其中所有的涂鴉插畫都是由 Pablo Stanley 所創建。

2.?Vector Illustration Creator →

Vector Illustration Creator 是一個免費的應用，可以在瀏覽器當中直接制作矢量插畫。

3.?Freellustrations?→

Freellustrations 是一個超棒的圖庫，其中包含超高分辨率的背景圖像和矢量插畫，它非常適合在網頁中使用，每周更新。

?? 配色和圖片工具

1.?Culrs Mac →

這款名為 Curls Mac 的應用提供了一種更為簡便快捷的選擇配色方案的方法，它存在于Mac的頂部菜單當中，你隨時可以使用 ?+E 這個快捷鍵去觸發它。

2.?Image Hues →

ImageHues 讓你可以從著名的圖庫網站 Unspalsh 的圖片當中獲取配色方案。

3.?Compress Studio →

Compress.Studio 是一款「去中心化」的無服務器圖像壓縮工具，它是使用類似區塊鏈的機制存在的網絡服務，它的功能也很簡單，選擇圖像，選擇大小，然后壓縮就行了。很有趣！

4.?Upscale Pics →

這是一款類似 Letsenhance.io 這樣的 AI 增強圖片的工具，它可以用來放大圖片而不至于模糊。

5.?Bloom →

Bloom 是一款 AI 驅動的圖片編輯器，它讓你可以對面孔進行精確而逼真的編輯。

?? 設計素材合集

1.?Hellvetica →

你沒看錯，這并非是 Helvetica 字體，Hellvetica 其實是一個雙關語：字體即地獄。設計師 Zack Roif 和 Matthew Woodward 制作的這個網站其實是想激怒全球的平面設計師，來瞅瞅？

2.?Movin Icons →

這是一個純粹的的矢量圖標庫，可以用于 UI 設計，你可以選取任何你喜歡的格式，甚至包括 SVG、JSON 和 XML。

3.?Milk Icons →

Milk Icons 所包含的圖標并不只是牛奶，其中涵蓋了18個不同的類別的圖標，包含 Sketch、AI、SVG、PNG 等不同格式。

4.?Line Awesome →

它是 Icon8 團隊推出的另一優秀產品，是 Font Awesome 這跨農產品的免費替代品，其中包含 1380 個不同的線性圖標！

?? 原型設計

1.?Awesome Design Plugins →

The Flawless App 團隊將所有的適用于 Sketch、XD 和 Figma的插件組織到了一起，你直接看這個合集，不用四處找了。

2.?Animation Desk →

這是一個面向初學者和專業人士的動畫程序，為你提供各種各樣的藝術組件，并且你能導出為不同的格式。

? 設計系統

1.?Design Systems for Developers →

這是一套針對 UI 開發者的設計系統，你可以借助它的 Storybook 指南，學習如何開發設計系統！

2.?Slice Design System →

這是一套模塊化的設計系統，可以幫你創建功能強大且更好的UI。Slice 包含有 760 多種可與 Sketch 和 Figma 一起使用的組件。

?? 樣機工具

1.?Dropshot →

這是一個簡單的數碼設備模型生成器，你可以按照需求來定制，從屏幕尺寸到邊框半徑等等。Dropshot 還可以幫你實時預覽。

?? 產品工具

1.?Figma Product Planner →

這款 Figma 插件為你提供一組預制的模板，可以幫你執行不同的任務，這些模板非常適合進行產品管理，幫你設置不同的目標等等。

2.?Pitch (beta) →

Pitch 是一款可以幫你創建新產品展示的新工具。格式化并不難，而且它提供的協作功能很強大，能夠切實地提高效率。

3.?ClickUp 2.0 →

ClickUp 2.0 幾何了不同的任務管理工具的功能，比如 Asana、Jira、Notion 等，通過跟蹤項目、目標、時間線來提升體驗。

?? 協作和職場工具

1.?Figma Community →

Figma 社區是開發者、設計師和其他用戶一同聯系溝通的地方，你可以在這里分享作品，討論問題。

2.?Matter →

Matter 能夠幫你成為更好的自己，這款反饋類的工具能夠獲取同行的專業反饋，以便幫你提高技能。

作者: Sofia
編輯: Graeme
編譯：陳子木