学习如何将引导组件UXPin——npm集成预排
UXPin npm一体化使设计团队以更高的保真度和原型代码的功能。Component-driven原型在UXPin允许设计者创建原型之前需要工程师的代码。
npm整合,团队可以把组件库UXPin交互性的设计工具和杠杆完整的共享组件,没有复杂的技术设置。让我们看看教程学习如何快速集成组件和使用合并。
使UI组件UXPin从Git存储库时,故事书,或者通过我们最新npm集成。了解更多关于UXPin的融合技术。
UXPin合并是什么?
UXPin合并是一种基于代码的技术,使component-driven原型设计团队。而不是从头开始设计,设计师使用生产就绪的UI元素从一个库来构建高保真,完全功能的原型。
设计师与视觉元素,和工程师背后的代码,创建一个单一来源的真理对整个产品开发团队。团队像PayPal或TeamPassword改善质量,速度,与UXPin和他们的设计的一致性。
UXPin npm一体化是什么?
使用UXPin合并为一个私人设计系统需要一些工程知识建立存储库同步。但是,使用一个开源组件库、设计团队可以完成npm集成使用一个直观的仪表盘。
设计师可以管理组件进口和属性使用合并组件管理器。例如,您可以导入按钮从引导的组件库和9个变体:
- 主
- 二次
- 成功
- 危险
- 警告
- 信息
- 光
- 黑暗
- 链接
这些变异出现在UXPin作为下拉的属性面板。合并还包括基本的悬停状态对于大多数组件,所以设计师不必担心这些小细节,可以立即开始成型。
设计团队可以找到进口通过组件属性反应引导文档。他们只能导入每一个属性或相关项目。
与引导工作的好处
引导是历史最悠久、最全面的尝试前端框架用于反应,Vue和角。UXPin npm的集成使用反应引导组件库,但你可以使用我们的Vue或角版本导入故事书集成。
引导是最好的用于构建响应网站和web应用程序中,但是你可以使用库的反应移动应用设计项目。引导广泛的表单元素的集合,响应表,和其他相关组件使其成为一个优秀的选择基于web的企业产品。
我们建议检查引导程序的示例页面什么是可能的这个综合前端框架。
引导npm集成UXPin合并
您可以引导组件导入UXPin设计编辑器使用npm包(react-bootstrap)。合并组件管理器允许您导入每个UI元素及其属性。
UXPin component-driven原型,设计团队得到相同的保真度和功能作为工程师,因为元素来自于相同的存储库。设计师可以复制任何工程师可以在UXPin通过与库组件属性面板。
您可以使用引导指定这些属性的道具反应框架的文档中找到。
在合并组件管理器分配属性
合并组件管理器是导入和管理你的中央枢纽npm组件。可以导入尽可能多的这些需要完成您的项目。
您还可以控制多少属性导入。举个例子,如果你只会使用引导按钮的初级和二级变异,你只需要导入两个而不是所有9个。
连接UXPin反应引导npm包
步骤1
导航到您的UXPin仪表盘并单击“新项目”。
步骤2
项目名称,然后单击“创建新项目。”
步骤3
点击“设计与合并组件”和“+添加新的图书馆。”
步骤4
选择“导入组件与npm集成反应”,然后单击“下一步”。
步骤5
命名您的图书馆。这个名字只是供您参考,不会影响进口。
合并需要两个引导包npm的集成工作。你需要引导的反应(react-bootstrap)和Boostrap(引导)。
最后,您必须包括一个路径引导的CSS文件组件属性在UXPin工作。你能找到这条路CSS React-Bootstrap的文档。
- 引导/ dist / css / bootstrap.min.css
进口反应引导组件
一旦你完成了上面的步骤,UXPin将重定向您合并组件管理器。你也可以从画布以下步骤1。
步骤1
从左边栏中,单击“合并组件管理器打开。”
合并组件管理器将打开一个新标签。
步骤2
点击“添加新组件”。
步骤3
输入您想要导入的名称组件。
你会找到正确的命名约定反应引导的文档。
我们将导入一个启动按钮对于本教程,并创建一个新的类别称为“组件。“我们建议使用同一类别的反应引导的文档设计师和工程师有相同的参考点。
您可以将多个组件添加到一个进口,节约你的时间重复步骤2和3。
点击“导入组件”。
步骤4
在右上角点击“发布更改”初始化导入过程。
你第一次做这个新组件,可能需要一分钟。
步骤5
导入完成后,点击“刷新图书馆”更新您的项目的变化图书馆。
如果你遵循这些指示一步一步,你会发现你有一个类别(组件)和你的第一个组件(按钮)在左栏。
步骤6
点击按钮开始添加属性。你可以找到这些道具在引导反应的反应在API文档组件>按钮。
添加组件属性与合并组件管理器
我们将添加两个按钮属性使用反应引导的文档。
按钮标签
步骤1
你设定一个反应引导按钮标签使用儿童属性如下:
- 属性名称:输入“孩子”(总是使用小写的道具)
- 显示名称:这是供您参考,但一些描述性的,设计师和工程师我们已经与“标签”保持一致
- 描述:添加一个简短的描述或说明设计师
- 物业类型:“字符串”
- 属性控制:“文本框”
- 默认值:你preference-we已经与“按钮”
当您完成组件的属性,你会注意到一个组件预览将会出现并改变根据你的喜好。
步骤2
一旦您完成了所有字段,点击“添加属性。”
然后“保存更改”。
最后,“发布库变化。”
试着在UXPin Component-Driven原型
一旦你需要导入引导组件和反应特性,原型在UXPin一样简单的拖放来构建布局。我们创建这个简单的电子邮件注册表单使用三个引导组件在不到一分钟。
当您选择一个引导组件,创建的属性合并组件管理器出现在右手的属性面板。
今天试着component-driven原型UXPin npm集成。将引导的npm组件和发现你的产品从构思到发展的速度有多快。更快的释放特性。
