第一波！2020年3月超实用设计工具大合集

新年新气象，宅家做设计搞开发的同学似乎效率都提升，这个月 Prototypr.io 这个月的设计工具大合集当中，涵盖了 10 个不同类别，功能丰富多样的新玩意！这次的合集当中有很多令人眼前一亮的好东西，比如惊艳的图库网站 Open Peeps，基于人智能的关键词配色生成器，还有可以超快借鉴你所喜欢网站的配色和样式的 Figma 插件！

往期干货也非常给力：

下面快来看看吧！

🖌️ 插画图库

1. Open Peeps →

Open Peeps 是一个最新的手绘图库，它提供给你相当充裕的创作空间，你可以在它提供的平台上对人物角色以及所处的场景进行自定义，这样就可以应用于你自己的设计作品当中。

2. ITG.digital →

ITG 是一个在线的插画生成工具，只需几分钟，你就可以创建独特的、富有故事性的插画，在这个过程中，你可以调用不同的元素来进行搭配，定制性极强。你可以将这些插画应用在APP、网站和社交媒体上，非常不错~

3. Lottiefiles for Figma →

Lottiefiles 也是最近超级热的一款 Figma 插件，能够帮你将各种免费的 Lottie 动画转为 GIF 和 SVG 插入到你的设计当中。如果你正在找最新的、有用的 Figma 插件，一定要看下面这篇文章：

🎨 配色工具

1. Vangogh →

这是一个使用人工智能驱动的配色工具，它能够根据你要的关键词帮你找到合适的配色方案。这款工具借助机器学习的技术，在网上数以百万计的图片中搜索、获取配色，并且生成符合你的关键词的配色。

2. Color Safe →

Color Safe 是为你提供对比度良好、符合 WCAG 规范的配色方案，这样的配色方案有着更加优良的可访问性，带来更加优秀的用户体验。

3. Colors & Fonts 4.0 →

来自 Michael Andreuzza 的配色库 Colors & Fonts 升级到 4.0 了，这个工具又一次升级改进，最新版支持下载 Figma 格式的配色我二年，支持 Tailwind CSS，支持颜色选择器，支持渐变图案和颜色代码转换。它们对于数字设计的支持越来越好了，值得使用！

📚 设计资讯和资源

1. Vincent →

Vincent 是一个每日设计和前端相关的设计新闻资讯的 APP，目前它主要推出了 iOS 版的，并且 Android 版也将很快安排上。作为一个垂直领域的聚合阅读工具，Vincent 非常适合想要第一时间了解最新设计资讯的同学。

2. DesignValley →

DesignValley 是一个设计师和设计爱好者的精选工具诶机，你会在 DesignValley 中投递、发现和共享自己喜欢的设计素材和设计资源。在一个地方找到你所有的设计工具，它的价值是非凡的。

3. FrontendSource →

FrontendSource 是一个给设计师和前端开发者的资源合集，从 Vue、React 到 Jekyll、Gatsby、HTML 等各种资源一应俱全。除此之外，这个网站中还包含了组件、主题、UI Kit 等常见设计资源，非常全面。

🐙 UI 工具包

1. iOS 31 GUI →

这是一组超级全面的 iOS 平台的 UI Kit 合集，其中包含上百个不同的 UI 组件，且都涵盖了深色和浅色模式。所有的元素都有 Sketch、Figma、Adobe XD 的版本，并且符合人机界面交互准则，除此之外，它还支持苹果最新的 SF Symbols。

2. Filter →

这是一个 Figma 插件，插件为你提供 20 多种不同的自定义筛选器控件，你可以根据自己的需求，来选择筛选机制，根据自己的喜好进行编辑。

💎 设计工具

1. Lunacy Designer 5.0 →

这是一款 Windows 平台的全功能图形编辑器，最新版本为 5.0 并且是 Beta 状态。最新版中包含了人工智能加持的一键去背景功能，集成了最新的 UI Kit功能，修复了超过 1000 个 Bug。同时，作为一款图形编辑器，它可以直接使用 Sketch 文档，性能强劲且稳定。

