前端开发人员需要了解的 UI 设计工具
嗨 👋
感谢您阅读我在 dev.to 上的第一篇文章。我叫 Vova，是一名自学成才的前端工程师。我两年前开始学习前端，很幸运地在一家科技创业公司找到了第一份工作。找到第一份工作（非常）具有挑战性，但我申请的这家创业公司希望为所有级别的专业人士提供平等的机会。
过去一年半，我一直在摆弄 React、Redux、Webpack、fetch、Node.js、Express.js 后端、Webhooks……你知道，在创业公司里，你得身兼数职。我做了 20 多个落地页，设置了 A/B 测试，帮助市场团队实现自动化，最后还做了一些设计工作。
这很有趣，我一直都很喜欢设计任务，即使是很小的任务。所以我就开始问自己，其他人都在用什么工具来完成设计任务呢？
以下是我通过对推特进行的小规模调查得出的结果：
我继续研究，发现市面上竟然有几十种设计工具！有些设计工具甚至可以帮你完成线框图绘制、原型制作、动画制作、Logo设计、设计到代码的交付等等，功能强大，一应俱全。
以下是我个人总结的几款优秀的UI工具，如果你是一名开发者，一定要了解一下（以下纯属个人工程师观点😏）。
UI设计工具检查
Sketch、Figma、Adobe XD和InVision Studio 是目前最强大、最知名的 UI 设计工具。
您可能已经使用过其中一款。它们允许您创建设计、制作原型并与他人协作。Adobe XD 和 InVision Studio 可在 macOS 和 Windows 系统上使用。Sketch 仅适用于 Mac 系统，而 Figma 是一款基于 Web 的工具，支持实时协作。所有这些工具都拥有丰富的功能，并且都可以免费试用。
Photopea—— 一款基于浏览器的图形设计应用程序，也是 Photoshop 的免费替代品：
- 支持多种格式，例如 psd、svg 和 pdf
- 可同时处理栅格图形和矢量图形。
- 允许您在静态图像中添加 GIF 动画（我们在 Flawless iOS 博客中经常使用它）。
Lunacy——一款类似 Sketch 的设计软件 ，
专为没有 Mac 的用户打造：
- 一款可离线使用的原生 Windows 应用程序
- 支持保留原始结构的草图文件
- 虽然是测试版，但它可能需要你的关注。
GIMP—— 一款免费开源的图形编辑器：
- 适用于 Linux、macOS 和 Windows
- 最适合用于图像修饰和编辑、自由绘图以及不同图像格式之间的转换。
Pixelixe—— 一款专为创建社交媒体帖子、广告、横幅甚至网站而设计的图形设计工具。无需任何设计经验：
- 可访问数千张图片、900多种字体和700个图标
- 将您的图形导出为 jpeg、png（带透明背景）或 HTML 格式。
其他值得一看的实用工具：
Illustrator—— 用于创建徽标、图标、绘图、字体和插图，适用于印刷、网页、视频和移动设备。由 Adobe 公司出品。
Voiceflow 是一款不错的工具，可帮助您为 Amazon Alexa 和 Google Home 创建语音应用程序原型、设计和部署。
Vectr—— 一款功能强大的跨平台（支持网页和桌面）矢量图形创建工具。绝对值得一看！
还有一件事……
如果你想充分利用 Sketch、Figma、Adobe XD 和 InVision Studio 等知名 UI 工具，这里有很多资源。Sketch App Sources汇集了数十个关于 Sketch 和设计主题的学习网站。Figma Resources则提供了丰富的学习课程、指南和素材。如果你想深入学习 Adobe 产品，可以访问Adobe 博客。此外， InVision 的 DesignBetter也绝对不容错过，它汇集了设计书籍、播客、访谈和报告。
如果您想学习矢量图形，不妨看看这些资源。Adobe Illustrator 学习与支持中心包含教程和分步用户指南。通过这些教程，您可以快速轻松地学习矢量图形。此外，还可以深入了解 GIMP 的入门教程，内容涵盖照片编辑、绘画等。
好的，这里有一些 UXPin 出品的关于 UI 设计的通用电子书：《Web UI 设计心理学电子书合集》、《战术性 UI 设计模式》和《视觉故事讲述者的 Web UI 设计指南》。
感谢阅读本文，希望您喜欢！
请问您的团队通常使用哪些用户界面工具？