【第1990期】设计规范落地的好帮手

前言

看完本篇赶紧告诉项目设计师。今日早读文章由@腾讯P&Pdesign投稿分享。

@P&PDesign全称Platform & Publish Design，隶属于腾讯互动娱乐发行线下的设计中心，团队由视觉、交互、多媒体、UI开发人才构成，负责为腾讯游戏平台体系和发行业务提供体验和服务设计，包括WeGame平台、QQ游戏平台、游戏本地化设计、端游手游助手、移动社区等业务；致力于游戏平台、UI、社区设计领域的研究和沉淀

正文从这开始~~

这是一款鹅厂P&P Design研发的“颜色资源管理 For XD”插件，现插件已经在adobe xd插件商店上架。

颜色资源管理插件是什么？

在项目中经常出现这么这个场景：

设计师MM ：『 我调了网站里几个颜色，麻烦程序小哥哥再改一下哈：）』 程序员 GG：『请问你改了哪个颜色？』 设计师MM ：『我改了1，2，3，4，5，6 吼吼：）』 程序员 GG：『这么多！晚点有时间再改~』

美观的设计作品是需要设计与开发无数次的优化而成的。然而这样的沟通成本代价也相当高。当遇到程序员GG正在为一个人无头绪BUG发难时，就容易延后甚至放弃视觉上的优化。假如设计师的修改颜色能像替换一张图片一样简单，一方面可以让设计师更多时间精细打磨设计稿，另一方面也能降低了设计师反复修改的心里负担。同时也能让开发GG减少因对色值不敏感导致与设计的差异，提升品质。

颜色管理插件由此孕育而生

颜色管理插件是腾讯互动娱乐发行线设计中心（P&P Design Center）出品的一个将设计规范资源转化为开发代码资源的工具，它能将设计的视觉语言从XD设计软件中直接转换为开发可用的代码，从而成为设计与开发的衔接桥梁。（Sketch的颜色管理插件正在开发中）

通过颜色管理XD插件，我们可以帮助设计师将颜色进行分类，避免颜色过多造成难以查找色值的不便，同时还可以将设计的视觉语言（Token）一键下载成开发所需的Sass变量，开发就能一键替换批量将系统（网站）里对应的色值进行替换，降低或消除了后期因设计稿修改带来的更新维护成本，打通设计师创作到研发上线的自动化工作流，提升整体协作效率。

颜色资源管理插件，使用前提条件是什么？

前提条件是更系统化规范化的设计规范

如何有效制定设计规范？

设计规范在一个系统一个项目中非常重要，是多设计师，多团队协同的基础。而颜色资源是设计规范中的一部分，是视觉语言我们统一叫它Token。

通常一个站点需要统一风格体验，设计师要制定设计规范。设计规范包括两部分：视觉语言（Token）+组件库规范。

如Element Design的设计规范如下所示，也分为视觉语言（Token）+组件规范两部分组件。

然后过往中常常看到很多不实用的规范，它们的存在形同虚设，流于书面形式，指导不强，无法直接在设计生产环境中使用，多人协作设计对规范使用不便捷。

例如下图几个例子：

梳理的颜色场景过少，使用指引不强，并不能覆盖到全局颜色，就容易在迭代过程中另起设计，导致风格不统一最后维护困难。

细划Token分类（视觉语言/设计变量）

Token是设计标准规范的核心部分，是传递品牌统一重要因素,也是设计和开发实现统一的桥梁。

我们可以优化Token输出方式，我们将高度解耦的抽离底层视觉语言，建立新规则，将其传递到每个组件，模块，页面，确保风格一致性。

做设计的同学都知道，画面中任何一个元素都是由点线面组成同样在Web实现也是如此，UI界面元素可以抽象其通用属性，不同的属性参数组成不同的元件，如背景，边线，文字，尺寸，阴影，圆角。

因此，我们将这些属性与具体的样式解偶，将这些通属能定义为Token，他们是背景，边线，文字，尺寸，阴影，圆角。

注意，规范是给设计与开发共同使用的，自然得建立共同语言，我们需要统一的命名方式，以及描述颜色的使用场景。

TOKEN与组件相关联

我们要梳理规范组件意义：解决复用性问题，相同组件无需重新设计与重新开发达到一改全改的作用。同样Token意义也在于此，当Token变化能让整个系统多个页面同步修改，一改全改。

组件如何关联TOKEN？

在XD软件中其实已经提供了颜色资源面板，只需要做两步实现关联。

第一步：将整理好的TOKEN添加到面板中 ，选中颜色---右键为资源添加颜色。

你将会在左侧面板中出现这Token。

第二步：将组件中的颜色从左侧的资源面板中添加，选中需要填充颜色的组件---> 点击左侧资源面板中的颜色。

这样就能实现设计侧一改多改，提高设计修改的风格效率，无需每个组件逐一修改了。接下来就来看我们的颜色资源XD插件如何使用。

颜色管理XD插件功能介绍

功能一：一键转化代码功能

有了这插件设计师可以直接下载已整理好Token并生成开发需要的代码文件。

功能二：提供token分类功能

XD虽然提供了资源管理功能，但并不能让颜色进行分组分类，也不利于维护管理使用，因此我们插件提供了分类功能。

功能三：选中图层圈中其用到的颜色

选中图形，插件会识别出图形所用到的颜色，并在左侧面板给你圈出来。

插件下载与使用说明

插件安装

颜色资源管理Adobe XD已在2020年4月成功上线。

现在，大家可以通过Adobe XD -> 插件 -> 发现插件 -> 浏览找到Adobe XD插件管理面板，搜索框输入“颜色”即可找到我们的插件。

点击进入详情页后点击“安装”按钮即可将插件安装到你的Adobe XD。

设计资源命名规范

插件依赖设计资源的命名。命名的格式是：中文名+ +以color为前缀的英文名+ +hex色值+ +透明度(如无可不写)。

四个字段间只能以空格分隔。

如下图所示：

注意：

• 色值只支持以#开头的十六进制，如(#ffffff)；

• 透明度只支持%单位;

• 英文名只能以color为前缀。color-text表示字体色,color-fill表示填充色,color-line表示边框色,color-shadow表示阴影色。

插件使用录屏

有兴趣的可以下载插件体验，下载地址：http://test.mwegame.qq.com/ui/act/three/TrailRendererJS/PPdesign-UIKit.xdx

展望

由于XD官方目前暂未开放组件获取的API，因此现阶段还不能对做组件管理功能。后续期待XD官方能尽快开放组件的API，让我们开发更多好用的功能。

关于本文 作者：@腾讯P&Pdesign 原文：https://mp.weixin.qq.com/s/GNDr3v5ZE0egoGtFaaeYeg

@腾讯P&Pdesign曾分享过

欢迎自荐投稿，前端早读课等你来