很早之前就听过 UXPin，但是看他们官网上写的「All in one」我以为又是一个噱头大于实际的产品，毕竟最近几年设计工具大爆发，每一个都宣称自己是「All in one」或者「Next generation」。

最近听到有一些人推荐，就想着注册试一下。当我打开 UXPin 官网时，在首页发现了这么一句话时：

其他的设计工具，诸如 Adobe XD、Sketch、Figma、InVision 等，只能帮你用线连一下元素做一些假的交互效果，而我们，能让你设计出真正的交互状态、逻辑和代码组件。

果然很狂傲，但这句话却更加激起了我的好奇心。于是，我立即注册并试玩了几天，发现还真不是吹的，UXPin 确实被低估了。那些已有的组件、矢量编辑、在线分享等特性不必多说，UXPin 一个不少，让我惊奇的是它的一些其它特性，让我一一道来。

元素状态

首先最让我惊喜的是 UXPin 引进了状态这一概念。我们都知道，有时候一个元素会有很多种状态，而状态的组合又构造出很多新的状态，最典型的就是按钮了。在一般的设计工具中我们只能一一列出各种状态。

UXPin 的做法就是引入状态，同一个元素或组件可以设置多组状态。这些状态可以用于交互动画中，也可以作为组件的样式覆盖，你甚至还可以嵌套组合不同的状态，来灵活使用它们。

变量、条件和表达式

UXPin 自带的交互效果本身很丰富，除了常见的元素变化、页面跳转、显示隐藏，它还支持进行 API 请求等高级操作。同时，让它区别于其它设计工具的一点是，它支持变量和条件。

所谓变量，就是你可以将一些值存起来，比如用户填的一个数字。而基于这些变量，你可以进行条件判断，比如将用户填写的年龄保存起来，再根据它是不是大于零的来进行后面的交互。这可以帮助我们做出具有一定复杂度的交互效果。

变量的值支持表达式，UXPin 内置了一些基本表达式，比如数学中的绝对值、四舍五入，手机、邮箱、日期格式判定，以及设备窗口尺寸等。你可以使用这些表达式来处理变量，实现自己的定制化需求，让你的交互效果进入更高一级的层次。

无障碍

无障碍在国内是缺失的，但其实在无障碍这块设计师可以做很多事情，比如使用足够对比度的色彩以保证可读性。UXPin 提供了两个无障碍功能：色彩对比分析和色盲模拟。

色彩对比分析会基于 WCAG 2.0 标准帮你自动判断文字颜色和背景色之间的对比度是否足够。

色盲模拟则可以帮助你模拟不同色盲眼中你的设计稿的样子。

CSS 样式

在 UXPin 中除了通过右侧属性面板给元素设置样式，你还可以直接编写 CSS 代码。UXPin 在文档中说过，Sketch、Figma 这些设计工具都是基于图形的，而 UXPin 是基于代码的，所以它可以很容易地和代码融合。

响应式断点

在设计时想做出响应式效果一直是一个难点，一般我们都会针对不同屏幕多做几稿。在 UXPin 中，你可以自己设置断点，并为每一个断点区间做样式调整。在预览时，你也可以通过切换断点来观看不同尺寸下的效果。

迭代

设计文件的版本管理也一直是一个大问题。对于本地文件我们只能存储为一个个副本，但是 UXPin 的设计文件都存储于云端，你的每一次修改都会被记录。与此同时，UXPin 还提供迭代功能，也就是允许你在某一时刻创建一个版本，你可以随时找到它，进行查看或编辑。

文档

文档可能对产品经理或者交互设计师比较重要。一般我们会在一些文档工具中书写需求或产品文档，会把对应的设计截图贴在里面，这样就需要在多个工具中切换。UXPin 将文档功能融合进来了，你可以直接在里面写文档，并将段落直接关联到某个设计元素。

设计系统

现在比较流行的就是通过设计系统交付，我们把组件和样式提取出来，集中在一个地方展示，方便对接到开发流程中。现在大多数设计工具都需要第三方工具来构建设计系统，而 UXPin 自带这个功能。你可以直接从现有的文件中创建，然后在里面继续添加一些其他的样式或组件。这样，在你的设计文件中就可以直接使用这里面的样式或组件了。

Merge（beta）

Merge 是 UXPin 正在测试的一个功能，也是一项革命性的技术。简单地说，就是你可以直接将基于 React 的组件库从 Git 仓库导入到 UXPin 中，并使用这些组件继续设计。这个功能可以说是无缝衔接了设计和开发，可以让交付变得更加简单。如果你感兴趣的话，可以根据他们的教程尝试一下，不过这需要一定的技术基础。

总得来说，UXPin 确实可以称得上「All in one」的设计工具，某种程度上也可以算「Next generation」。不过因为功能的复杂性，上手可能需要一些时间。

目前 UXPin 没有免费版，但是提供了 14 天的免费试用，你还可以在他们的作品展示中提交自己的作品，如果被选为优秀作品，将有机会获得一年的免费使用资格。