自从我进入网页设计和开发行业以来，一直存在着一个讨论。它围绕着设计工具和开发工具之间的冲突。网页设计的最终产品通常是模型。旧的笑话是网页开发者制作网站，网页设计师制作网站的绘画。这种脱节是巨大的摩擦来源。哪个是事实来源？
如果真的可以有一个单一的事实来源呢？如果设计工具使用与生产网站完全相同的代码呢？这场史诗级对话的最新篇章是 UXPin。
让我们设定事实，这样你就可以看到这一切是如何发生的。
UXPin 是一款基于代码的浏览器内设计工具。
UXPin 是一款功能强大的设计工具，具有你所期望的所有功能，尤其专注于数字屏幕设计和高级原型设计。
它基于代码的事实在这里特别棒。使用所有视觉组件实际上都植根于代码来设计网站，使设计更接近于实际的最终产品。你设计的内容不仅看起来像网站或应用程序，而且也像网站或应用程序一样工作。例如，输入字段不是带有轮廓的静态框，而是在你输入文字时会给你真实的体验。
基于代码的设计已经提供了每个元素的所有规格 - 就像这个卡片组件；确切的颜色（使用正确的格式），以及确切的像素尺寸等。在某些情况下，甚至可以提取你的开发人员可以使用的 UI 组件的精确代码。
Ania Kubów 在 关于 UXPin 的视频 中很好地解释了这一点。
十多年前，Jason Santa Maria 深入思考了下一代设计工具的外观。我们能否直接使用浏览器？
我认为浏览器还不够。在解决创意和信息问题之前就跳入浏览器的网页设计师，就像一个建筑师先把木头锤在一起，然后再测量一样。手头的工具缩短了想象过程；正是这种想象力（或火花）在设计开始时为后续所有内容奠定了基础。
Jason Santa Maria，“真正的网页设计应用程序”
也许不是直接使用浏览器，但基于代码的工具可以使 UI 像你的网站或应用程序一样工作，这可能是两全其美。
网页是活生生的、动态的空间，访客最小的互动都会改变整个网站的范围。[...] 因为我们不是在处理静态媒介，我们需要能够为互动以及网页的不断变化的景观进行设计 [...] 应用程序需要看到元素，而不是色块或文本。Photoshop、Illustrator 和 Fireworks 在这方面具有一些低级功能，但对更加动态和非破坏性处理的需求是显而易见的。
你可以在 UXPin 中使用你自己的React 组件。
这就是单一事实来源的魔法发生的地方。如果一个设计工具可以输出 React（或任何其他框架）组件，那就很酷了。但这可能是一次单程旅行。现实世界项目中的组件充满了其他不完全属于设计领域的东西。也许一个组件使用 hook 来返回当前用户的权限，并在他们没有访问权限的情况下禁用按钮。禁用的按钮在设计方面有元素，但大部分代码没有。
让一个设计工具无法尊重该组件中的其他代码，并且基本上只是将其忽略，这是不切实际的。本质上，如果设计工具将组件导出为代码，但不能让设计师首先导入这些 UI 组件，那么它就没有那么有用。
这就是 UXPin Merge 的作用。
现在，公平地说，这需要一些工作来设置。可能只需要几个小时，也可能需要几周才能完成一个完整的设计系统。UXPin 目前仅适用于 React，并使用 webpack 配置来集成它。
一旦你开始使用，你在 UXPin 中使用的组件实际上就是用来构建你的生产网站的组件。
看到一个设计工具消化预构建的组件并允许它们在全新的画布上用于原型设计，真的很令人印象深刻。
UXPin 可以帮助你在你的项目中实现这一点，包括
- 有关 集成你自己的组件 的文档
- 示例仓库：uxpin-merge-boilerplate
正如它应该的那样，它可能会影响你构建组件的方式。
组件往往有 props，props 控制着内部的设计和内容。UXPin 为你提供了一个 props 的 UI，这意味着你可以完全控制组件。
<LineChart
barColor="green"
height="200"
width="500"
showXAxis="false"
showYAxis="true"
data={[ ... ]}
/>
知道这一点后，你可能会为你的组件提供一个 props 接口，该接口为你提供了许多设计控制。例如，集成 主题切换。
使用 Storybook 可以更快地完成所有操作。
JavaScript 组件领域中另一个非常流行的工具是 Storybook，用于测试和构建你的组件。它不像 UXPin 那样是一个设计工具，它更像是一个组件的动物园。你可能已经设置好了它，或者你可能会发现使用 Storybook 也很有价值。
好消息是，UXPin Merge 与 Storybook 完美协作。它使集成变得非常快且容易。此外，它还支持任何框架，例如 Angular、Svelte、Vue 等 - 除了 React。
看看它有多快
UXPin 首席执行官 Marcin Treder 有一个强烈的愿景
如果设计师可以使用工程师使用的完全相同的组件，并且它们都存储在共享的设计系统中（包含准确的文档和测试）会怎样？设计师和工程师之间许多令人沮丧且昂贵的误解将不再发生。
以及计划
- 连接到 Git 仓库或 Storybook 库。
- 从那里将组件导入 UXPin 设计工具。
- 仓库中的所有更改将在 UXPin 中自动同步 监视仓库中的任何更改并在视觉编辑器中同步这些更改。
- 让设计师设计并向开发人员交付准确的规范和功能完备的设计。
这就是他们在那里做的事情。