如何创建和使用组件
发布时间： 2021年1月20号
当我们的设计工作中有大量重复的内容——例如同一类设计场景时，如果能创建组件进行设计，将起到事半功倍的作用。在Pixso中，您可以从任何对象或图层的集合中创建组件，进行复用，修改主组件后，同一文件中保持关联的实例会随之更新；其他文件需通过资源库发布并接受更新。组件的使用，是提升工作效率的重要一环。可跟着按钮组件教程练习默认、悬停和焦点状态。
什么是组件？
[ 组件 ]：
是在设计中可以反复使用的UI元素。
[ 实例组件 ]：
通过组件被复制出的对象，即为实例组件。实例组件是主组件的关联副本。同一文件中，修改主组件会更新保持关联的实例；实例已覆写的尺寸、颜色或文本等属性，不会跟随对应修改。其他文件中的实例，需要在资源库发布更新后，由使用者接受更新。
[ 库 ]：
在Pixso中，所创建的组件可进行保存，保存后的组件将会形成资源库。您可以在其他文件中选择更新，从而使用这些实例组件。
组件能为您提供什么？
设计规范，提升产品视觉统一
在不使用组件的情况下，重复设计不仅会消耗设计师大量的时间，同时也容易出现多样式导致的视觉效果不佳，给用户带来认知障碍。
通过“组件”功能可以轻松解决这类问题，当设计师创建好可复用的组件后，在其他页面可以直接使用。尤其是在大型项目中，多位设计师协同设计，可能出现边框颜色稍有出入或交互效果略有不同，难以保证设计一致，这种情况下，Pixso的组件就是精准的解决方法，有利于保持视觉风格的统一，加深用户对产品的视觉认知。
创建组件：
1、点开包含想要创建的组件所在的图层；
2、选中需要创建的组件，鼠标右键单击，出现选项后选择“创建组件”或使用快捷键：Ctrl+Alt+K；
3、在组件面板中，选择“组件”选项，可以对组件进行查看。
使用组件：
在同一个文件中，复制组件即可创建实例；或点击组件面板，将鼠标光标悬浮至需要使用的组件上，单击左键将其拖拽至画板中，实例组件则创建成功。
在不同文件中，则需要点开组件面板，选择团队资源库，在资源库中打开组件列表，开启需要的组件开关，将其更新至组件面板中，即可使用。
修改主组件，按文件范围更新实例
产品迭代过程中，经常会遇到需要调整某通用模块的时刻，例如整个设计中大范围使用的logo，一旦有某些地方需要改动，通常得手动逐一修改，工程量大不谈，还容易出现遗漏的情况。
而现在，使用“组件”功能就不用再重复以上繁琐步骤，在同一文件中修改主组件，可以更新保持关联且未覆写相应属性的实例。跨文件使用时，先在源文件发布资源库更新，再在使用文件的资源库面板中查看并接受更新。而当需要修改某处单独的实例组件时，也可以通过“分离”、“重置”和“替换”等操作轻松实现。
编辑组件：
在画布中，选择实例组件，右键单击，选择“跳转到主组件”，即可立刻跳转至主组件并对其进行编辑；
在组件面板选择需要编辑的组件，左键单击即可立刻跳转至主组件并对其进行编辑。
当您不希望某个实例组件受到主组件修改的影响，可以先将其从主组件中分离出来，使其保持当前的层和属性。
分离实例组件：
1、右键单击画板中需要分离的实例组件；
2、从菜单中选择“实例分离”，即分离成功，可在其基础上编辑实例。
如何进行实例替换：
1、右键单击画板中需要替换的实例组件；
2、在右侧属性面板中找到实例菜单栏，下拉菜单，出现“实例替换”；
3、左键单击需要替换的组件，即可完成替换。
重置实例组件：
1、右键单击画板中需要重置的实例组件；
2、从菜单栏中选择“实例重置”，即重置成功，该实例组件将恢复组件初始状态。
