新年新氣象，宅家做設(shè)計(jì)搞開發(fā)的同學(xué)似乎效率都提升，這個(gè)月 Prototypr.io 這個(gè)月的設(shè)計(jì)工具大合集當(dāng)中，涵蓋了 10 個(gè)不同類別，功能豐富多樣的新玩意！這次的合集當(dāng)中有很多令人眼前一亮的好東西，比如驚艷的圖庫網(wǎng)站 Open Peeps，基于人智能的關(guān)鍵詞配色生成器，還有可以超快借鑒你所喜歡網(wǎng)站的配色和樣式的 Figma 插件！

往期干貨也非常給力：

下面快來看看吧！

??? 插畫圖庫

1.?Open Peeps →

Open Peeps 是一個(gè)最新的手繪圖庫，它提供給你相當(dāng)充裕的創(chuàng)作空間，你可以在它提供的平臺(tái)上對(duì)人物角色以及所處的場(chǎng)景進(jìn)行自定義，這樣就可以應(yīng)用于你自己的設(shè)計(jì)作品當(dāng)中。

2.?ITG.digital →

ITG 是一個(gè)在線的插畫生成工具，只需幾分鐘，你就可以創(chuàng)建獨(dú)特的、富有故事性的插畫，在這個(gè)過程中，你可以調(diào)用不同的元素來進(jìn)行搭配，定制性極強(qiáng)。你可以將這些插畫應(yīng)用在APP、網(wǎng)站和社交媒體上，非常不錯(cuò)~

3.?Lottiefiles for Figma →

Lottiefiles 也是最近超級(jí)熱的一款 Figma 插件，能夠幫你將各種免費(fèi)的 Lottie 動(dòng)畫轉(zhuǎn)為 GIF 和 SVG 插入到你的設(shè)計(jì)當(dāng)中。如果你正在找最新的、有用的 Figma 插件，一定要看下面這篇文章：

?? 配色工具

1.?Vangogh →

這是一個(gè)使用人工智能驅(qū)動(dòng)的配色工具，它能夠根據(jù)你要的關(guān)鍵詞幫你找到合適的配色方案。這款工具借助機(jī)器學(xué)習(xí)的技術(shù)，在網(wǎng)上數(shù)以百萬計(jì)的圖片中搜索、獲取配色，并且生成符合你的關(guān)鍵詞的配色。

2.?Color Safe →

Color Safe 是為你提供對(duì)比度良好、符合 WCAG 規(guī)范的配色方案，這樣的配色方案有著更加優(yōu)良的可訪問性，帶來更加優(yōu)秀的用戶體驗(yàn)。

3.?Colors & Fonts 4.0 →

來自 Michael Andreuzza 的配色庫 Colors & Fonts 升級(jí)到 4.0 了，這個(gè)工具又一次升級(jí)改進(jìn)，最新版支持下載 Figma 格式的配色我二年，支持 Tailwind CSS，支持顏色選擇器，支持漸變圖案和顏色代碼轉(zhuǎn)換。它們對(duì)于數(shù)字設(shè)計(jì)的支持越來越好了，值得使用！

?? 設(shè)計(jì)資訊和資源

1.?Vincent →

Vincent 是一個(gè)每日設(shè)計(jì)和前端相關(guān)的設(shè)計(jì)新聞資訊的 APP，目前它主要推出了 iOS 版的，并且 Android 版也將很快安排上。作為一個(gè)垂直領(lǐng)域的聚合閱讀工具，Vincent 非常適合想要第一時(shí)間了解最新設(shè)計(jì)資訊的同學(xué)。

2.?DesignValley →

DesignValley 是一個(gè)設(shè)計(jì)師和設(shè)計(jì)愛好者的精選工具誒機(jī)，你會(huì)在 DesignValley 中投遞、發(fā)現(xiàn)和共享自己喜歡的設(shè)計(jì)素材和設(shè)計(jì)資源。在一個(gè)地方找到你所有的設(shè)計(jì)工具，它的價(jià)值是非凡的。

3.?FrontendSource →

FrontendSource 是一個(gè)給設(shè)計(jì)師和前端開發(fā)者的資源合集，從 Vue、React 到 Jekyll、Gatsby、HTML 等各種資源一應(yīng)俱全。除此之外，這個(gè)網(wǎng)站中還包含了組件、主題、UI Kit 等常見設(shè)計(jì)資源，非常全面。

?? UI 工具包

1.?iOS 31 GUI →

這是一組超級(jí)全面的 iOS 平臺(tái)的 UI Kit 合集，其中包含上百個(gè)不同的 UI 組件，且都涵蓋了深色和淺色模式。所有的元素都有 Sketch、Figma、Adobe XD 的版本，并且符合人機(jī)界面交互準(zhǔn)則，除此之外，它還支持蘋果最新的 SF Symbols。

2.?Filter →

這是一個(gè) Figma 插件，插件為你提供 20 多種不同的自定義篩選器控件，你可以根據(jù)自己的需求，來選擇篩選機(jī)制，根據(jù)自己的喜好進(jìn)行編輯。

?? 設(shè)計(jì)工具

1.?Lunacy Designer 5.0 →

這是一款 Windows 平臺(tái)的全功能圖形編輯器，最新版本為 5.0 并且是 Beta 狀態(tài)。最新版中包含了人工智能加持的一鍵去背景功能，集成了最新的 UI Kit功能，修復(fù)了超過 1000 個(gè) Bug。同時(shí)，作為一款圖形編輯器，它可以直接使用 Sketch 文檔，性能強(qiáng)勁且穩(wěn)定。

2.?Pixilart →

