每个前端开发人员都应该考虑学习的设计工具以提高工作效率

结论

几年前，你可能只需要知道如何正确地编写原型、构建漂亮的布局，以及使用 HTML、CSS 和 JavaScript 为网站添加交互功能，就能轻松成为一名前端开发人员。但时代变了，如今成为一名前端开发人员需要具备的条件远不止这些。

你的第一个想法可能是：我只会写代码，为什么还要学习设计？答案很简单。能够掌握基本的图像处理、创建图形组件、修饰图片、设计用户界面，或者仅仅使用图形、插图和/或图片为你的网站设置某些信息，都是一个巨大的优势。无论你是在公司、初创公司工作，还是积极从事自由职业，它都能提高你的工作效率，并更好地创造价值。

以下是您可以学习的工具列表，根据系统要求分组

在 Windows/macOS 上

Adobe Photoshop

Adobe Photoshop 是一款适用于 Windows 或 macOS 计算机的图像编辑和照片修饰软件应用程序。Photoshop 为用户提供了创建、增强或以其他方式编辑图像、艺术品和插图的功能。

Adobe Illustrator

Adobe Illustrator 是一款使用 Windows 或 macOS 计算机创建绘图、插图和艺术作品的软件应用程序。

Adobe inDesign

Adobe 为桌面出版市场开发了 InDesign，主要用于排版报纸、杂志、书籍、海报和传单。几乎所有包含大量文本的内容都应该直接在 InDesign 中处理。是时候把它们整合起来了。

Adobe XD

Adobe XD 是一款基于矢量的用户体验设计工具，适用于 Web 应用程序和移动应用程序，由 Adobe Inc. 开发和发布。它适用于 macOS 和 Windows，但也有适用于 iOS 和 Android 的版本，可帮助直接在移动设备上预览工作结果。

草图

Sketch 是由荷兰公司 Sketch BV 开发的 macOS 矢量图形编辑器，主要用于网站和移动应用程序的用户界面和用户体验设计，不包括印刷设计功能。

CorelDraw

CorelDraw 是一款用于编辑矢量图形的软件程序。矢量图形由图形软件包创建，并由对象组成。每个对象都可以单独编辑，这意味着可以更改其形状、颜色、大小和位置。

兼容Linux

GIMP

GIMP 是一款跨平台图像编辑器，适用于 GNU/Linux、OS X、Windows 等操作系统。它是免费软件，您可以修改其源代码并分发您的修改。

Inkscape

Inkscape 是一款免费的开源矢量图形编辑器，用于创建矢量图形，主要支持可缩放矢量图形 (Scalable Vector Graphics) 格式。此外，它还支持导入和导出其他格式。Inkscape
可以渲染原始的矢量形状和文本。

在浏览器中运行

Figma

Figma 是一款矢量图形编辑器和原型设计工具。它主要基于 Web，并通过 macOS 和 Windows 桌面应用程序提供额外的离线功能。Figma Mirror 的 Android 和 iOS 配套应用允许在移动设备上查看 Figma 原型。Figma 的功能集侧重于用户界面和用户体验设计，并强调实时协作。