2023-2-16 雪涛
这是一篇酝酿了比较久的内容了，来讲解 B 端设计规范和组件库的分享。这几年网上出了不少类似的分享，虽然都写得很全，都还是觉得不够满意，缺了一点点细节。
所以我自己出一版，希望能帮助你们一次性解决这些问题。
B 端项目设计中，设计规范和组件库是一个绕不过去的槛。作为专业的 B 端设计师，必须有自己完成设计规范和组件库的能力。
所以，首先我们要先理清楚什么是设计规范和组件库。
设计规范是项目设计中要遵守的要求、细节、准则，规定了诸如色彩、字体、栅格、间距、圆角等要素的规则，这些内容都是可以在大量设计元素中应用的细节。
换句话说，设计规范就是提取在项目中会广泛使用的要素，并进行统一制定的过程，防止设计师在设计过程中随意发挥，导致项目统一性的崩坏。
组件库，是通过梳理项目中应用到的按钮、开关、滑块、日历、下拉菜单等控件、组件的设计样式、状态、交互规则，再将它们统一复用到项目的不同页面中去。
严格意义上来说也是设计规范的一部分，是基础规范的进一步延伸，但还是单拎出来讲。因为组件库的应用不仅仅是设计统一性的问题，还融合了 ”组件化“ 的编程思路在里面。
组件化：将复杂系统拆分成不同功能独立的模块并重组的过程，且每个模块包含对应的状态和属性。
对于程序员来说，一个项目就是若干功能模块的合集，往往是先开发这些功能模块，再搭建对应的完整页面，而不是看一个页面开发一个页面。
所以制定完善的组件库，除了提升设计质量外，还可以很好的提升开发效率，推进项目进度。
设计规范和组件库的搭建，就是一个由下至上的设计链路，通过对细节的制定来实现最终的项目表现层。可以借助广为流传的分子原理来理解：
任何成熟的 B 端项目都应该具备自己的设计规范和组件库，虽然有很多小团队在前期推进项目时，因为各种问题没有搭建或落地设计规范，但并不代表他们在招人的时候没有要求。
在今天搭建 B 端项目规范时，新手还有一个普遍的问题：
项目规范和开源框架的规范有什么区别，如果选了一套开源框架做设计，设计师不就不用做规范了？
初级设计师会这么想并不奇怪，因为以 AntDesign 为首的开源框架做的实在是太完善了，不仅囊括了整套的 Web 色彩系统，还有各类常用的、不常用的交互组件。
它们不仅仅提供了相关的设计源文件，也给开发提供了对应的代码和接口，方便程序员应用。看起来我们只要拼拼组件就可以和开发无缝衔接了……
这显然是不可能的，正是因为开源框架太全面，可以产生无数种可能，我们才更应该整理自己的项目规范。就像我前面已经提到过的，设计规范是种 ”限制“，而不仅仅是设计风格的简单沉淀。
比如，不管你选了哪套开源框架，它提供了多少种色彩，你的项目都应该有自己的项目主色，适当的辅助色彩，而不可能把它的整套配色都应用进去。所以，即使颜色没有跳出原有色彩系统，也要筛选出你用到的颜色进行记录。
再比如，开源框架的很多控件，都提供了好几种样式和方案，并不是让你全部都用进去，而是选择自己觉得合适的。所以你每个控件中选择的方案，也需要做记录，统一后续的页面设计。
前面只是记录选择，都还比较简单，而最关键的问题在于，开源框架的组件不可能完美符合项目的全部需求。必然要在原有的基础上作出大量细节的优化，或者创建出新的业务组件出来，所以设计师还是要把这些内容整理出来。
开源框架，就是给我们提供了一个比较全面的设计范围，让我们站在别人的肩膀上做选择，提高设计规范的制作效率，而并不是让我们直接躺平，复制黏贴就可以了。
同时，设计规范和组件需要在软件中进行运用，我们也同样不能直接使用官方提供给我们的组件库展开自己的项目设计，要根据自己项目的规范独立进行搭建和使用。
下面，我们就要根据设计规范的内容，来讲解如何结合并使用即时设计、Figma 的相关功能。
之所以 UI 设计软件能取代 PS 独立发展，就是因为 UI 设计中包含大量需要复用和批量修改的功能。而这些功能和设计规范有非常大的联系，也是 UI 设计中项目规范能被落地实践的重要保障。
但因为 Figam 和即时等次时代 UI 设计软件提供了越来越多的功能，用来支持设计规范的实践，且这些功能可以相互交叉、重叠、组合，导致很多人在前期学习中会被软件功能绕晕，导致很多人没有理解这些功能意义和价值，更不知道如何在项目中具体实践。
所以，我们先将这些功能整体理解一遍，再逐一来对它们的使用规则和应用场景进行拓展。
样式功能是用来记录图层样式设置的功能。简单点理解，就是记录图层右侧的属性设置的功能。正常我们选择一个基础图层，软件右侧的属性面板会将图层样式拆解成若干的类别，包括填充、描边、字体、阴影、模糊。
而样式功能，就是帮助设计师对不同的样式类别进行记录和复用的过程，它会直接将该分类内的相关参数值记录下来，并进行命名，方便后续的调用。
响应式功能是让图层随上级编组尺寸变动而自适应的功能，方便我们在修改组件的大小时不用重新调节里面的元素细节。
例如设计一个卡片，可以通过响应式的设置，让头部的元素左右对齐，下方的文本区域自动拓展，保持卡片的内间距不变。
或者页面右下角悬浮按钮，也可以通过响应式设置始终处于页面底部，这样我们在增加页面高度的时候不用重新设置该元素的 Y 轴位置。
自动布局功能，是通过前端布局思路来设置元素布局方法自动排版功能，是 Figma 开发的最重要的功能，也是让 Sketch 不再成为 B 端设计首选的核心因素。
它的主要功能如根据内容自动完成尺寸变更，并列排版和顺序的变更等。
自动布局可以极大的提升设计效率，正因为自动布局的出现，才让项目组件库可以真正被运用和落地实践起来。
组件功能在不同软件有不同的叫法，如 Symbol、Component、Kits 等，主要是将指定的图层或编组生成一个新的编组单位（类似智能对象），在后续设计中进行复用。
例如设计一个按钮、开关，我们只要将它们生成为组件，就可以在后续设计中快速从组件库里拖拽到设计页面中，不用重新画一遍，并且支持批量修改。
在组件应用中，生成的第一个组件也叫父级组件，其它调用它的组件都是它的子组件，这是一个非常清晰的从属关系。如果我们修改父级组件的内容，所有子组件都会被统一修改。
组件的应用除了这种最基础的应用以外，还包含了很多特殊的功能，如将低级组件合并成一个高级组件的嵌套，或者 Figma 前两年发布的变体（Vriants），可以将一个组件的不同状态聚合到一起，通过属性面板来切换相关的状态。
组件功能是 UI 类软件最复杂的功能，它不仅本身设置很丰富，同时也可以结合样式、响应、自动布局，让本来死板的组件变得更灵活可控，应对复杂的设计环境。
在软件中，记录样式就是在对应的属性面板上 “创建” 并 “命名”，就将对应设置数据转化成一个指定名称的记录，方便我们记忆和调用。
比如，填充色中使用了两种色彩相近的色彩和不同透明度，我们就可以使用中文命名来区分，其中 #2B6DCF 80% 叫 辅助色，#2B93CF 90% 叫 主色。
创建完成的填充色记录，就会在对应的属性样式列表中出现，之后就可以在对应图层的属性中关联该记录了。
之后，所有关联到该记录的图层属性，都可以快速应用该记录内的参数。如果我们在样式的列表中修改该记录的数值，那么所有关联到该记录的图层就会一起被修改。
一定要牢记，目前的主流 UI 工具中，样式是根据不同属性类型记录的。比如一个字体图层，它的填充、字体、描边、投影，是可以创建不同的样式记录的，各不影响。
而软件 Sketch 的样式逻辑，则是根据图层类型来记录的，比如矩形和字体，会记录该图层下所有样式属性的参数，且该记录只能应用在同类的图层上（而 XD 只能记录色彩和字体样式…）。
这种做法虽然理解起来容易，但是会导致样式数量大幅度增加。尤其是在字体上，变动填充、描边都要设置一个新的样式，这在实际项目中的灵活性是非常差的。
而即时设计、Figma 则不考虑图层类型，只关注属性类型。类似前端的样式表中 “类（Class）” 的应用，每个类有不同的样式参数，只要定义了类的命名和属性、参数，那么不同 Div （即图层）就可以自由组合这些样式记录了。
比如色彩 color、阴影 shadow、描边 board 各定义了1、2、3 三种样式类，那么就可以像下方案例中自由组合：
<Div Class = “ color2 shadow1 board3 ”> </div>
<Div Class = “ color1 shadow3 board2 ”> </div>
所以，样式功能可以帮助我们在前期快速搭建基础视觉规范内容，将规范中的配色、字体、投影、模糊等参数整理进样式表中，方便我们后续的快速调用和统一修改。
响应式是我们前面做过很多期分享的课题了，基于 BootStrap 的完整响应式功能确实非常强大，可以通过栅格布局来实现丰富的响应方式。
虽然 UI 软件中也提供了 ”响应式“ 这样的功能，但它可以实现的效果非常有限。用一句话概括就是：
“图层基于父级画板 Frame 的匹配逻辑”
比如我们先创建一个画板，然后再置入相关的图层，那么这些图层就可以启用响应式规则。包含间距固定、居中对齐、等比缩放这三种响应规则。
间距固定的意思，就是图层基于父级画板的某间距数值是固定的，不管画布尺寸怎么变动，图层和画布的对应间距都是保持一致的。比如常规的某一方向间距固定。
比如在模块上的标题栏，就可以将栏目设置成一个 Frame，然后标题相关元素左间距对齐，更多图标右间距对齐，之后变更标题栏的宽，图层的对齐关系就是不变的。
而设置左右、上下间距同时对齐，则是图层会随画布的尺寸变动修改自身的宽高来满足。
居中模式则是图层根据画布的大小进垂直、水平方向的对齐，忽略间距数值。
最后一个缩放的设置，用起来和两侧间距对齐很接近，也是放大缩小画布图层会跟着一起变动，但它响应的逻辑是依据比例，而不是间距。这个设置在实际项目中很难派上用场。
过往的设计软件中，父集尺寸变更，下级元素只能机械的执行缩放效果。而响应式设置就是避免这种僵硬的效果，向真实的网页适配方式看齐。
同时，这种父集对齐的逻辑是可以进行嵌套使用的，比如刚才的标题栏，可以将这个画板再置入到整个卡片画板之下，并对 “标题栏画板” 创建顶部对齐，左右间距对齐，那么该画板本身的尺寸不管怎么变动，头部标题栏顶部位置固定，宽度间距和父集统一，标题栏下方的元素也会左右对齐。
所以，将一个画板中的元素响应方式设置好，可以节省我们很多时间，不用再因为父集元素尺寸修改而一个图层一个图层修改下级元素的尺寸和位置。
在后续生成组件前，我们就要优先完成画板下方的响应设置，这样就能确保该组件支持灵活的调节和布局。比如用上方的卡片，就可以快速搭建一个表盘页面的基本框架，我们要做的就是拖拽画板到一个合适的尺寸即可，无需调节下级图层。
但需要注意的事，即时设计和 Figma 触发响应式的设置是元素需要处于画板 Frame 之下，而不是编组 Group 中， Sketch、XD 因为没有 Frame 的概念，所以使用编组就可以应用响应式设置，这个区别一定要牢记。 同时，响应式虽然可以完成很多高效的适配，但是它的局限性是无法打破的，例如无法实现 3 列以上的卡片列表等间距放大，或者随宽度增加生成新列下方卡片补位。
自动布局 Autolayout 作为一个自动排版功能，使用场景包含两类，父子级响应和依序排列。它们有各自的生成条件。
首先需要一个矩形图层作为背景，并将其它下级图层置入到矩形背景中去，全选后点击 “自动布局“ 按钮即可生成父子级响应。如果图层没有完全置入矩形中或没有相交，那么就会生成一个依序排列的自动布局出来。
创建自动布局会生成一个新的 “特殊编组”，用来收纳下级图层，它在图层列表中会有新的图标。
父子级响应布局中，背景的矩形图层会被自动移除，样式被继承到自动布局的编组上，针对该编组层的属性设置，就等同于原先的背景矩形设置（和画板 Frame 图层逻辑一样）。
这类布局最常应用于按钮控件上，可以让按钮的宽度随文本宽度变化。
但光靠创建这个效果显然是无法完整解释自动布局的，我们就必须从前端的逻辑，来理解这种包含父子层级的元素如何实现自动布局。
首先就是前端环境中，很多控件、组件本身的尺寸是无法直接写死的，它们是随内容自动调节的。而自动布局右侧的设置面板中的田字格一栏，旁边会有宽度和高度设置，默认都是 “自动 Auto”，这就是说它们会随内容宽高进行响应。
比如上方的按钮，它实现的逻辑就是：
按钮宽 = 元素内容宽 + 左右间距
按钮高 = 元素内容高 + 上下间距
这种情况是父层级基于子层级的响应，应用于无法确定父级图形尺寸的场景，如按钮、标签、单元格、瀑布卡片等。
但前端中的不确定性并不是只有这一种，还可以反过来，子图层大小不确定，需要它们去响应父级图层的尺寸变更。
比如一些文本卡片，会应用在不同的页面中，且根据应用的场景会有宽高的调节，所以需要下级的文本区域可以跟随上级尺寸响应。
我们就需要把父级布局设置成 “固定宽/高”。还要选中子图层，在它的自动布局选项中选择 “自适应”，来满足这个相反的需求。
如果子图层没有设置自适应，那么它就不会直接随着父级图层变更自己的尺寸。但还是有针对子元素的响应设置 —— 对齐模式。
在父级布局设置中，有一个网点模块，可以设置下级图层的对齐模式。当下级图层不处于自适应模式时，则对齐可以修改下级元素的对齐方向，即前面响应式设置中的 “间距固定”。
前面我们演示的案例都只有一个子图层，如果出现多个子图层的话，自动布局也可以帮我们进行调节，除对齐外还包含子图层排列方式、分布方式，而这就是依序排列的布局模式。
排列方式就是多个子图层横排还是竖排的设置。
分布方式，则是这些子图层布局的位置怎么定，默认包含固定间距和自适应两种。
固定间距即子元素排列的间距保持一致，在右侧的输入框中可以设置间距数值，也可以结合对齐模式来设置整体的对齐方向。
而自适应，则是在父级区域内进行等分，这个等分的逻辑比较特别，需要左右各有一个子图层靠到头，新增的图层在这个基础上进行 “等间距分布”。
依序排列的优势，除了把现有的子图层快速布局以外，还可以用拖拽、键盘调整元素顺序。或者从外部拖动某个图层到该区域中，就可以插入序列，成为下级图层之一。
前面两种布局模式，可以解决各种 UI 设计中的细节设置问题，理解起来也并不难，只要自己去操作一下就能学会。而真正让人头疼的，是自动布局可以相互嵌套，并混合这两种模式，在复杂的页面设计场景和组件模块中灵活应用。
下面我们通过一个模态对话框 Modal Dialog 案例来进行说明。这个对话框会包含3种不同的宽度规格，且对话内容不确定，可能会字数很多包含很多行的高度。
想要用自动布局实现一个满足需求的对话框，我的建议是先学会拆分里面的下级模块，通过完成下级模块的设置后再进行最终的合并调节。
在这个对话框中， 包含三个模块，顶部标题栏、中间内容区域，底部操作栏。
首先从顶部标题栏开始，我们随意创建个 280px * 44px 的矩形，然后再置入标题和图标到矩形中。之后全选它们创建成自动布局，然后设置父层级内间距，且改成宽度固定、分布自适应，就可以获得一个可以随意修改宽度的标题栏了。
然后就是内容区域，本质上就是一个文本区域，所以我们拖拽一个文本区域出来，设置好对应的参数和填充一点文本即可。
而底部操作栏，则在一开始做好两个按钮（可以使用自动布局做）和背景以后，就可以进行合并，只是父级元素上的设置要改成固定宽度和右对齐，并设置布局间距（按钮间距）。
这三个模块完成以后，我们再选中它们进行自动布局合并，把它们设置成竖排模式，再添加背景色和排列间距，就可以实现出一个正常的对话框效果。
到这一步，如果我们修改对话框整体的宽度，或者输入多行的文本，都无法达到预期的效果，所以还要在这个基础上进一步的调整。
首先是宽度适应，我们要先将最上级的自动布局改成 “固定宽度”，然后将下级图层都改为 “自适应”，这样我们增加组件的宽，下方布局就会立即响应，且推导到更下级的图层中。
为了满足文字宽度随父级响应，高度影响父级高度，就要将顶部的自动布局改成 “高度适配”，再将下级的文本改成 “宽度自适应”、“自动高度”，然后，我们就可以随意拖动这个自动布局的宽，和添加任意的文本内容了。
完成这个基本的版本以后，我们再根据项目需要的三个宽度，直接将它复制成 3 份，每份直接设置对应的宽度出来，就可以作为后续的 “原始组件” 在项目中进行快速引用了。
在这个案例中，我们前后嵌套了若干层的自动布局，每层自动布局的上下级会有各自的响应关系，需要我们逐一进行确认。并且，细心的同学应该也发现，这里面有很多设置似乎和前面的响应式设置非常类似，那把一些下级布局从一开始就做成响应式的编组行不行？
答案是可以的…… 响应式设置和自动布局，本质上都是为了节省我们操作时间而设计的功能，我们要从实际设计的对象出发，选择合理的功能来实现最终的效果。而不是只能使用自动布局，或者只能使用响应式。
也不要因为了解了响应式包含了非常强大的自适应功能，而认为项目中任何组件、页面，都要全由它们组成。在需要频繁优化页面内容、调整设计需求的项目里，过度嵌套的自动布局会让设计文件的 “熵” 值无限增加，会产生更多复杂的、没有效率的问题。
相信引用过 Ant、TDesign 等组件库文件进行设计的同学应该都深有体会……
至于怎么用才好，没有标准的答案，就需要未来大家自己去积累相关经验了。
有了前面响应式和自动布局的认识，我们就要进入到组件功能的具体应用上了。
组件的创建，首先要选中对应的设计元素，可以是单个图层，也可以是编组、自动布局层，然后点击生成组件按钮就可以创建出一个 “原始” 组件。
在即时设计中，这个组件叫 “引用组件”，从该组件复制、引用出来的副本叫做 “实例组件”。它们具有明确的从属关系。
在这个关系中，引用组件是完全可编辑修改的，只要修改它就可以统一修改关联的所有副本样式。
但由引用组件创建出来的副本，却不能任意编辑，我们不能修改它下级图层的尺寸、位置、顺序。但是，副本的编组大小、图层色彩、文字内容往往会有很多特殊的调节需求，所以目前主流的 UI 软件都支持了副本组件的尺寸修改、色彩编辑和文本内容编辑，让组件的使用更灵活。
以上就是组件使用的最基本逻辑，更进一步，组件作为一个编组，所包含的下级图层的逻辑都会被保留下来，例如样式设置、响应式设置、自动布局逻辑。如果一个编组原本就已经创建好了这些规则，那么当它被创建成组件，不管是引用组件还是副本，都会继承这些设置。
比如上一小节中的通知弹窗案例，设置好自动布局再创建成引用组件以后，生成的副本就可以灵活的进行调整和修改文本内容。
除了样式、响应、自动布局外，组件也可以包含组件。我们前面说过，按原子核的结构来讲，一个复杂的组件是由若干基础元素和控件组合而成。比如上方这个案例，就由多个模块、文本区域和按钮组成。
如果我们提前将按钮、图标等创建成引用组件，那么最终整个大的编组再创建成引用组件也是没有问题的，原来的组件格式并没有被抹消。
但有个细节值得注意，就是一个引用组件下方包含的组件只能是 —— 副本。如果刚才我们将按钮创建成引用组件，那么上级编组再创建的引用组件就会自动将这些按钮转换成副本，并在画布周围生成新的引用组件。
所以这个顺序也预示了，组件的嵌套是由下而上的，我们需要先创建低级的引用组件，再用它的副本逐步去组合更复杂的引用组件。这在后面的章节会进一步做出说明。
创建引用组件，除了在画布中它的描边色彩不一样，图层中的图标改变了以外，还会出现在一个新的位置中 —— 组件管理面板。
任何创建的组件都会被生成到左侧的组件栏目面板中，只要从那里拖拽就可以置入当前画布中，方便我们调用和查看。
看起来虽然很简单，但是需要我们管理的细节却很多。首先就是这个列表是一个包含层级关系的树桩结构目录，是允许我们对组件的层级进行结构自定义的。
当我们创建一个引用组件的时候，如果它处于一个画板中，那么创建后它会在组件面板中保留该组件的默认文件路径：
页面 Page / 画板 Frame / 组件 Compoent
如果我们在不同页面和不同画板中创建引用组件，那么该面板的目录一定是特别混乱无序的。所以为了创建出符合正常分类使用习惯的组件目录，就要做出调整。
首先就是建议在项目文件中创建一个独立的页面 Page 用来存放引用组件，任何新增的引用组件我们都需要将它置入到该页面中。且不要将引用组件直接置入到画板中，这样它就不会生产包含画板的层级出来。
然后，我们就可以在文件命名中，使用正斜杠 Slash 符号 “/” 作为层级划分依据。比如下面的案例，包含相同上级结构的组件会被聚合到一个目录层级中：
这种命名结构带来的另一个好处，就是处于同一个目录层级下的组件，在属性面板中可以进行快速的切换。尤其是一些相近的组件要做替换不用再在树桩列表中重新找一遍，直接通过下拉菜单替换即可。
使用命名方式来梳理组件列表，完成有逻辑性、清晰的组件目录，可以极大地提升组件的利用率和效率。但命名必然不是一边创建组件一边凭感觉命名的，而是一开始就要在外部完成的，例如通过思维导图的方式制定出结构大纲，才能保证最终效果符合预期。
组件的应用中，除了不同组件的引用外，过去最让我们头痛的就是同一个组件的不同状态。比如一个简单的按钮，就包含非常多的类型，默认、悬浮、按压、点过、禁用、读取等等。
为了在项目中可以使用组件的不同状态，就需要我们在命名上下功夫，比如：
就是用前面提到的右侧下拉菜单，来完成同一组件的不同状态切换。理论上这么实现是没有问题的，但在实践过程中，不仅组件列表的数量要大大增加，且下拉菜单第一步只改状态显得非常局促……
所以，从 Figma 开始推出了变体 Variants 功能，来更好地应对同一组件不同状态的高效应用。目前该功能已经在线上 UI 设计软件中普及。
在即时设计中，只要创建了引用组件，那么选中它后右侧就会有 “变体” 一栏，点击它就可以针对该组件创建出变体效果。
变体中原来的组件一分为二，并不是完全生成出一个全新的组件，而是在这个组件的概念下创建了一个新的状态出来，在组件列表面板中没有生成任何新的内容。
但是当我们再添加一个该组件的副本以后，就会发现它的右侧多了一个条目和下拉菜单，通过这个下拉菜单就可以切换刚才变体内的不同组件。
比如我们在变体内选中两个组件，在右侧变体的下拉菜单中可以点击修改命名，将它们分别改成 “默认” 和 “选中”，再修改对应的样式。然后再应用同一个副本，就可以看见下拉菜单的内容也替换成了“默认” 和 “选中”，通过选择不同的文字，就可以切换成对应的组件样式。
这个功能可以很方便的切换组件的不同状态，但如果它仅仅支持到这一步，那确实和使用命名编组的方法没有本质区别。真正让变体产生价值的，就在于同一组件的多属性、多状态支持。
还用按钮举例，比如一个按钮包含 3 种样式：纯文字、纯图标和文字加图标，再包含 3 种状态：默认、悬浮、点击，还有浅色和深色模式……
也就意味着，按钮包含样式、状态、色彩三种属性，每个属性中的值可以相互结合，那么总共就要设计出 18 个对应的按钮出来。
如果我们使用变体每个样式命名一个名字，那么下拉菜单有12个选项选起来也是很头疼的。所以，变体允许我们自定义组件属性和值，帮助我们更好的归类和选择组件样式。
所以，在变体面板中，我们可以在更多选项中选择添加分类就添加对应的属性内容，添加出 3 个分类后，通过双击修改它们的名字为 ”样式“、”状态“、”色彩“。
有了属性，变体下方的组件命名就会根本变更。如下图所示，默认一次显示属性值，双击则可以查看对应的属性名和值。
即变体的基本命名语法为 —— 属性1 = 对应类型, 属性2 = 对应类型, 属性3 = 对应类型。
我们就可以通过这种语法方式完成对上方按钮的统一命名，如：
然后，将这些组件统一添加到同一个变体下，之后创建的副本，就可以在右侧变体面板中进行多维度的选项操作了。
具体的变体设置，分类、值的设置，可以自己在软件中摸索，我就不演示了。这里再额外提一个功能，就是对值的设置上，还可以应用 “布尔” 的规则，即选项中只包含 “是” 或 ’否“。
如果我们在色彩的值中只使用 ”是，否“、”yes，no“、”开，关“ 等反义词，那么副本变体选项中就会启用开关按钮，来替代原本的下拉菜单，提升操作的效率。
变体的使用可以很好的减少组件面板中组件的数量，提升组件状态切换的效率。如果一个组件创建变态后被嵌套在另一个组件之下，那么这个复合组件也可以快速修改下级组件的变体类型。
虽然变体功能看起来非常强大，但它并不能适用所有场景，因为修改起来影响的要素过多。它更适用于基础的控件和组件类型。如果针对复杂组件，尤其是包含多层组件嵌套的场景，往往使用命名的方式会比使用变体更有效率，这就需要大家自己在项目中积累经验做判断。
通过前面的功能，就可以完成组件库的对应设置了，你可以在这个项目文件中调用这些组件完成项目。
但实际项目中，组件库的使用可不能被局限在一个项目文件里，我们往往会创建很多个项目文件，来设计不同的流程、版本、模块。于是，这些不同的文件都需要调用同一个样式和组件库。
所以，要让包含规范的文件能被其它文件引用，就需要我们在组件面板中，点击设计库按钮，在弹窗中点击 ”发布“，将它创建成一个设计资源库。这样，我们在别的文件中再次打开这个面板，就可以看到这个资源的开关，点击开关后，该文件就能调用里面的样式和组件了。
在项目中，需要先新建团队并邀请相关成员，然后再创建设计资源库，那么其他设计师才可以引用该资源来完成相关页面的设计。
至于每次原文件更新并落实到引用的其它文件这些细节操作，就需要大家自己去实践了。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
您可以选择一种方式赞助本站
支付宝转账赞助
