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

??插畫和頭像

1. Fresh Folk →

這是本月最好的圖庫之一，F(xiàn)resh Folk 提供精美的插畫，以及豐富的可供混搭的元素。

2. 100,000 Faces →

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

3. Glaze →

Glaze 是一個(gè)高素質(zhì)的插畫內(nèi)容平臺，提供超高質(zhì)量的免費(fèi)插畫素材。

4. Faces →

Faces 是一組沒有背景的人臉頭像素材，你可以在商用項(xiàng)目中使用，因?yàn)樗裱氖荂C0許可。

?? 色彩工具

1. CopyPalette →

CopyPalette 可以生成 SVG 格式的調(diào)色板，你可以通過復(fù)制粘貼將它直接添加到你的 Sketch 或者 Figma 項(xiàng)目當(dāng)中去。

2. Color System Plugin for Sketch →

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

?? 設(shè)計(jì)資源合集

1. Email Love →

這是一個(gè)給郵件愛好者額郵件模板和設(shè)計(jì)靈感合集，它可以幫你更好地創(chuàng)建電子郵件。

2. Flawwwless UI Icons →

這是一個(gè)包含250多個(gè)開源的 React.js 圖標(biāo)的強(qiáng)大素材庫，你可以在設(shè)計(jì)中使用，只需要單擊圖標(biāo)，然后復(fù)制粘貼代碼即可。

3. Leon Sans →

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

4. Humans →

這是一個(gè)網(wǎng)站合集，從React、Angular 到 WP，你可以從這些個(gè)人網(wǎng)站中汲取設(shè)計(jì)和開發(fā)的靈感，充分展示你的想法和才華。

5. Freebies.ByPeople →

這是一個(gè)面向設(shè)計(jì)師和開發(fā)者的免費(fèi)商用資源合集，這里有上百個(gè)不同的圖標(biāo)包、UI工具包和字體等。

?? 原型工具

1. Figgy →

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

2. Figmac →

Figmac 是一款輕量級的 Figam 桌面端應(yīng)用，它可以提供更加自然的 Mac 端的體驗(yàn)，并且完全免費(fèi)。

3. Naker.Back →

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

4. Dimensions →

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

5. Easometric →

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

6. Airtable to Figma →

這個(gè)插件讓你可以在 Figma 當(dāng)中直接調(diào)用 Airtable 的數(shù)據(jù)，借助它，你可以直接其中的文本和圖像直接調(diào)用過來，也可以將 Airtable 中的數(shù)據(jù)字段映射到組件和圖層當(dāng)中，甚至選擇你喜歡的布局。

7. FontKey →

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

? 設(shè)計(jì)系統(tǒng)

1. InVision DSM →

InVision 設(shè)計(jì)系統(tǒng)管理器可以連通設(shè)計(jì)師和開發(fā)者的工作流程，充分發(fā)揮團(tuán)隊(duì)的創(chuàng)造力。

2. UI Bakery →

這是一個(gè)用來構(gòu)建前端 APP 的定制化的設(shè)計(jì)系統(tǒng)，UI Bakery 是一個(gè)較少使用代碼的平臺，可以降低開發(fā)成本。

?? 設(shè)計(jì)轉(zhuǎn)代碼工具

1. React Figma →

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

• ?? 靈感源自于 react-sketchapp 這款工具
• ?? 被設(shè)計(jì)來用來創(chuàng)建可管理的設(shè)計(jì)系統(tǒng)
• ?? 靈活的布局支持
• ?? 支持 Hydration
• ?? 基于 Figma 的插件 API 創(chuàng)建

2. Builder →

Builder 是一個(gè)使用托拽來構(gòu)建網(wǎng)站布局的工具，Builder 適合用來構(gòu)建著陸頁、營銷站點(diǎn)等等。它可以靈活支持不同的 API。

3. Shade →

這是一個(gè)適合初創(chuàng)公司使用的免費(fèi)著陸頁，Shade HTML 模板使用的是 Bootstrap 構(gòu)建的，你可以在它的基礎(chǔ)上快速構(gòu)建專業(yè)的著陸頁。

4. Froala Pages →

使用 Froala Pages ，你可以快速創(chuàng)建和編輯 Javascript 網(wǎng)頁，它是高度模塊化的設(shè)計(jì)系統(tǒng)，可以減少操作流程中額外的工作。

?? 樣機(jī)工具

1. Apple Mockups →

這是最新的蘋果設(shè)備的樣機(jī)素材，你可有單獨(dú)購買或者打包購買，當(dāng)然還有免費(fèi)的樣機(jī)可供領(lǐng)取和下載。

2. uiprint →

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

3. Shots Mockups →

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

?? 其他工具

1. Flawless Feedback 2.0 →

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

2. VisualEyes →

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

3. Epilepsy UX →

在設(shè)計(jì)當(dāng)中，可訪問性是關(guān)鍵因素，而這款 Figma 插件能夠幫你檢測你的設(shè)計(jì)對于患有癲癇的用戶是否安全穩(wěn)妥。

4. Feedback by Pixelic →

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

?? 效率工具

1. Represent →

Represent 讓你無需離開 Sketch 就可以無縫地向客戶展示你的設(shè)計(jì)，實(shí)時(shí)、遠(yuǎn)程可操作、高效。

2. Poda →

Poda 是一款簡單、視覺化地定義、共享產(chǎn)品策略的工具，可以提供更加統(tǒng)一的組織架構(gòu)。

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