Pixiilart 是一款在線像素繪圖平臺(tái)，如果你也喜歡像素藝術(shù)，那么你可以在這里找到志趣相投的藝術(shù)家和發(fā)燒友，在這里共享你的設(shè)計(jì)，或者發(fā)掘更多有趣的設(shè)計(jì)。

3.?Figma Handoff?→

Figma Handoff 是一個(gè)設(shè)計(jì)交付工具，可以幫助你從 Figma 設(shè)計(jì)文件生成標(biāo)注，方便開發(fā)人員查看。它是一個(gè)線上應(yīng)用，通過?Figma API?獲取設(shè)計(jì)數(shù)據(jù)，并生成離線或在線標(biāo)注，但不會(huì)將你的數(shù)據(jù)保存至任何服務(wù)器。這款插件來自中國

4.?DraftXR →

DraftXR 是一款 Adobe XD 平臺(tái)的 VR 設(shè)計(jì)原型插件，雖然它做的是 2D 的設(shè)計(jì)，但是能夠在兼容 WebVR 的 HMD 當(dāng)中進(jìn)行預(yù)覽和測(cè)試，非常不錯(cuò)。

5.?Waymark →

這是一款用來創(chuàng)建產(chǎn)品路線圖的工具，Waymark 能夠生成 png 格式的產(chǎn)品路線圖，你可以將這個(gè)路線圖用于演示，它讓你的展示內(nèi)容易于理解，易于執(zhí)行。

?????? 無代碼工具

1.?Airsite →

Airsite 是一款移動(dòng)端應(yīng)用程序，讓你可以以極為簡(jiǎn)單的方式來構(gòu)建簡(jiǎn)單的網(wǎng)站，而構(gòu)建過程在你的 Android 手機(jī)或者 iPhone 上完成就可以了。

2.?Devsync →

這是一款可視化的 CSS 編輯器，它可以與你的無代碼編輯器實(shí)時(shí)同步編輯，這款 Chrome Devtools 拓展可以讓你實(shí)時(shí)有效地觀察到你的操作和樣式，無需編寫 CSS 代碼。

3.?Make Stories →

MakeStories 是一款無代碼 AMP Story （AMP Stories和Snapchat Stories、YouTube Reels極為相似）構(gòu)建工具，它使用快速拖放的功能來幫你來構(gòu)建互動(dòng)式的故事效果，結(jié)合其中 75 種不同的效果，將你的制作能力提升到一個(gè)極高的程度。比如你可以使用 AMP 動(dòng)畫、一鍵龔律全、自定義字體來為你的設(shè)計(jì)增添樂趣。同時(shí)，它有著豐富的庫，因?yàn)樗€集成了諸如 WordPress 和 Drupal 等工具。

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

1.?Superposition for Figma →

Superposition 是一款實(shí)用性極強(qiáng)的軟件，如果你喜歡某個(gè)網(wǎng)站，并且想使用它的配色、排版甚至樣式，那么你可以用 Superposition 來實(shí)現(xiàn)這一目標(biāo)。

2.?Sleuth for Sketch →

Sleuth 是一款開源工具，它能夠幫你了解如何使用組件，以及何時(shí)使用組件。借助它，你可以評(píng)估你的設(shè)計(jì)系統(tǒng)能夠?qū)δ愕牧鞒獭⒁约巴獠渴澜缍加心男┯绊憽８鶕?jù)它的創(chuàng)建者 Sean Rice 所說，Sleuth 更像是一個(gè) Figma 的組件分析工具，不過它是適用于 Sketch 的。

?? 團(tuán)隊(duì)工具

1.?Tools for Teams →

團(tuán)隊(duì)協(xié)作需要有適合團(tuán)隊(duì)使用的工具，那么這個(gè)列表就是精選之后的團(tuán)隊(duì)協(xié)作工具列表。從管理到設(shè)計(jì)，從開發(fā)到分析，這里所涉及到的工具幾乎涵蓋了團(tuán)隊(duì)協(xié)作的絕大多數(shù)需求和場(chǎng)景。

2.?Zeplin 3.0 →

Zeplin 是一款非常流行的在線設(shè)計(jì)和協(xié)作工具，如今更新到最新的 3.0 版了，在這個(gè)新版當(dāng)中，包含了許多令人興奮的新功能，比如鏈接組件功能，讓開發(fā)者能夠防偽代碼庫中的組件，而 Zeplin API 則通過內(nèi)部腳本、小程序甚至其他應(yīng)用來訪問數(shù)據(jù)，并且可以自定義。

??? 圖片優(yōu)化工具

1.?TinyImage for Figma →

這是一個(gè) Figma 上的圖片壓縮工具，它可以將你在從 Figma 導(dǎo)出 png 和 jpeg 格式圖片的時(shí)候，壓縮 90%！

2.?AI Image Enlarger →

這是一個(gè)基于人工智能的圖片放大工具，它可以在不降低畫質(zhì)的前提之下，幫你將圖片無損放大。值得一提的是，它是完全免費(fèi)的。

3.?CloudApp for iOS →

CloudApp 是一個(gè)錄屏和文件管理工具，你可以在任何地方創(chuàng)建錄屏、圖片和文件，并且分享出去。借助這款工具，你還能創(chuàng)建收藏夾，便于快速訪問。

?? 測(cè)試工具

1.?Responsive Website Test →

這是一個(gè)網(wǎng)站測(cè)試工具，可以替你進(jìn)行跨設(shè)備的測(cè)試，查看你的網(wǎng)站在各種不同的設(shè)備上的相應(yīng)速度，它比 Devtools 更快，并且可以更快進(jìn)行可視化的展示，并且會(huì)優(yōu)先為你展示三種常見屏幕的測(cè)試結(jié)果。