将MUI组件引入UXPin - npm集成演练
通过UXPin的npm集成，设计人员可以导入npm组件库来构建功能齐全的原型。这些高保真原型使设计师能够测试传统的基于矢量的设计工具无法实现的功能、交互和功能。
目录表
什么是UXPin的npm集成?
首先，理解UXPin合并很重要，因为我们的npm集成是这项改变游戏规则的技术的最新迭代。
合并控件同步设计系统的组件库Git存储库或故事书)到UXPin的设计编辑器，这样设计师就可以使用来自他们设计系统的完全交互式组件进行原型设计。
这个组件驱动的原型创建了一个真理的单一来源设计师和工程师在同一个设计系统下工作。对存储库的任何更改都会自动同步到UXPin，因此团队总是使用最新版本．
进入npm集成
以前，设计师需要工程师的帮助来连接和同步Merge。但是，有了UXPin的npm集成，设计师(或者DesignOps如果有的话，可以使用直观的用户界面完成集成，而无需编写任何代码。
如果组件库以npm包，您可以通过Merge将其连接到UXPin，并导入开始原型制作所需的UI元素。开源设计库像MUI这样的工具在npm集成中工作得最好，因为它们有一致的命名约定、文件结构和文档。
使用MUI的好处
梅React组件库是基于谷歌的吗材质设计UI．全面的设计系统非常适合原型制作，因为它拥有快速构建ui所需的一切。
MUI团队在确保组件解决基本可用性和可访问性问题方面做了出色的工作，为您提供了一个现成的产品开发解决方案。
MUI是主题，因此，您可以使用它作为构建设计系统的基础，或者在尝试为产品的组件库寻找新模式时，利用综合库来测试UI元素。
与UXPin合并的MUI npm集成
梅已经设计工具对于一些基于图像的设计工具，但是使用UXPin，您可以导入其功能齐全的组件库—工程师用于开发的相同基础组件。
UXPin中的MUI组件看起来与任何其他静态组件完全相同，但具有与代码相同的保真度和功能- UXPin在后端呈现HTML, CSS和Javascript，而不是矢量图形。
当你将UI元素导入到UXPin中时，你也获得了MUI的组件状态。如果您曾经在基于图像的设计工具中设置过这些，您就会知道添加基本状态并将其分配给属性面板是多么耗时和复杂。通过UXPin的npm集成，您只需点击几下就可以导入这些状态!
在合并组件管理器中分配属性
合并组件管理器允许您为每个MUI组件设置属性。
你可以使用MUI的文档来选择你想要为每个组件导入的React道具。一旦导入，这些React道具就会出现在UXPin的右侧属性面板，允许您自定义单个UI元素。
例如，MUI按钮有几个颜色属性：
- 主要的
- 二次
- 成功
- 错误
- 信息
- 警告
当您通过合并组件管理器导入这些道具时，属性面板中会出现一个下拉菜单，允许您选择所需的颜色。这同样适用于变体(包含、概述、文本)、大小(小、中、大)和其他多选项道具。
有几种属性类型，包括布尔类型、函数类型、字符串类型、数组类型和枚举类型等等。您可以导入任何在文档中找到的MUI React道具根据你的原型需求。
连接UXPin到MUI npm包
步骤1
导航到你的UXPin仪表板，点击“新项目”。
步骤2
命名您的项目并单击“创建新项目”。
步骤3
点击“新建原型”在UXPin的设计画布中打开项目。
步骤4
单击左侧边栏中Design System Libraries选项卡底部的下拉菜单，然后单击“New library”。
您的侧边栏和可用的库可能与示例不同。
步骤5
选择“Import React Components”并单击“Next”。
步骤6
命名你的图书馆。此名称仅供参考，不会影响导入。
您还需要获取npm包存储库名称，它位于Install on下MUI Material的npm页面．从npm中复制并粘贴Install内容到"库包名"字段。
删除@符号之前的所有内容(因此您只有@mui /材料)，其余内容保持默认值，然后单击“Next”。
导入MUI组件
完成npm集成后，UXPin会自动将你重定向到画布。现在可以选择要导入的MUI组件了。
步骤1
从左侧工具栏，单击“打开合并组件管理器”。
合并组件管理器将在一个新选项卡中打开。
步骤2
单击“添加新组件”。
步骤3
输入要导入的组件的名称。
您可以在下面的MUI文档中找到正确的命名约定组件的API．MUI的组件使用CamelCase，没有空格。第一个字母要大写。例如,底部导航将BottomNavigation．
让我们导入一个MUI按钮作为我们的第一个组件，并将其添加到名为输入．我们建议使用与MUI文档相同的分类，这样设计人员和工程师就有了相同的参考点。
您可以向单个导入添加多个组件，从而节省重复步骤2和步骤3的时间。
单击“导入组件”。
步骤4
单击右上方的“Publish Changes”初始化导入过程。
第一次为新组件执行此操作时，可能需要一两分钟。
步骤5
导入完成后，单击“Refresh Library”来更新项目库中的更改。
如果您按照这些步骤进行操作，您会注意到在左侧栏中有一个类别(Inputs)和第一个组件(Button)。
步骤6
单击Button开始添加属性。你可以在MUI的文档中找到这些React props组件API >按钮．
使用合并组件管理器添加组件属性
让我们使用文档中的React道具添加一些MUI按钮属性。
按钮标签
步骤1
MUI中的按钮标签(或内容)使用“children”React prop。
- 属性名称:输入“孩子”(总是使用小写的道具)
- 显示名称:这是供您参考的，但设计师和工程师都使用的描述性内容-我们已经使用了“标签”
- 描述:为设计师添加简短的描述或说明——我们已经使用过“按钮标签或CTA”
- 物业类型:“节点”根据MUI的文件
- 属性控制:“文本框”(注意:此字段只会在您选择属性类型后出现，并且会根据您的选择而有所不同)
- 默认值:您的偏好-我们选择了“Button”(注意:MUI将按钮标签大写)
当您完成组件的属性时，您会注意到将出现一个组件预览，并根据您的首选项进行更改。
步骤2
完成所有字段后，单击“添加属性”。
然后单击“保存更改”。
最后，“发布库更改”。
UXPin中的组件驱动原型
一旦您导入了所需的MUI组件，UXPin中的原型就像拖放一样简单，可以构建布局。我们使用三个MUI组件在不到一分钟的时间内创建了这个简单的电子邮件注册表单。
当您选择一个MUI组件时，您在Merge component Manager中创建的属性将出现在右侧的properties Panel中。
准备好发现UXPin中组件驱动原型的可能性了吗?尝试MUI npm集成(或npm上可用的其他开源组件库)。