2. Pixilart →

Pixiilart 是一款在线像素绘图平台，如果你也喜欢像素艺术，那么你可以在这里找到志趣相投的艺术家和发烧友，在这里共享你的设计，或者发掘更多有趣的设计。

3. Figma Handoff →

Figma Handoff 是一个设计交付工具，可以帮助你从 Figma 设计文件生成标注，方便开发人员查看。它是一个线上应用，通过 Figma API 获取设计数据，并生成离线或在线标注，但不会将你的数据保存至任何服务器。这款插件来自中国

4. DraftXR →

DraftXR 是一款 Adobe XD 平台的 VR 设计原型插件，虽然它做的是 2D 的设计，但是能够在兼容 WebVR 的 HMD 当中进行预览和测试，非常不错。

5. Waymark →

这是一款用来创建产品路线图的工具，Waymark 能够生成 png 格式的产品路线图，你可以将这个路线图用于演示，它让你的展示内容易于理解，易于执行。

👩🏽💻 无代码工具

1. Airsite →

Airsite 是一款移动端应用程序，让你可以以极为简单的方式来构建简单的网站，而构建过程在你的 Android 手机或者 iPhone 上完成就可以了。

2. Devsync →

这是一款可视化的 CSS 编辑器，它可以与你的无代码编辑器实时同步编辑，这款 Chrome Devtools 拓展可以让你实时有效地观察到你的操作和样式，无需编写 CSS 代码。

3. Make Stories →

MakeStories 是一款无代码 AMP Story （AMP Stories和Snapchat Stories、YouTube Reels极为相似）构建工具，它使用快速拖放的功能来帮你来构建互动式的故事效果，结合其中 75 种不同的效果，将你的制作能力提升到一个极高的程度。比如你可以使用 AMP 动画、一键龚律全、自定义字体来为你的设计增添乐趣。同时，它有着丰富的库，因为它还集成了诸如 WordPress 和 Drupal 等工具。

⚛️ 设计系统

1. Superposition for Figma →

Superposition 是一款实用性极强的软件，如果你喜欢某个网站，并且想使用它的配色、排版甚至样式，那么你可以用 Superposition 来实现这一目标。

2. Sleuth for Sketch →

Sleuth 是一款开源工具，它能够帮你了解如何使用组件，以及何时使用组件。借助它，你可以评估你的设计系统能够对你的流程、以及外部世界都有哪些影响。根据它的创建者 Sean Rice 所说，Sleuth 更像是一个 Figma 的组件分析工具，不过它是适用于 Sketch 的。

🤝 团队工具

1. Tools for Teams →

团队协作需要有适合团队使用的工具，那么这个列表就是精选之后的团队协作工具列表。从管理到设计，从开发到分析，这里所涉及到的工具几乎涵盖了团队协作的绝大多数需求和场景。

2. Zeplin 3.0 →

Zeplin 是一款非常流行的在线设计和协作工具，如今更新到最新的 3.0 版了，在这个新版当中，包含了许多令人兴奋的新功能，比如链接组件功能，让开发者能够防伪代码库中的组件，而 Zeplin API 则通过内部脚本、小程序甚至其他应用来访问数据，并且可以自定义。

🖼️ 图片优化工具

1. TinyImage for Figma →

这是一个 Figma 上的图片压缩工具，它可以将你在从 Figma 导出 png 和 jpeg 格式图片的时候，压缩 90%！

2. AI Image Enlarger →

这是一个基于人工智能的图片放大工具，它可以在不降低画质的前提之下，帮你将图片无损放大。值得一提的是，它是完全免费的。

3. CloudApp for iOS →

CloudApp 是一个录屏和文件管理工具，你可以在任何地方创建录屏、图片和文件，并且分享出去。借助这款工具，你还能创建收藏夹，便于快速访问。

🧪 测试工具

1. Responsive Website Test →

这是一个网站测试工具，可以替你进行跨设备的测试，查看你的网站在各种不同的设备上的相应速度，它比 Devtools 更快，并且可以更快进行可视化的展示，并且会优先为你展示三种常见屏幕的测试结果。