圖庫樣機神器應有盡有！11 月份精選設計干貨大合集

最新的 Prototypr.io 的實用設計工具合集來了！這個月推薦了總計33款設計類的工具，涵蓋了圖庫、素材合集、原型、樣機、效率等多個不同類別的工具，精挑細選品類齊全！

??插畫和頭像

1. Fresh Folk →

這是本月最好的圖庫之一，Fresh Folk 提供精美的插畫，以及豐富的可供混搭的元素。

2. 100,000 Faces →

這套素材庫是由 AI 生成的超過10萬個可供免費使用的逼真人臉，這套工具是完全免費的，并且提供多種選項供你選擇。

3. Glaze →

Glaze 是一個高素質的插畫內容平臺，提供超高質量的免費插畫素材。

4. Faces →

Faces 是一組沒有背景的人臉頭像素材，你可以在商用項目中使用，因為它遵循的是CC0許可。

?? 色彩工具

1. CopyPalette →

CopyPalette 可以生成 SVG 格式的調色板，你可以通過復制粘貼將它直接添加到你的 Sketch 或者 Figma 項目當中去。

2. Color System Plugin for Sketch →

這是一個 Sketch 插件，對于UI設計師來說，它一鍵生成深色模式和淺色模式的功能，絕對夠良心。

?? 設計資源合集

1. Email Love →

這是一個給郵件愛好者額郵件模板和設計靈感合集，它可以幫你更好地創建電子郵件。

2. Flawwwless UI Icons →

這是一個包含250多個開源的 React.js 圖標的強大素材庫，你可以在設計中使用，只需要單擊圖標，然后復制粘貼代碼即可。

3. Leon Sans →

Leon Sans 是 Jongmin Kim 使用代碼所創作的一款幾何無襯線字體，你可以通過它的 HTML5 代碼和 Canvas 元素來定制動畫、效果和形狀。

4. Humans →

這是一個網站合集，從React、Angular 到 WP，你可以從這些個人網站中汲取設計和開發的靈感，充分展示你的想法和才華。

5. Freebies.ByPeople →

這是一個面向設計師和開發者的免費商用資源合集，這里有上百個不同的圖標包、UI工具包和字體等。

?? 原型工具

1. Figgy →

這是一款自帶深色模式的 Figma 原生工具，它自帶深色模式，可以調用 Mac 本地的系統字體、選項卡、菜單和按鈕樣式，適用于幾乎所有的插件。

2. Figmac →

Figmac 是一款輕量級的 Figam 桌面端應用，它可以提供更加自然的 Mac 端的體驗，并且完全免費。

3. Naker.Back →

這是一款簡單的編輯器，用來創建交互式的背景和漸變效果。你可以使用現有的模板來創建屬于自己的模板，然后將它嵌入到你自己的網站當中，也可以用在自己的手機和電腦當中。

4. Dimensions →

Dimensions 是一款可以在瀏覽器中直接測量不同元素的工具，它可以測量圖像、視頻、輸入字段、按鈕等等。如果你無法測量瀏覽器中的元素大小，用 Dimensions 是非常方便的。

5. Easometric →

在使用 Figma 創建等軸測元素的時候，Easometric 是一個非常有用的工具，這款工具能很好地創建等軸測圖，它所使用的技術被稱為 SSR30?，它可以幫助你快速創建左右等軸測圖。

6. Airtable to Figma →

這個插件讓你可以在 Figma 當中直接調用 Airtable 的數據，借助它，你可以直接其中的文本和圖像直接調用過來，也可以將 Airtable 中的數據字段映射到組件和圖層當中，甚至選擇你喜歡的布局。

7. FontKey →

這是一種全新的查找、制作和分享字體的工具。在你找到適合自己的字體之前，FontKey 會隨機顯示不同的字體選項，此外，你還可以快速獲取網站代碼和共享。

? 設計系統

1. InVision DSM →

InVision 設計系統管理器可以連通設計師和開發者的工作流程，充分發揮團隊的創造力。

2. UI Bakery →

這是一個用來構建前端 APP 的定制化的設計系統，UI Bakery 是一個較少使用代碼的平臺，可以降低開發成本。

?? 設計轉代碼工具

1. React Figma →

這是一個可以將 React 組件渲染到 Figma 的工具

• ?? 靈感源自于 react-sketchapp 這款工具
• ?? 被設計來用來創建可管理的設計系統
• ?? 靈活的布局支持
• ?? 支持 Hydration
• ?? 基于 Figma 的插件 API 創建

2. Builder →

Builder 是一個使用托拽來構建網站布局的工具，Builder 適合用來構建著陸頁、營銷站點等等。它可以靈活支持不同的 API。

3. Shade →

這是一個適合初創公司使用的免費著陸頁，Shade HTML 模板使用的是 Bootstrap 構建的，你可以在它的基礎上快速構建專業的著陸頁。

4. Froala Pages →

使用 Froala Pages ，你可以快速創建和編輯 Javascript 網頁，它是高度模塊化的設計系統，可以減少操作流程中額外的工作。

?? 樣機工具

1. Apple Mockups →

這是最新的蘋果設備的樣機素材，你可有單獨購買或者打包購買，當然還有免費的樣機可供領取和下載。

2. uiprint →

uiprint 為你可供打印的樣機和線框圖模板，這樣你可以打印出來，在紙上快速繪制和構建你的想法，這套素材是由 Vijay Verma 創建。

3. Shots Mockups →

這是可以在 Dribbble 和 Instagram 上使用的樣機，它有專門供 Sketch、Figma 和 Adobe XD 使用的格式。

?? 其他工具

1. Flawless Feedback 2.0 →

這是一個非常使用的反饋工具，能夠讓你的 iOS 應用擁有更完美的視覺反饋。最新的 Flawless Feedback 2.0 有著更快的 APP鏡像，反饋分組，也可以更快地進行協作。

2. VisualEyes →

這是一個由 AI 驅動的注意力熱圖工具，可以幫你構建更好的 UI，它有適用于 Sketch、Figma 和 Adobe XD 的插件。

3. Epilepsy UX →

在設計當中，可訪問性是關鍵因素，而這款 Figma 插件能夠幫你檢測你的設計對于患有癲癇的用戶是否安全穩妥。

4. Feedback by Pixelic →

這款工具能夠直接向你的UI界面添加反饋，通過加德納你的版本控制讓文件系統井井有條。

?? 效率工具

1. Represent →

Represent 讓你無需離開 Sketch 就可以無縫地向客戶展示你的設計，實時、遠程可操作、高效。

2. Poda →

Poda 是一款簡單、視覺化地定義、共享產品策略的工具，可以提供更加統一的組織架構。

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