什么是UXPin合并?

合并是一项革命性的技术，它允许用户从GIT存储库导入并同步编码的React.js组件到UXPin编辑器。导入的组件与开发人员在开发过程中使用的组件100%相同。这意味着组件的外观、感觉和功能(交互、数据)将与最终用户体验到的真实产品一样。

多亏了合并设计师可以:

• 使用代码存储库中已经存在的组件，而不需要任何额外的工作或编码专业知识。
• 停止重新绘制已经编码的元素。
• 用产品代码中可用的交互和数据测试高级用例。

工程师可以:

• 通过确保设计人员使用已经编码的组件来加速他们的工作流程。
• 使用自动生成的规范为每个设计引用真实的，组合的，JSX。
• 通过编写自定义组件、迭代代码和将组件连接到数据源，参与高级原型过程。

设计操作/设计系统团队可以:

• 构建统一的设计系统，从代码中设置的单一事实来源为设计师和工程师服务。
• 通过控制React.js组件的属性(prop-types, flow或typescript类型和接口)来控制系统中组件的更改。
• 控制设计系统的版本，并通过GitHub为设计师和工程师协调发布。

设计和工程领导者可以:

• 连接和同步设计和工程流程。
• 在没有瀑布式交接的情况下实现敏捷过程。
• 利用较短的路径来测试想法并向市场交付新功能/产品。

它是如何工作的?

合并是可能的，这要归功于UXPin所建立的范例。从一开始，UXPin就是一个基于代码的设计工具。

市场上的大多数设计工具(Photoshop, Sketch, InVision Studio, Figma等)都是基于图像的设计工具范例。在这种范例中，无论何时用户在画布或画板上绘制内容，该工具都会呈现矢量或光栅图形。随后，它们可以用来呈现PNG、JPEG和SVG格式的完整页面图像。这些文件格式都不支持导入交互式组件和导出完全交互式的原型。它们也与开发人员的工作方式没有任何关系，并且经常看起来与浏览器中web技术所能实现的完全不同——这导致了设计师和工程师之间的主要脱节。

在基于代码的设计工具范例(UXPin)中，每当用户在画布上绘制内容时，工具都会创建html/css/js代码，并在浏览器渲染引擎的帮助下以可视化的方式呈现它。

由于这一点，您可以在我们的设计编辑器中呈现浏览器可以呈现的任何代码。这种能力使基于图像的工具落后，并使我们在技术上优于它们。

为了完成其目标，合并技术分为以下几个步骤:

1. Merge分析并序列化(创建一个表示存储库的数据结构)存储编码组件的存储库。
2. Merge使用提供的webpack配置来构建所有组件。
3. Merge将所有数据传送到UXPin，并在设计系统库中呈现编码组件。

组件示例

CSS网格实现与矿物UI网格，盒子和卡片组件

视频背景与Pinterest格式塔视频组件

根据提供的数据集呈现的可排序表。

当前的状态

想要访问UXPin合并?请求它在这里！

设计系统正在由多个团队和开源设计系统进行测试。到目前为止，以下系统已经通过Merge测试成功:

• CA Technologies Mineral UI
• 枢纽实验室枢纽UI
• Atlassian Atlaskit
• Pinterest完形
• Zendesk花园
• Shopify北极星
• IBM碳
• Instacart零食
• 材料界面
• Microsoft Fluent UI
• RMWC
• Salesforce闪电
• 语义界面
• Shopify北极星