深度解析大厂B端组件库从零到一搭建各位B端设计师们在求职面试的时候，有没有发现面试官都非常关注你有没有 搭建组件库的能力，而且入职后每个团队都会有一个负责组件库的小组，那作为 新手设计师怎么快速加入？如果公司目前没有组件库，设计师怎样推动建设？这 篇文章详细的为大家提供大厂设计师是怎么从零到一搭建组件库、过程中如何推 动、和其他部门怎样进行配合，来帮助各位新手设计师提升自己的职场竞争力一、组件库的价值组件库是一个设计界面元素的集合仓库，要把各个场景中反复出现的控件沉淀下 来，使用的时候不需要单独设计，直接调用即可比方在B端业务中一些表格表单也会被大量使用，那么我们就需要对表格、表 单进行规范，在任何场景下都遵循这一规范，增加研发团队确实定性节省不必要 的设计，保持系统一致性，让设计师专注于创意最需要的地方组件库带给团队的价值是一致、高效、灵活一致：一套标准化的设计规那么可以传达给用户统一的品牌调性，减少用户学习成 本培养用户习惯，让产品拥有良好的用户体验高效：组件的使用规范和各种状态只要搭建一次就可以重复使用，设计师在设计 新的需求的时候直接调用组件，不需要大量重复工作，把时间花在更有价值的事1 .颜色颜色是页面整体风格表现的重要基本元素，好的色彩配置可以准确的传达有效信 息和品牌感，梳理页面的视觉层级关系，突出内容并平衡其他视觉元素。
一般而 言，一个产品的颜色体系会包含：主色、中性色、功能色接下来根据颜色分类, 将不同分类的颜色样式逐一罗列出来主色：产品的品牌色，也是界面中出现最多的颜色，比方按钮的颜色、重点操作 等状态中性色：在界面中调和色彩搭配，用来衬托其他颜色，一般应用在字体、分割线、 背景色等功能色：向用户明确传达成功、警告、错误等状态2 .文字不同的字体大小和颜色文字信息，可以表达出内容的主次在文字样式中会包括: 字号、字重、行高和字距等选择一款字体（推荐中文：微软雅黑、英文：Aria ）, 如果使用苹方那么Win系统中会出现字体丧失的情况，这里建议样式创立要克制, 尽可能保证样式库精简适用字号：PC端最小可识别字体是12px ,需要区分字体层级，一般以偶数来进行间隔字重：除了使用字号，还可以通过字重来突出层级，常用采用Regular以及 Medium的两种字体重量，分别对应代码中的400和500行高：建议行号是字体的150% ,通常字体越大行高越小间距：根据WCAG中的AAA标准，段落间距至少为字体大小的1.5倍3 .投影阴影是存在于画布元素中并通常会在背景边框中延伸出对象主要有外阴影、内 阴影阴影值应该遵循现实物理世界中物体的特性，物体的高度直接影响阴影, 离地面越高阴影越大，模糊值越高，反之相反。
为了在不同层级使用阴影更加丰富，通常阴影定义三个层级，一级卡片阴影、二 级选择下拉popover阴影、三级对话框阴影八.Figma控件1 .结构细分首先要将原本的组件进行打散、细化、整合、重组，我们需要把一个组件中可以 拆分成几个模块，使每个模块都可以进行独立的变化替换，这样组件呈现出来的 尝试可以满足全部场景举例:抽屉控件，可以分为出现位置（上下左右）、抽 屉尺寸（大中小八 标题区域（副标题、头像、标签、更多操作、tabs标签）、按钮区域这U!个模块，每个模块可以独立产生新的样式拆解维度到按钮、图标等最细颗粒后通常不会再进行拆分以抽足为例打散、细化、整合、重组公众号：郭大毛毛的设计笔记出现位置人E枚、左抽屉尺寸大、匕*・，・标题区域刮杯超' 头像、林将、更，雅侑以“林假设X1・ “ XHAHV 讨*M rrAOS2 .新建组件选中要组件化的元素，点击顶部工具栏"Greate Componer"健即可创立成功 快捷健是“command+option + k",创立成功的组件元素有实心的紫色菱形图 标,变为紫色边框创立好的组件分为父级和子级需要注意：更改父级组件，子级组件也会随着发生改变；更改子级组件，父级组 件不会改变。
3 .命名规那么命名规那么是组件中不容忽视的问题，影响在使用过程中对组件的调用，使用「/」 来为组件命名，用于给组件进行分类，这样可以帮助figma判断组件内元素的 层级例如：【抽屉/大号】，在使用组件的过程中命名规那么会影响右侧工具栏 中的"Swap instance",可以在这里进行切换控件，控件的位置层级和命名规 范一致，合理的命名会让整个组件库布局调理清晰、结构缜密，帮助我们快速定 位命名 大号/文字/默认/圆角矩形公众号：郭大毛毛的设计笔记<• Button HU♦ X.文* KU. ■翕违取念簿用toaOnQ-no. 10・图峰•yws.1・阳标♦ 大.文学, ITU, ■窗型总 怠gSQMye IR・图林♦ K文字.KU, ♦角更取&I6，no, BtW.no, loaOng.yw,前■第惊3no.后・品标・♦ A.文学.«U. ”冷彤,»M-no,禁用&no. loag^yes.m・明标，no.♦ K XT. KU. ■角型乐念10Mg.彩用'E. toading.no. BMW主按钮主按钮主按钮次按钮次按钮次按钮默认型歌认型默认型虚线型 文字按钮虑线型 文字按钮虚线型文字按钮4 . Auto layoutAuto layout是Figma自动布局功能，创立带有自动布局的组件，可以帮助我们实现背景随内容调整、列表工程任意移动、列表间距快速调整等需求，这样对 于组件的拓展和应用会非常灵活。
以按钮为例：创立一个按钮，在面板属性中"Autlayout"点击,或者 使用键盘快捷键"SHIFT+A",这时候就可以去调节自动布局的相关属性了 ：方向：可以调节多个元素是纵向排列合适竖向排列；间距：控制元素和元素之间的间距，新版本支持设置负间距，可以轻松做出头像 堆叠效果；容器：控制元素举例框架上侧、下侧、左侧、右侧间距，可以统一设置，分别设 置；分布方式："Packed"支持九种分布(左上、中上、右上、左中、中央、右中、 左下、中下、右下)；"Space between"是平均分布,新版本支持在画布中 快捷调整；调整对象：可以控制自动布局中的对象，固定的宽度或高度(Fixed )，拥抱内 容(Hug contents ),填充容器(Fill container)公众号：郭大毛毛的设计笔记自动布局Add auto layout OA1创立Auto layoutAuto layout在面板属性中“Autlayout"点击"+"或者使用键盘快捷键"SHIFT+A”2方向I t b 10 1010Resizing||>10 ■>□<10回I103间距LayerPacked可以调节多个元素是纵向排列合适竖向排列控制元素和元素之间的间距4容器10ResizingI | ■10 , 10Packedv Space between控制元素举例框架上侧、下侧、左侧、右侧间距，可以统 一设置，分别设置"Packed”支持九种分布（左上、中上、右上、左中、中 央、右中、左下、中下、右下）；"Space between”是 平均分布5 .变体功能Figma拥有强大的变体功能。
同一个组件的不同状态可以通过变体的方式灵活 创立，方便用户调用，变体中需要了解两个功能：属性Property、值Variant属性Property :是组件的可变方面例如：一个按钮组件的属性可以是尺寸、 状态，或是否有icon ,可以将其理解为分类变体名称遵循命名规范的结构， Propertyl=value, Property2=value, Property?=value只有两个属性的选项 可以现实为开关显示，Figma会自动将true/falsex yes/no和on/off都识别为开关，在命名的时候 Propertyl=true/false , Propertyl=yes/no ,Propertyl=on/off值Variant:是每个属性可用的不同选项例如：状态属性可以有默认、悬浮、点击和禁用等，可以将其理解为分类下的参数公众号：郭大毛毛的设计笔记VariantsCombine as variantsProperty 1是每个属性可用的不同选项例如：状态 属性可以有默认、悬浮、点击和禁用等， 可以将其理解为分类下的参数是组件的可变方面例如：一个按钮组件的属性可以是尺寸、状态，或是否有icon,可以将其理解为分类Property 2Variants 命名执宓 Propertyl =value ;翁Propertyl =yes/no6 .组件说明/链接创立完组件后，可以在每个组件的“Description"，输入该组件的解释说明，在引用组件的时，hover该组件上就出出现气泡说明，方便用户查看该组件的说明同时还可以添加相关链接在组件描述中，设计人员在"inspect"中点击相关 的按钮直接跳转，查看相关组件规范文档，方便用户使用。
公众号：郭大毛毛的设计笔记Button按钮主按钮使用最小宽度时,将约束改为固定 宽度即可.Documentation link o ,,….Button按钮九、设计文档组件文档是指导设计怎么使用组件的重要指导说明，是不可搭建组件库不可忽视 的存在，一般是由组件名称、基础定义、使用说明、基础构成、类型、尺寸布局、 交互说明组成举例弹窗组件的说明文档:公众号：郭大毛毛的设计笔记❶组件名称基础定义0使用说明O基础构成控件类型0布局尺寸❼交互规那么在明文抄指导设计怎么使用组件组件名称：对话框Modal基础定义：用于承载信息且不离开当前页面，可以帮助用户更快更容易地完成任务使用说明：要求用户立即响应：使用对话框请求阻止用户继续操作；通知用户紧急信息：使用对话框通知用户有关其当前任务的紧急信息，通常用于报告系统错误或告知结果;确认用户决定：使用对话框来确认用户的决定，清楚描述当前行为可能导致的 潜在后果，如果该行为具有破坏性或不可逆转性，那么使用报错警告色需要承载少量输入信息或者展示信息时，并且希望信息出现可以打断当前操作 当对话框中内容过多，需要复杂的操作，甚至需要二次跳转时建议使用抽屉或 新开页，而非对话框。
基础构成:标题区（必有）：可以是纯文字，也可以在文字前带有icon来明示状态；支持 配置描述，作为辅助信息展示正文（可选）：可包含文字描述、表单、表格、步骤条、通知；操作区（可选）：操作区支持配置是否存在、支持配置按钮文案及数量弹 到达最大高度时,操作区固定吸底关闭按钮（可选）：点击可关闭弹窗;黑色蒙层（必有）：黑色蒙层覆盖全页面，蒙层下方的页面内容不响应滚动和J-i o类型:通知对话框（用于警示、紧急、或简单的二次弹窗确认）0情上研发侧直接调用封装好的组件就可以，防止重复造轮子，同时也降低了沟 通本钱灵活：所有页面的都是原子，在产品后期迭代中，只要调整原。