前6为Component-Driven npm包原型
Component-driven原型与UXPin合并允许设计者构建最终产品的精确副本。与其他设计工具,使静态的图形,UXPin是由代码,因此设计师可以创建高保真,完全功能的原型。
UXPin npm一体化使设计师自由进口从开源组件和模式设计系统。他们可能需要一个UI元素创建一个新的模式或使用现有的设计系统npm集成在一个建立一个功能完备的MVP设计冲刺。
表的内容
发现UXPin合并可以增强你和component-driven原型的设计项目。访问我们的合并页面找出如何请求访问。
UXPin合并:它是如何工作的呢?
在我们深入UXPin npm的集成和原型的包可以导入,重要的是要理解合并技术,使这一切成为可能。
合并使得公司能够同步设计系统托管于一个存储库UXPin设计编辑器所以设计者可以使用相同的组件库工程师构建原型。
这些“现成的”UI元素包括属性和定义的交互设计系统的代码。组件合并最终产品外观和功能一样的,因为它是一个精确的复制品。
设计师使用合并组件像积木一样,拖拽来构建新的ui,和完全功能原型。他们还可以使用模式将UI元素结合起来构建新组件。
合并最强大的特性是它能够同步设计和开发,建立一个真正的单一来源真理的整个组织通过设计系统的存储库。UXPin回购自动同步,任何更改通知产品团队的变化。
故事书和Git集成
直到我们发射npm集成在导入组件库,组织有两个选择:
- Git集成:反应图书馆
- 故事书集成:故事书图书馆包括角,Vue灰烬,反应,和Web组件,等等(故事书的网站上完整列表)
建立样板回购和进口需要的组件库开发人员合作代码的技能,知识和存储库。
这个过程对组织有意义的进口产品设计系统,但设计师们需要更多的控制和灵活性与开源的原型组件库。
进口组件合并npm集成
在2022年,我们推出了合并npm集成给设计团队所需的控制和灵活性来导入和管理反应组件UXPin没有工程支持。
使用合并组件管理器(MCM)、设计师导入单个组件及其属性通过图书馆的npm包。没有所需的代码,和设置需要几分钟时间。
设计者可以使用这些开源组件构建新模式对于现有的设计系统或创建一个最小可行产品使用功能齐全的UI元素(MVP)。
使用合并组件管理器(MCM)
合并组件管理器(MCM)就是设计师管理npm进口组件库(MCM不处理合并的Git或故事书集成)。
你必须遵守图书馆的文档和命名约定在导入组件或导入行不通。UXPin npm一体化必须找到一个组件及其属性使用存储库的命名约定,如果你引用道具不正确的反应,MCM不能找到它。
我们将使用一个语义UI按钮说明如何引用反应道具在导入组件。你会发现这些反应道具设计系统的文档。
当导入一个组件的属性,属性名在MCM的反应道具名称必须匹配文档。
在这种情况下,我们导入孩子们道具,使语义UI按钮的标签。
显示的名字是设计师将会看到什么UXPin的属性面板。
我们进口的儿童,圆形,颜色倒置,次要的,大小和类型,您可以看到这个截图。
那些MCM属性名对应语义UI的文档,你看到以下两个屏幕截图。
当我们将语义UI按钮添加到画布,选择它,相同的属性出现在UXPin的属性面板。我们可以调整这些属性来改变按钮的样式。
选择一个开源设计系统导入
重要的是要注意,设计师只能使用进口npm集成设计系统组件库,它必须有一个npm包。
接下来,设计系统必须提供你的产品的需求。你设计一个B2B产品?你是原型网络、移动或跨平台应用程序?你想补充现有的设计系统或从头构建的东西吗?
例如,如果您正在构建一个网站或web应用程序,引导或语义UI都是很好的选择,而蚂蚁设计可能是更好的为移动和跨平台的数码产品。
这是值得研究开源设计系统,确保图书馆有你所需要的UI元素。图书馆还必须有文档设置说明和可用的列表反应的道具。这些道具将允许你改变一个组件的属性如颜色、形状、交互性、大小、图标等。
开始,我们包括五名流行的开源设计系统可以导入使用UXPin npm的集成,包括设置说明,为什么你会选择他们。
蚂蚁设计
蚂蚁设计是一个开源设计系统开发和维护由中国科技巨头蚁群。组件库可用于反应,角,Vue和包括蚂蚁设计移动为构建跨平台和移动应用程序。
蚂蚁的设计是一个奇妙的“多面手”,为B2C产品组件,企业应用程序,网站和跨平台的应用程序。设计系统还包括一组图标,黑暗的模式中,动画和交互性。
进口蚂蚁设计npm包
蚂蚁设计npm集成库设置:
- 库名称:蚂蚁设计NPM -库名称没有对进口的影响
- 包装细节:antd——必须对应蚂蚁设计npm注册表
- 资产位置:antd / dist / antd。css样式所需——蚂蚁设计反应道具
其他字段保留默认值,然后点击保存更改。
进一步阅读:看看这个分步指南进口蚂蚁设计组件通过UXPin npm集成。
引导
引导是历史最悠久、规模最大的响应前端框架。工程师经常使用引导进行基本的CSS样式和Javascript功能在构建网站和web应用程序的原型。
UXPin npm的集成使用反应Boostrap,其中包括相同的开箱即用的特性和功能最初的引导。我们建议引导原型响应网站和web应用程序的反应。
导入反应引导npm包
反应引导npm集成库设置:
- 库名称:引导NPM集成——库名称没有对进口的影响
- 包装细节:react-bootstrap——必须对应反应引导npm注册表
- 依赖包名称:引导——Boostrap要求反应引导的依赖在UXPin工作
- 资产位置:引导/ dist / css / bootstrap.min。css样式Boostrap反应所需道具
其他字段保留默认值,然后点击保存更改。
进一步阅读:看看这个分步指南导入反应引导组件通过UXPin npm集成。
梅
梅是一个反应库建基于谷歌的材料设计的UI。综合设计系统功能所有你需要开发一系列数码产品,加上超过2000人材料设计图标。
由于其全面的组件库,梅是一个受欢迎的选择对于企业产品、跨平台的应用程序和mvp。
导入梅npm包
梅npm集成库设置:
- 库名称:梅NPM——库名称没有对进口的影响
- 包装细节:@mui /材料-必须对应梅npm注册表
与反应Boostrap和蚂蚁设计,梅不需要依赖或资产在UXPin工作。其他字段保留默认值,然后点击保存更改。
进一步阅读:看看这个分步指南进口梅组件通过UXPin npm集成。
语义界面
语义界面引导的是一个很好的替代品。语义的UI框架有一个更现代的审美反应,简单的功能,高度可定制的组件。语义界面包括FontAwesome在世界上最广泛的图标库。
引导、语义原型设计网站和web应用程序的UI是最好的。
导入语义界面反应npm包
语义界面反应npm集成库设置:
- 库名称:语义UI -库名称没有对进口的影响
- 包装细节:semantic-ui-react——必须对应语义界面反应npm注册表
- 依赖包名称:semantic-ui-css——语义界面反应要求语义UI CSS的依赖在UXPin工作
- 资产位置:https://cdn.jsdelivr.net/npm/semantic-ui@2 dist / semantic.min.css——造型语义界面反应所需道具
其他字段保留默认值,然后点击保存更改。
进一步阅读:图书馆设置引导反应是相似的。跟随引导教程对于一个循序渐进的指南,并使用语义界面反应文档替换相应的库和组件设置。
碳设计系统
碳是一个由IBM设计系统开发和维护与反应,角,Vue版本。简单而全面的设计系统包括一个大组件和模式库,一个图标设置,象形图,运动,说明主题。
碳是一个很好的设计系统B2B和企业产品设计。碳的数据可视化文档使其产品团队发展的完美选择仪表板和报告用户界面。
进口碳设计系统npm包
碳设计系统反应npm集成库设置:
- 库名称:碳NPM——库名称没有对进口的影响
- 包装细节:@carbon /反应-必须对应碳设计系统npm注册表
- 资产位置:https://unpkg.com/carbon-components/css/carbon-components.css造型设计系统的碳反应所需道具
其他字段保留默认值,然后点击保存更改。
环
环是一个React-based框架,它是伟大的建筑尝试原型访问和响应。使用Netflix Uber,惠普,这个设计系统很容易themable和你应该试一试。
导入索环npm包
索环npm集成库设置:
- 库名称:索环NPM
- 包装细节:环——必须对应索环npm注册表
- 资产位置:https://v2.grommet.io/components
其他字段保留默认值,然后点击保存更改。
设计在UXPin npm组件
在这里我们列出6 npm组件库,你可以试试UXPin合并。准备好开始和其中一个设计系统原型吗?尝试npm集成测试这些包和经验component-driven原型能给你什么。
