开发人员和设计师与uxpin一起工作

Web设计与开发工具之间的冲突一直是业界长期存在的问题。网页设计的最终成果通常是一个模型，过去开发人员制作网站，而设计师则制作网站的“绘画作品”，这种脱节造成了巨大的摩擦。究竟哪个才是真相的来源？

如果真的存在单一事实来源呢？如果设计工具与生产网站使用完全相同的代码呢？这场旷日持久的讨论的最新篇章是UXPin。

让我们先了解一些事实，以便更好地理解这一切。

UXPin：基于代码的浏览器内设计工具

UXPin是一款功能强大的设计工具，拥有您期望的所有功能，尤其专注于基于数字屏幕的设计和高级原型设计。

它基于代码这一事实尤其重要。使用所有视觉组件（这些组件实际上植根于代码）来设计网站，使设计更贴近最终产品。您的设计不仅看起来像网站或应用程序，而且功能也像网站或应用程序。例如，输入字段不是带有轮廓的静态框，而是让您体验到用文本填充它的真实感受。

基于代码的设计已经为每个元素提供了所有规范——例如这个卡片组件；精确的颜色（使用正确的格式），以及精确的像素尺寸等等。在某些情况下，甚至可以提取UI组件的精确代码供开发人员使用。

Ania Kubów在一个关于UXPin的视频中很好地阐述了这一点。

十多年前，Jason Santa Maria 认真思考了下一代设计工具的样子。我们能否直接使用浏览器？

我认为浏览器还不够。网页设计师在解决创意和信息传递问题之前就跳入浏览器，就像建筑师先把木头敲在一起，然后再测量一样。工具限制了想象力，而设计之初的想象力或灵感为后续的一切奠定了基础。

Jason Santa Maria，“一个真正的网页设计应用程序”

也许不是直接使用浏览器，但基于代码的工具可以让UI像您的网站或应用程序一样工作，这可能是两全其美的选择：

网页是动态的、活生生的空间，访问者的最小交互都可能改变整个网站的范围。 […] 因为我们处理的不是静态媒体，我们需要能够设计交互和网页不断变化的景象 […] 应用程序需要查看元素，而不是颜色或文本块。 Photoshop、Illustrator 和 Fireworks 在这方面具有一些低级功能，但对更动态和非破坏性处理的需求是显而易见的。

您可以在UXPin中使用您自己的React组件

这就是单一事实来源的魔力所在。如果设计工具可以输出React（或任何其他框架）组件，这是一回事。这是一个巧妙的技巧。但这很可能是一次单程旅行。现实世界项目中的组件充满了其他并非完全属于设计领域的内容。也许一个组件使用一个钩子来返回当前用户的权限，如果他们没有访问权限，则禁用一个按钮。禁用的按钮具有一定的设计元素，但大部分代码并非如此。

如果设计工具无法尊重该组件中的其他代码，并且基本上只是忽略它，那么它是不切实际的。从本质上讲，如果设计工具将组件导出为代码，但不允许设计师首先导入这些UI组件，那么它就没有多大用处。

这就是UXPin Merge的用武之地。

现在，公平地说，这需要一些工作来设置。可能只需要几个小时，也可能需要几周时间才能完成一个完整的系统设计。目前，UXPin仅与React一起工作，并使用webpack配置来集成它。

一旦您开始运行，您在UXPin中使用的组件实际上就是您用于构建生产网站的组件。

看到一个设计工具消化预构建的组件并允许它们在全新的画布上用于原型设计，这确实令人印象深刻。

UXPin帮助您在项目中实现此功能，包括：

• 集成您自己组件的文档
• 示例存储库：uxpin-merge-boilerplate

正如预期的那样，它可能会影响您构建组件的方式

组件往往具有属性，属性控制设计和内部内容等方面。UXPin为您提供了属性的UI，这意味着您可以完全控制组件。

<code><linechart ...="" barcolor="green" data="{[" height="200" showxaxis="false" showyaxis="true" width="500"></linechart></code>

了解这一点后，您可以为组件提供一个属性接口，从而提供大量的设计控制。例如，集成主题切换。

与Storybook一起使用速度更快

另一个在JavaScript组件领域中非常流行的用于测试和构建组件的工具是Storybook。它不像UXPin那样是一个设计工具——它更像是一个组件的“动物园”。您可能已经设置好了它，或者您也可能发现使用Storybook很有价值。

好消息是？UXPin Merge与Storybook完美配合。它使集成变得非常快速和容易。此外，它还支持任何框架，例如Angular、Svelte、Vue等——除了React。

看看速度有多快：

UXPin首席执行官Marcin Treder有一个强烈的愿景：

如果设计师可以使用工程师使用的完全相同的组件，并且所有组件都存储在一个共享的设计系统中（具有准确的文档和测试）会怎么样？设计师和工程师之间许多令人沮丧且代价高昂的误解将不复存在。

以及一个计划：

1. 连接到Git存储库或Storybook库。
2. 将组件从那里导入到UXPin设计工具。
3. 存储库中的所有更改都将在UXPin中自动同步。监视存储库的任何更改，并在可视化编辑器中同步这些更改。
4. 让设计师设计并向开发人员交付准确的规范和功能齐全的设计。

这就是他们在这里完成的工作。

体验UXPin Merge

以上是开发人员和设计师与uxpin一起工作的详细内容。更多信息请关注PHP中文网其他相关文章！