这篇文章算是一篇工具收集，囊括了许多正在或已经流行的设计工具，不论是版式，字体，还是版本控制，动画，开发协作和响应式，都涵盖了进来，作者真是很棒啊，工具改变思维，我也很喜欢尝试不同的新工具！
原文作者：Jedi
在过去的几年里，大量的web设计工具问世了。哪些老式的静态像素模型，正在被现代的设计理念取代。这些新的设计工具基于组件使用，还有布局系统，通过机器学习来给你提供配色和字体建议，让你的设计能有规则和体系，而不是孤立单一的。
有了这些新的概念，我们正在慢慢缩小设计和开发之间的差距。作为一个在设计和开发都有接触的人，这让我十分兴奋。
这是我最近接触的工具列表，我认为对于任何想要精进自己方法的设计师来说，都是有用的。我在几个类别里将他们排序，为了清晰起见，我确保不去重复。
这个列表也并不是详细的，我肯定也错过了一些很酷的工具，所以，如果我需要在这里添加新的工具，请@我！
排版
网页设计95%都是排版的工作，所以你最好把这一块做好。这些工具将帮助你选择字体，为你的设计创建完美的尺寸和设置。
Fontbase是一个非常快速、跨平台的免费字体管理器。它的速度很快，提供了不错的预览功能，只需点击一下就能安装Google的字体。我希望它能在字体索引方面做得更好，不管怎么说，它都是一个有用的工具。
The anatomy of a thousand typefaces
选择字体是挺困难的，在大多数设计工具中找到一个好的字体，是一个对耐心的训练。大多数工具都只是给你一个下拉菜单，然后按名称排序。但是The anatomy of a thousand typefaces，可以让你根据它们的属性来搜索和过滤你的字体：通过constrast、weight、x-height。这很不错不是吗？
选择字体很难，但是选择一个字体组合就是难上加难了。Fontjoy通过深度学习方法，来帮助你找到新颖的组合，通过神经网络来寻找好的组合。
当你找到了配对的字体之后，它们就需要正在的开始工作了：为你的标题还有段落应用上漂亮的字体。这些都有合适的垂直节奏，留出舒适空间。Archetype可以让你快速设计标题和段落，并且可以实时预览，导出到css和sketch中。
如果Archetype给了你太多的选择，那么Modularscale就会很合适你，一个馍开花的字体应用，选择一个基本尺寸，然后网站会给你提供很好的使用字体大小。
许许多多在Google Font和Typeshift中的字体能否满足你的需求？为什么不尝试将字体设计成可变的呢？通过这种类型转换，你可以对你的字体进行设计并预览，然后输出到你的网站上。
使用真实数据工作
我认为通过虚假内容来设计是错误的做法。2007年我是这样认为的，现在更是深信。我们并不是总能访问到真实的内容，但我们可以通过下面这些工具，来产生一些实际的数值。
各种真实数据的集合（地址、标题、文件格式、时间、名字）都可以在你的设计中使用。也可以复制粘贴或作为json下载使用。
跨平台的免费应用，快速检查CSV文件。从客户端获取需要的数据集。加载到Tad中，在一个透视表中很好的展示数据。
原型／模型
“测试一个想法所需要的时间应该是零。”虽然我们可能无法训练神经网络，将粗糙的草图映射到组件库中，但可以通过这些工具，在原型阶段加速。
Fermion.js可以为你的设计创建一个块，并添加行为来创建低保真原型，它可以导出React组件，所以你可以在原型的基础上去设计优化。
TrueUX目前还没有发布。它是一系列的文章，详细介绍了“完美应用”的原型。他们描述了一些令人兴奋的东西，我也想尝试一下。
文件／版本控制
如果你从事设计工作，你一定会遇到文件版本的问题。没有人知道他们是使用homepage_v3.4_final_Final.sketch还是homepage_v3.4_final_2.sketch，没有人想要去存储6个相似的文件，现在有很多工具可以帮助你实现这一点。
Plant是一个简单的sketch版本控制插件。它可以让你创建，更新，同步不同人创建的sketch文件。
Abstract是另一个很棒饿工具，让你可以轻松地在团队中分享设计版本，也可以为你的设计创建分支。
对于sketch来说，kaktus是一个应用接口，可以让你使用Git来控制版本。并且将Git的所有功能都引入设计流程中。这意味着可以合并，分支，拉取设计资源。
现代的图形设计工具
我很高兴的事是，大多数设计师已经把自己从photoshop中脱离出来了，现在基于矢量的设计工具使得创建连贯的web非常容易，并且可以与开发者分享这些设计。
这个列表里如果没有了sketch，那就是不完整的。这是近几年中，web和app最好的设计工具了。丰富的插件和不断更新的功能（symbols，constraints，libraries）让它成为了最好的工具。但是它只能在Mac上运行，这意味着win上的设计师被抛弃了。
XD是Adobe创建的现代设计工具，嗯也很不错。如果你在win上工作，那么它是一个不错的选择，但是如果你选择了Adobe XD，那么久不能很好的与开发者写作了，它内置了简单的原型，算是一个奖励吧。
我习惯把Figma称为“多人版sketch”，因为多个设计师可以在同一时间进行设计，并且可以看到彼此的更新。它还具有简单的原型模式，和代码导出功能。Figma在浏览器中工作，所以可以在Mac、Win、Linux上运行。就我而言，我经常在sketch和Figma之间切换。我希望Figma在linux上发布他们的桌面版，它在浏览器中运行没有问题，大多数情况下是免费的。
Gravit最初是一个免费的矢量工具，但很快就发展成了一个有力的竞争者。同时也有动效设计，库，基于约束的响应式设计。Gravit是免费的，而且跨平台，你可以试试看。
布局引擎
所有的开发平台都会使用某种形式的布局引擎，它会根据规则自动地将元素放置在屏幕上。因此，你可能为了适配某一些平台，不得不去拖动元素，你在做的就是电脑自己能够完成的工作，这是在浪费时间，坦白地说，挺蠢的，这些工具就是解决这样的问题。
尽管UI看起来过时了，但Antetype实际上有一个非常强大的web-like设计系统，让你觉得是与它一同设计。你应该看看他们在网站上的介绍视频，不过还是限于Mac。
Webflow做的不仅仅是一个设计工具，它也给你一个CMS和虚拟主机，对于想要获得在线工作的设计师来说，它是一个非常强大的设计工具。它很好地结合了设计工具的界面和真实的web属性。
Framer最初是一个创建测试原型的方法，基于sketch的设计，但现在它已经发展出了自己的设计工具，支持约束布局和原型交互功能，在这个过程中你使用的是真正的代码，不过是仅在Mac上支持。
一个CAD设计工具，它给表格带来了很多东西：响应式布局，约束，统一样式，以及其他所有设计工具都有的功能：设计组件的多状态。目前已经发布了beta版本。
基于web的工具，它是基于设计定制组件和响应式屏幕的。允许接入实际的数据，并生成UI。可以免费尝试，很强大，但是文档很简单所用你需要自己弄明白。
和STUDIO一样，Interplay允许你基于组件系统来创建响应式设计。还在封闭内测，没有机会尝试。
这看起来不可思议，，它支持了许多功能：响应式设计、布局系统、原型、组件、代码导出。如果它像视频演示里那样流畅，那么可能就是2018年的年度工具了。
基于组件设计
随着React和原子设计的流行，越来越多的焦点被放在了设计上，不仅仅是单一的屏幕，还是设计系统，在大多数实际的案例中，设计可复用的组件集合，来构建页面。
在基于组件的设计中，Compositor Lab十分热门。很有技术感，但看起来仍是设计师的工具。设计师应该写代码，在Compositor Lab中不需要这么做。它提供了一种简单的方法来创建和 设计各种组件，并作出选择和组合。这是真正的组件，因此与开发协作会变得更加简单。
规模上小一些的网页，可以快速卸除排版尺寸，并看到预定组件（按钮、列表、卡片）的响应尺寸。
这更像是一个开发工具，但我认为会看到更多类似的“编程设计工具”，Storybook可以管理你的组件，并在更新代码时显示。
模糊设计与代码的界限
这部分是以sketch为中心的，因为它拥有最多，最有趣的插件。这些插件允许你将代码导入和导出。这开启了一个设计与开发合作的方式。
React-sketchapp可以让你在sketch中渲染react组件。这提供了完整的styleguide，因为sketch中渲染的元素是真实的代码。需要一些工作来设置，特别是在开发的时候（你需要去切换到react-primitives），但是这加速了设计的迭代周期，使用现有的组件创建新的页面
它和React-sketchapp一样，但针对的类型是html。它是一个非常有用的工具，可以跳出设计，检查与现有设计的一致性。
这是个相反的应用，在sketch中设计组件，然后导出sgv，并在通过sketch-to-react-native生成React（-native）组件准备使用。它使用了机器学习来猜测哪一个组件对应的内容。并且可以正确的转换。
动画
动画是web设计的重要部分。它可以使你的设计在有品味的同时，进一步的突破。许多动画都是以代码为核心，所以我只介绍一个：
我非常想尝试beta版本，我看到的一切都印象很深，展示了调试动画的优秀界面。
响应设计
屏幕本身就意味着设计的未知边界。对于设计师来说，这意味着额外的复杂性。一个好的设计师不会设计他们看到的东西，而是设计他们之间的联系，这是一件困难的事情，但是有工具可以帮你。
Browsersync可以连接所有的浏览器，将所有的浏览器中同步您的点击，滚动，还有表单，这使得在不同环境中测试变得容易。
这是我做的Polypane，对于web开发者来说，这是一个浏览器，向你展示了你的网站在多窗口中的状态。也有许多内置，同步滚动，让你生成窗口的截图，并且有很棒的chrome devtools内置。正在积极开发中。
网友评论