限时开放企业版试用,支持企业资源库、权限管理等多种企业协作及管理能力
申请试用
产品
协同设计
协同白板
产品
资源社区
设计素材
优质设计作品免费获取
组件资源
大厂组件资源即调即用
活动专栏
专题活动,一起提升设计能力
插件广场
用插件扩展设计的无限可能
专题活动
进行中
9999+
9999+
热门精选
资源社区
设计素材
组件资源
活动专栏
插件广场
会员
下载
私有化部署
企业
企业服务
企业产设研协同管理平台
私有化部署
满足企业更高级别安全需求
支持
向团队介绍
帮助中心
加入用户交流群
企业
企业服务
私有化部署
支持
向团队介绍
帮助中心
用户群交流
免费使用
进入工作台
万兴科技(300624.SZ)生态成员
如何创建和使用组件
发布时间:
2021年1月20号
当我们的设计工作中有大量重复的内容——例如同一类设计场景时,如果能创建组件进行设计,将起到事半功倍的作用。在Pixso中,您可以从任何对象或图层的集合中创建组件,进行复用,当主组件修改时,将会自动同步至所有组件。组件的使用,是提升工作效率的重要一环。
什么是组件?
[ 组件 ]:
是在设计中可以反复使用的UI元素。
[ 实例组件 ]:
通过组件被复制出的对象,即为实例组件。本质上实例组件是该组件的关联副本,因此,当设计师修改主组件时,他的所有实例组件都会随之改变。例如:当您将一个正方形的组件调整至长方形后,实例组件将同步更新为长方形。
[ 库 ]:
在Pixso中,所创建的组件可进行保存,保存后的组件将会形成资源库。您可以在其他文件中选择更新,从而使用这些实例组件。
组件能为您提供什么?
设计规范,提升产品视觉统一
在不使用组件的情况下,重复设计不仅会消耗设计师大量的时间,同时也容易出现多样式导致的视觉效果不佳,给用户带来认知障碍。
通过“组件”功能可以轻松解决这类问题,当设计师创建好可复用的组件后,在其他页面可以直接使用。尤其是在大型项目中,多位设计师协同设计,可能出现边框颜色稍有出入或交互效果略有不同,难以保证设计一致,这种情况下,Pixso的组件就是精准的解决方法,有利于保持视觉风格的统一,加深用户对产品的视觉认知。
创建组件:
1、点开包含想要创建的组件所在的图层;
2、选中需要创建的组件,鼠标右键单击,出现选项后选择“创建组件”或使用快捷键:Ctrl+Alt+K;
3、在组件面板中,选择“组件”选项,可以对组件进行查看。
使用组件:
在同一个文件中,复制组件即可创建实例;或点击组件面板,将鼠标光标悬浮至需要使用的组件上,单击左键将其拖拽至画板中,实例组件创建则创建成功。
在不同文件中,则需要点开组件面板,选择团队资源库,在资源库中打开组件列表,开启需要的组件开关,将其更新至组件面板中,即可使用。
主组件修改,实例组件自动同步
产品迭代过程中,经常会遇到需要调整某通用模块的时刻,例如整个设计中大范围使用的logo,一旦有某些地方需要改动,通常得手动逐一修改,工程量大不谈,还容易出现遗漏的情况。
而现在,使用“组件”功能就不用再重复以上繁琐步骤,只需要选择主组件进行修改,就可以同步应用到所有组件,实现全局修改。而当需要修改某处单独的实例组件时,也可以通过“分离”、“重置”和“替换”等操作轻松实现。
编辑组件:
在画布中,选择实例组件,右键单击,选择“跳转到主组件”,即可立刻跳转至主组件并对其进行编辑;
在组件面板选择需要编辑的组件,左键单击即可立刻跳转至主组件并对其进行编辑。
当您不希望某个实例组件受到主组件修改的影响,可以先将其从主组件中分离出来,使其保持当前的层和属性。
分离实例组件:
1、右键单击画板中需要分离的实例组件;
2、从菜单中选择“实例分离”,即分离成功,可在其基础上编辑实例。
如何进行实例替换:
1、右键单击画板中需要替换的实例组件;
2、在右侧属性面板中找到实例菜单栏,下拉菜单,出现“实例替换”;
3、左键单击需要替换的组件,即可完成替换。
重置实例组件:
1、右键单击画板中需要重置的实例组件;
2、从菜单栏中选择“实例重置”,即重置成功,该实例组件将恢复组件初始状态。