sketch组件库的搭建和使用
武汉/UI设计师/1年前/1298浏览
版权
sketch组件库的搭建和使用
哈喽，上一篇文章详细介绍了如何构建企业级的B端设计体系，涵盖了完整的方法论和组件规范的设计。那么，如何逐步搭建起这样一个组件库呢？
在已经完成了组件的设计后，本文将进入实操阶段，详细阐述具体的实施步骤，同时也作为对自己经验的一次总结与沉淀。本文主要分为六大模块讲解，文章会有点长，因为整个步骤写的很详细，请大家耐心阅读~~
一、sketch组件库在设计体系中的地位
sketch组件库是设计系统中的一部分，是沉淀设计规范的设计资产。作为连接设计师和设计师、设计师和开发的桥梁，组件库首先应该是灵活易用的；其次，组件库是需要跟随产品不断进化的，这就要求它是容易被维护的，否则它就会落后于产品迭代，直至逐渐被遗弃。
二、sketch组件库的作用
Sketch 组件库的主要作用在于提高设计效率和保持设计一致性。具体来说：
一致性
：通过使用共享的组件库，设计师可以确保整个产品或项目中的设计元素具有一致的外观和感觉，这对于维护品牌识别和用户体验的一致性非常重要。
多人协作
：组件库有助于团队成员之间的协作，当多名设计师在一个项目上工作时，共享的组件库可以让所有人都在同一个设计语言体系下工作，减少了沟通成本，并且任何对组件的更新都能被所有团队成员看到和使用。
效率提升
：当组件库中的某个元素（例如一个按钮）需要更新时，只需要修改一次就可以自动更新到所有使用该元素的地方，避免了手动逐一更新的麻烦，大大提高了工作效率。
易维护性
：集中管理的设计元素更容易进行维护，比如调整主题颜色或者全局字体样式，只需要在组件库中进行更改，所有相关的设计都会随之更新。
文档化
：组件库还可以作为项目的文档，新加入的设计师可以通过组件库快速了解现有的设计系统，帮助他们更快地融入项目。
三、组件库命名规则
合理的命名是整理和维护组件库的重要环节之一，一方面使后续的维护更加井井有条，另一方面能却确保已形成的组件便于设计索引与调用，如若没有一套所谓「正确」的命名规则，即便构建组件库的人能信手拈来，但并不符合团队中其他成员的使用习惯，无法快速调用，最终很难达成设计共识。
整理归类后，每一类都包含若干组件，每个组件又有若干状态，为了体现结构层次，会在组件名称中使用“/”（Sketch能自动识别“/”）符号分隔场景类别，并以此作为标志逐级命名，如下：
◆ 按钮/按钮类型/尺寸/状态
◆ 数据录入/输入框/输入框类型/状态
◆ ......
其中阿里伯数字0-10也可以用来作为组件的排序，例如我想把按钮的类型进行排序，那么我们可以
◆ 按钮/1.带图标按钮/填充/大按钮/默认
◆ 按钮/2.不带图标按钮/填充/大按钮/默认
◆ 按钮/3.图标+文字按钮/填充/大按钮/默认
注意在构建组件库的过程中，不要将过多的时间花费在组件命名上，建议用一些通俗易懂且常用的名称，怎么方便怎么来，类似按钮、表单、图标、弹窗等这些术语，基本一听就懂，没必要绞尽脑汁去想一些唬人、高大上的专业名词，毕竟组件库不是你一个人在用。
再就是不要纠结是用英文还是中文，只要结构清晰整个团队都能看懂就行，也可以像我这种，只有状态用英文，方便前端理解，若是国际团队，那就统一英文。
四、创建全局基础样式
在设计系统中，基础样式可以理解为构成设计稿最基础的「原子」。如果你的设计稿中全部都使用共享样式，当后续需要调整时，只需要调整样式库即可，设计稿会跟着变化，而不需要一个个调整；样式库还可以通过 Design Token 来映射到前端代码中，以提高最终开发的还原度。
颜色样式（Color）
颜色样式可用于填充颜色、描边颜色和文字颜色。它是页面整体风格表现的重要基本元素，不仅能建立品牌的识别性，还能帮助梳理页面的视觉层级关系，突出内容并平衡其他视觉元素。我们建议按照功能和属性将颜色进行分组命名，例如品牌色、成功色、警告色等，并将默认状态、悬浮状态、点击状态和禁用状态的颜色归为一组，以方便团队中的其他设计师使用。
创建步骤
1、把设计好的所有颜色列出来选中一个矩形，点击外观样式下面的“新建”按钮，然后进行命名，前面已经讲过命名规则，你可以通过
斜线分隔（英文状态下的/）
命名的方式来给它们归类。
◆ 颜色类型/色阶-描述（主题色/Blue-5-Hover）
2、创建颜色变量，命名与外观样式的颜色一致；
颜色变量：更像是设计系统中的基础构建块，它定义了一套全局的颜色规范，供设计人员和开发者在不同场合下引用。外观样式中的颜色：则是基于这些颜色变量，具体应用到设计组件上的颜色属性。它是颜色变量的具体实现，用于确保设计组件的一致性。
在创建颜色样式的同时必须加上颜色变量，因为它更加方便用户或开发者通过修改少量的变量值来改变整个应用或组件库的颜色主题
文本样式（Text）
文本样式中包括：字号、字重、行高和字距等。需要注意的是不要单纯的将名称命名为12px，14px字号，可以在后面加上适当的语义化描述，这样当鼠标悬浮在这个样式上，会给用户带来提示性的预览。这种办法同样适用于颜色、阴影等全局样式，会更加方便大家调用且能够很好的解除新用户的使用疑虑。
创建步骤
1、把设计好的所有字符类型列出来，选中其中一个链接创建好的颜色变量；
2、点击“新建”外观样式，然后进行命名：
◆ 字号/色值和描述
样式效果（Effect）
效果样式包括：外阴影、内阴影、模糊、背景模糊等。阴影值应该遵循现实物理世界中物体的特性。因此在阴影的设定上采用了三层阴影的表达方式，让阴影更加柔和，更符合真实光源下的物体状态。物体的高度直接影响阴影，离地面越高阴影越大，模糊值越高，反之相反。
创建步骤
1、把设计好的所有阴影类型列出来，选中其中一个点击“新建”外观样式，然后进行命名：
◆ 阴影/级别（层级越高表示离地面越高，模糊值越高）/方向（上下左右）
容器（
Container
）
这里的容器其实就是各种卡片样式，比如实线描边，虚线描边卡片等，这种是否需要做成外观样式可以团队根据实际场景和需求来定。
创建步骤
1、把设计好的所有容器类型列出来，选中其中一个链接创建好的颜色变量，
2、点击“新建”外观样式，然后进行命名：
◆ 容器/颜色类型/描边类型/不同色值
提示（Tips）
针对全局样式的管理，除了「解绑」和「新建」功能，还可以在sketch界面的左上角的组件里面进行全局管理。并且可以定期在这里查看有哪些多余和缺少的样式。
五、创建基础控件
图标（Icon）
绘制图标时，需用keyline栅格来控制不同形状的图标大小，完成后并将其转曲（面性），再定义好常用的颜色，在后续的开发过程中，程序可根据高保真效果图随时切换颜色。
传送门
：图标规范
https://www.zcool.com.cn/article/ZMTU0ODg3Mg==.html创建步骤
1、把画好的所有图标类型列出来，选中其中一个链接创建好的颜色变量和外观颜色；
2、点击sketch界面顶部的“创建控件”按钮，然后进行命名（命名方式以上已讲）；
◆ 图标/图标类型/图标描述
按钮（Button）
按钮是用户界面中的重要组成部分，用于接收用户的指令并执行相应的动作。
创建步骤
1、把画好的所有按钮类型列出来，按钮文字和背景颜色均链接创建好的颜色变量和外观样式，图标链接已创建好的图标组件；
2、点击sketch界面顶部的“创建控件”按钮，然后进行命名（命名方式以上已讲👆🏻）；
◆ 按钮/按钮类型/尺寸/状态
其他组件与按钮创建方式一致，下面就不一一讲解了。
sketch中的自适应布局
现在我要讲的这个自适应布局其实很多文章在写搭建组件库文章的时候都忽略了，在创建组件时，自适应布局（Responsive Layout）是一种让元素能够在不同屏幕尺寸和设备上自动调整其大小和位置的方式，以确保在任何设备上都能提供良好的用户体验。
Auto Layout 的具体应用
在 Sketch 中使用 Auto Layout 可以帮助实现自适应布局：
1.约束定义
：
- 定义元素相对于父容器的边距（margin）和填充（padding）。
- 设置水平和垂直居中、对齐方式等。
2.动态调整
- 当父容器的大小发生变化时，元素会根据定义的约束自动调整大小和位置。
假设您正在设计一个包含标题和描述的卡片组件：
- 创建符号：首先创建一个符号（Symbol），包含一个标题和一个描述文本。
- 设置约束：为标题和描述设置约束，如距离顶部和底部的距离，以及水平居中。
- 使用符号：在实际设计中使用该符号，并调整其大小。
- 观察效果：当调整卡片大小时，标题和描述会根据约束自动调整位置和大小，以保持一致的布局。
约束设置后的实际效果如下：
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
提示：这个功能对我们设计来说比较方便的，建议大家都试试并灵活运用起来。
六、sketch 组件库的发布、更新和使用
方式一：在不使用任何插件的情况下，适合个人
1、把设计好的组件库文件保存在本地；
2、在sketch的设置功能里，添加「本地组件库」；
3、添加成功后，在sketch界面的顶部有控件下拉选项，即可使用，或者用快捷键「C」；
4、若组件库后期有修改，更新后保存文件。此时已经创建的设计稿需要点击sketch界面的右上角「通知」，会有「更新组件」提示按钮，确定后设计稿的组件也会随之更新
方法一不适用于团队，需要协作同步的时候不太方便，当有任何改动，其他人需要重新下载组件库源文件进行更新，比较麻烦。
方式二：CoDesign 插件，适合多人团队
CoDesignforSketch插件可以方便地在Sketch中调用素材库，同时也可以在Sketch中上传设计规范，调用组件库，更新组件库等。
首次上传规范文件
1、打开团队的 Sketch 本地组件库文件。
提示：请务必打开组件库文件，而非随意的设计稿文件。
2、打开 CoDesign for Sketch 插件，找到对应的设计规范，并点击上传。点击「查看」即可在网页端查看自动生成的规范文档。
后续上传
1、为避免组件库被其它文件覆盖，请先通过打开本地组件库文件，并基于此上传更新。
2、打开本地组件库后，在 CoDesign for Sketch 插件，找到对应的云端组件库。
调用组件库
在 CoDesign for Sketch 插件内，找到需要添加的组件库，点击「添加」。
添加之后，可在 Sketch 组件库面板内找到并调用它，或者用快捷键「C」。同时设计规范管理员或成员，还可以再对其进行更新上传。
更新组件库
当组件库添加后，有成员更新组件库内容，插件端会自动提示。点击「更新」即可同步将云端最新的组件库更新到本地。
提示：更新范围仅针对「symbols」页，不涉及到「page」页的更新。
当设计规范管理员的本地组件库与云端有内容冲突时，可选择需要保留的组件。勾选「云端」或「本地」后，点击「确认更新」。
提示：需避免内容被覆盖丢失的情况。
需要注意的是，如果您是在「打开本地组件库」的情况下，对其进行更新。则为保证您的组件库与云端组件库成功完成合并更新，请在 Sketch 内，该弹窗出现时点击「复原(Revert)」 按钮。
结语
sketch 组件库是一个强大的提效工具，也是设计系统中很重要的一部分。作为连接设计师和设计师、设计师和开发的桥梁，有了统一的标准后，输出出的效率也会大大提高，对于团队来说能很好的提升产品的品牌感和体验。
12
举报
声明
29
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
相关收藏夹
登录注册
12登录即可同步推荐记录哦
29登录即可加入我的收藏
评论登录即可评论想法
分享分享