学习如何将引导组件引入UXPin - npm集成演练
UXPin的npm集成使设计团队能够以更高的保真度和类似代码的功能创建原型。UXPin中的组件驱动原型允许设计人员创建以前需要工程师编码的原型。
通过npm Integration，团队可以将组件库引入UXPin的设计工具，并利用共享组件的完整交互性，而无需复杂的技术设置。让我们看看教程，了解集成组件和使用Merge有多快。
将UI组件从Git仓库、Storybook或通过我们最新的npm集成带到UXPin中。了解更多关于UXPin的合并技术．
什么是UXPin合并?
UXPin Merge是一种基于代码的技术，可以为设计团队提供组件驱动的原型。而不是从头开始设计，设计师使用存储库中的生产就绪UI元素来构建高保真度，功能齐全的原型。
设计师处理视觉元素，工程师处理这些元素背后的代码，从而创建一个真理的单一来源对于整个产品开发团队。PayPal或TeamPassword等团队使用UXPin提高了设计的质量、速度和一致性。
什么是UXPin的npm集成?
在私有设计系统中使用UXPin Merge需要一些工程知识来设置用于同步的存储库。但是，使用开源组件库，设计团队可以使用直观的仪表板完成npm集成。
的方法来管理组件导入和属性合并组件管理器．例如，您可以导入一个按钮从Bootstrap的组件库和它的九个变体:
- 主要的
- 二次
- 成功
- 危险
- 警告
- 信息
- 光
- 黑暗
- 链接
这些变体出现在UXPin的属性面板中作为下拉菜单。Merge还包括大多数组件的基本悬停状态，因此设计师不必担心这些小细节，可以立即开始原型设计。
设计团队可以找到要导入的组件属性React Bootstrap文档．他们可以导入每个属性，或者只导入与项目相关的属性。
使用Bootstrap的好处
Bootstrap是最古老和最全面的一个尝试前端框架可用于React、Vue和Angular。UXPin的npm集成使用React Bootstrap组件库，但你也可以使用我们的故事书集成．
Bootstrap最适合于构建响应式网站和web应用程序，但你也可以使用React库移动应用设计项目。Bootstrap广泛的表单元素、响应式表和其他相关组件集合使其成为基于web的企业产品的绝佳选择。
我们建议检查Bootstrap的示例页面看看这个全面的前端框架有什么可能。
引导npm集成与UXPin合并
你可以使用npm包将Bootstrap组件导入UXPin的设计编辑器(react-bootstrap）.合并组件管理器允许您导入每个UI元素及其可用属性。
使用UXPin中的组件驱动原型，设计团队可以获得与工程师相同的保真度和功能，因为元素来自相同的存储库。设计人员可以复制工程师在UXPin中使用存储库组件所做的任何事情属性面板．
你可以使用在框架文档中找到的Bootstrap的React props来分配这些属性。
在合并组件管理器中分配属性
合并组件管理器是导入和管理npm组件的中心枢纽。您可以导入任意数量的这些文件，以完成您的项目。
您还可以控制导入的属性数量。例如，如果您只打算使用Bootstrap按钮的主要和次要变体，那么您只需要导入两个而不是全部九个。
将UXPin连接到React Bootstrap npm包
步骤1
导航到你的UXPin仪表板，点击“新项目”。
步骤2
命名您的项目并单击“创建新项目”。
步骤3
点击“合并组件设计”和“+添加新库”。
步骤4
选择“Import React Components with npm integration”，然后单击“Next”。
步骤5
命名你的图书馆。此名称仅供参考，不会影响导入。
Merge需要两个Bootstrap包才能使npm集成工作。你需要React引导(React - Bootstrap)和Boostrap(引导)．
最后，你必须包含一个路径到Bootstrap的CSS文件的组件属性在UXPin中工作。你可以在下面找到这条路React-Bootstrap文档中的CSS．
- 引导/ dist / css / bootstrap.min.css
导入React引导组件
完成上述步骤后，UXPin将重定向到合并组件管理器。您也可以从第1步的画布中得到它。
步骤1
从左侧工具栏，单击“打开合并组件管理器”。
合并组件管理器将在一个新选项卡中打开。
步骤2
单击“添加新组件”。
步骤3
输入要导入的组件的名称。
中可以找到正确的命名约定React Bootstrap的文档．
我们将导入启动按钮为本教程创建一个名为“Components”的新类别。我们建议使用与React Bootstrap文档相同的分类，这样设计师和工程师就有了相同的参考点。
您可以向单个导入添加多个组件，从而节省重复步骤2和步骤3的时间。
单击“导入组件”。
步骤4
单击右上方的“Publish Changes”初始化导入过程。
第一次为新组件执行此操作时，可能需要一分钟。
步骤5
导入完成后，单击“Refresh Library”来更新项目库中的更改。
如果您按照这些步骤进行操作，您会注意到在左侧栏中有一个类别(Components)和第一个组件(Button)。
步骤6
单击Button开始添加属性。你可以在API下的React Bootstrap文档中找到这些React props>按钮．
使用合并组件管理器添加组件属性
我们将使用添加几个按钮属性React Bootstrap的文档．
按钮标签
步骤1
使用children属性设置React Bootstrap按钮标签，如下所示:
- 属性名称:输入“children”(总是使用小写的props)
- 显示名称:这是供您参考的，但设计师和工程师都使用的描述性内容-我们使用“标签”来保持统一
- 描述:为设计师添加简短的描述或说明
- 物业类型:“字符串”
- 属性控制:“文本框”
- 默认值:你的偏好，我们选择“按钮”
当您完成组件的属性时，您会注意到将出现一个组件预览，并根据您的首选项进行更改。
步骤2
完成所有字段后，单击“添加属性”。
然后点击“保存更改”。
最后，“发布库更改”。
在UXPin中尝试组件驱动原型
一旦你导入了所需的React Bootstrap组件和属性，在UXPin中创建原型就像拖放一样简单。我们使用三个Bootstrap组件在不到一分钟的时间内创建了这个简单的电子邮件注册表单。
当您选择一个引导组件时，您在合并组件管理器中创建的属性将出现在右侧的属性面板中。
现在就用UXPin的npm Integration试试组件驱动的原型吧。带上Bootstrap的npm组件，看看你的产品从构思到开发有多快。更快地发布特性。
