设计规范特性

一、设计规范特性

过往在使用过程中,你有没有遇到以下这些问题?

  • 团队协同时,设计规范文件传来传去,版本易混乱、效率低
  • 多人维护时,上传内容很容易互相覆盖,导致内容丢失
  • 设计规范更新后,通知触达不及时、成员无法确认当前是否是最新版
  • 历史版本无法回溯,历史设计规范内容都无法找回

.......

现在,CoDesign 『组件库』全新升级『设计规范』,上传组件库,自动生成规范文档; Styles 跟 Symbols 属性与样式完整展示,历史版本回溯,更有检测使用数据+实时提醒功能。组件库多人维护合并,设计规范搭建更高效,全面提升设计研发协作效率。

设计规范管理者可以将本地设计规范上传到云端,支持多人同时管理、更新;使用者可将云端设计规范下载到本地,快捷添加、及时更新。提高团队协同效率,省去设计规范文件线下传来传去的时间。

二、下载插件

实现设计规范快捷上传/更新/调用等功能,需先下载 CoDesign for Sketch 插件,并安装。

三、新建设计规范

在插件端进入设计规范模块,点击【新建】,输入设计规范名称,点击【新建】即可创建成功。更多权限和信息调整,可进入网页端设置。 图

也可直接在网页端的【设计规范】中点击【新建】或点击【新建设计规范】,填写规范名称,即可创建规范。

四、组件库

· 组件库上传

首次上传

1)打开团队的 Sketch 本地组件库文件。(注意,请务必打开组件库文件,而非随意的设计稿文件)

2)打开 CoDesign for Sketch 插件,找到对应的设计规范,并点击上传。点击【查看】即可在网页端查看自动生成的规范文档。

图

后续上传

1)为避免组件库被其它文件覆盖,请先通过打开本地组件库文件,并基于此上传更新。

2)打开本地组件库后,在 CoDesign for Sketch 插件,找到对应的云端组件库。

3)上传本地组件库,成功后提醒成员更新组件库。( CoDesign 会自动通过网页端的消息中心进行提醒)

· 添加/调用组件库

1)在 CoDesign for Sketch 插件内,找到需要添加的组件库,点击【添加】。

2)添加之后,可在 Sketch 组件库面板内找到并调用它。同时设计规范管理员或成员,还可以再对其进行更新上传。

3)添加成功后,您可以通过 Sketch 自带的“组件调用面板”对组件进行快速调用。入口为下图所示,快捷键为【C】。(注意:Sketch69 以上才支持此功能)

· 更新组件库

1)当组件库添加后,有成员更新组件库内容,插件端会自动提示。点击【更新】即可同步将云端最新的组件库更新到本地。(注意:更新范围仅针对“symbols”页,不涉及到“page”页的更新)

图

2)当设计规范管理员的本地组件库与云端有内容冲突时,可选择需要保留的组件。勾选【云端】或【本地】后,点击【确认更新】。注意需避免内容被覆盖丢失的情况。

图

3) 需要注意的是,如果您是在“打开本地组件库”的情况下,对其进行更新。则为保证您的组件库与云端组件库成功完成合并更新,请在 Sketch 内,该弹窗出现时点击【复原(Revert)】 按钮。

图

五、规范文档

组件库上传后,将自动生成规范文档。完整展示组件库中 Styles 和 Symbols 的样式和标注信息。同时还能对应添加组件描述,提高设计一致性和研发对接效率,让团队协作更高效。

· 生成/更新规范文档

在 CoDesign for Sketch 插件内上传组件库后,即可自动生成规范文档,Styles 和 Symbols 将完整展示在文档内,目录结构以 Sketch 内组件的命名方式自动生成。

而更新规范文档同样简单,在 CoDesign for Sketch 插件内上传新的组件库后,就能直接更新规范文档了。

图

· 设计师查看设计规范

在【设计规范】中,设计师可一览 Styles 跟 Symbols 的样式效果。

同时,点击【添加描述】,还可补充该 Styles 跟 Symbols 的使用描述,保证团队设计的一致性。

图

· 研发查看设计规范

1)在【设计规范】中,点击基础样式中的任意 Styles ,即可查看该样式的透明度、颜色、尺寸、位置、效果、代码等信息。在标注面板中,点击【复制代码】,还可一键获取相关代码信息。

图

2)在【设计规范】中,研发人员点击规范文档的任意 Symbols ,即会跳转到【组件开发工作台】。在工作台中,可快速切换不同组件,并查看该组件的颜色、位置、尺寸、代码等信息。

图

· 查看/督促设计规范使用情况

在【设计规范】中,右侧的【使用情况】可查看团队成员对于该设计规范的使用状态。

若团队成员添加设计规范后没有及时更新,管理员可在【待更新】内,勾选团队成员,即可一键提醒,督促成员及时更新。

图

· 设计规范搜索

设计规范支持精准搜索。成员可在【设计规范】中,点击右上角的搜索框,输入设计规范的相关信息,则会呈现相关的颜色、文本、图层样式、组件,点击即可跳转到对应的规范目录。

图

六、设计规范权限

· 设计规范权限区别

设计规范管理者:可上传、删除、编辑规范,可编辑、删除规范成员;

设计规范编辑者:可上传、删除、编辑、更新设计规范。

设计规范查看者:可查看、添加、更新设计规范。

· 管理员设置权限

管理员在【设计规范】中点击对应的设计规范,点击右上角的【设置规范】,在【成员管理】中点击【邀请】,即可添加为设计规范的项目成员。若需改变角色权限,则直接在点击角色状态,在下拉菜单选择即可进行切换。

图

· 团队成员申请权限

团队成员可以互相看到创建的设计规范,但是若想获得设计规范的编辑管理权限,则点击对应的【设计规范】,在右侧弹窗中,点击【申请加入】,选择编辑者/查看者的申请权限。

图

管理者会在【消息中心】的【审批】中收到消息通知,单击同意后,新成员即可获得对应的权限。

图

咨询反馈