教程讲师：刘昱
个人永久免费使用 MasterGo，请点击右侧链接👉 MasterGo 官网
资源广场拥有海量设计资源，为你的创意工作注入活力👉 MasterGo 资源社区
MasterGo 是一款面向团队的专业 UI/UX 设计工具，它支持多人同时编辑、随时在线评审、设计一键交付，让你和团队的想法都能更快实现！专业、智能的界面设计，能够满足你所有创意需求。自动布局、素材填充等智能功能，让设计师有更多时间捕捉灵感。
与其他同类型软件相比，MasterGo 是一款 Web 端的设计工具，不需要下载和安装，更加轻量化，当然如果你不喜欢使用 Web 端，MasterGo 也为你提供了客户端的下载。它可以无障碍的让团队中的小伙伴打破次元，工作效率显著提升。那么接下来我们一起开启我们的MasterGo之旅吧！
本集视频是 MasterGo 系列教程的第 6 集，由老师刘昱来介绍一下 MasterGo 中组件与样式的基本用法，包括对组件的介绍，以及如何创建实例等，一起来学习一下吧~
编者按：图文内容简概为视频内容的提炼总结，想要了解详细教程内容，请观看文章顶部完整的视频教程。
无论在设计原型还是高保真效果图时，我们都会经常遇到需要重复使用的元素，如果对这个元素进行修改，可能会面临巨大的工作量，甚至造成遗漏。
所以，我们可以在绘制这个元素之初来创建一个组件。更新主组件时，该组件的所有实例也将更新。
单击工具栏的菱形图标，会发现图层栏中这个图层变成了紫色，与此同时图形的外框也变成了紫色，说明这个元素已经被我们转化成了组件。这时我们点击组件面板，就会看到我们刚才创建的组件出现在了这里。
创建组件的快捷键为：
- Mac：Option + Command + K
- Windows：Ctrl + Alt + K
当我们创建好组件后，有两种使用方法，一种是直接复制组件使用，另一种是从组件库中拖拽出组件到图层中使用。
当我们要把 组件解绑 时，只能解绑使用在图层中的单一组件，快捷键为：
- Mac：Option + Command + B
- Windows：Ctrl + Alt + B
在使用组件的过程中，分组和自定义组件名称，可以方便我们查找和搜索组件。在图层栏组件旁双击即可修改组件名称。
实例是组件的精确副本，具有与原始组件相同的所有属性，包括文本格式、样式、约束。
实例本质上是链接到原组件的，当你对原组件进行更改时，相同的更改会应用于你创建的所有实例。
按住 Option / Alt 键 并拖动组件，可以创建组件实例。复制原组件的快捷键为 Command / Ctrl + D，通过组件栏直接拖拽到画布中。
在图层栏中，空心的菱形是组件实例，实心的菱形是原组件。原组件只有一个，其余都是实例。
解绑实例的快捷键为：
- Mac：Option + Command + B
- Windows：Ctrl + Alt + B
在实际工作中，有时我们只想更改单个实例，同时要保持组件和其他实例不变。这时候可以 修改单个实例样式，被改动的实例不会被同步到其他组件或实例中。
如果被使用到的组件需要全部修改，可以通过 修改原组件 来达到一次修改，全部同步的效果，大大提升工作效率。
重置覆盖的属性、设置实例、替换实例、解绑实例或编辑组件，在 MasterGo 中都有对应的操作，大家可以根据实际工作的需要来逐一尝试。
以上就是本集视频中关于 组件与样式 第一部分的介绍，在下节课中，我们将继续为大家讲解 MasterGo 中 组件与样式 的其他用法，我们下集教程见～
非特殊说明，本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译，原作品版权归属原作者，转载请联系 @优优教程网 授权。
转载时请在文首注明，来源 UiiiUiii.com 及教程作者，并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。
继续阅读与本文标签相同的文章：
发表评论 快来秀出你的观点