使用 React-Sketchapp 管理你的设计资产

在制定设计规范时，尝试采用了 Airbnb 开发的 react-sketchapp 工具。这款创新性的跨界工具提出了一种全新的处理方式，并在特定场景下展现出了独特的应用价值。

 

一、React - SketchApp是什么

React - SketchApp 是一个开源库，为设计系统量身定制。它通过将 React 元素渲染到 Sketch 来连接设计和开发之间的鸿沟。

这个神奇的开源库给设计师们提供了一个全新的设计工作流程：在时下最流行的 React 前端框架下用代码进行设计，并实时渲染到 Sketch 中审阅设计。细思恐极，在设计圈大红大紫的 Sketch 虽说占了开源库的一半名字，但其实担当的只是一个浏览器的角色。真正留下的设计文档则成了代码。

 

二、为什么用起代码做设计

你一定在想，为什么好好的，突然让所有设计师用起代码做设计了？为啥又要用前段框架了？这成本对我们来说有多高？听听 Airbnb 怎么说。

一个设计系统可以让设计师复用样式、组件、图形，这可以给设计师更多的时间去进行更高层次的思考。同时，一个好的设计系统也让工程师自信地添加新功能，而不用去看密密麻麻的标注线，痛苦地和设计师来回调整像素。而同样的，一个完善的设计系统一般都是非常庞大而复杂的，想有序地构建和发展这个系统，本身就有着巨大的工作量。

 

三、核心优势

剔除 Airbnb，在仔细看了相关文档和项目样例后，总结出了一下这个开源工具在构建设计系统时的核心优势：

 

  • 稳定的文档：用成熟的前端框架作为设计系统基础，可以保证整个设计系统长期的可用性。
  • 数据的清晰准确：以代码为描述设计的形式，杜绝了基于图片描述设计时容易产生的数据不稳定。
  • 可进行响应式设计：比起 Sketch 略显简陋的 Resizing，React 提供了功能完备的布局系统，可以在设计端进行准确完整的响应式设计。
  • 版本管理：避开了基于图片设计的版本管理难点，git 等工具组织设计系统，让系统更实时、可考。
  • 跨平台开发：因为和 ReactNative 采用同一套布局系统，配合 ReactNative 可以很好地进行跨平台工作。
  • 引入真实数据 & API：可以和任何前端开发一样引入真实的数据和 API 实现例如、等有趣的功能。

 

以上这些优势，确实可以切中很多团队在构建大型设计系统时的痛点。

相比之下 React - SketchApp 在这些问题下，跳出了原有的思考方式，用超前全新的方案解决目前方案的痛点。

 

四、使用React-Sketchapp制作styleguide模板

说了这么多概念上的东西，大家一定很期待从实用角度看看它到底是怎么工作的，接下来就让我们对 React - SketchApp 做一个初步的体验。对它同样感兴趣的也可以根据下面步骤一起尝试。

 

1、code-sketch-resource 工程项目简介

使用React-Sketchapp制作调色板和文字模板，效果如下：

1）调色板

Color.png                   
  

​

 

2）字体

Text副本.png                  

2、调色板与文字原理

1）调色板

调色板是一组规律的16进制码。可以将色彩体系解读成两个层面：系统级色彩体系和产品级色彩体系。系统级色彩体系主要定义了中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。这里选用的是Ant Design的色彩系统。

 

Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。

 

色板生成算法 主要代码：源代码：ant-design-colors

function main(color, index) {
    var isLight = index <= 6;
    var hsv = tinycolor(color).toHsv();
    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
    // i 为index与6的相对距离
    console.log(hsv)
    return tinycolor({
        h: getHue(hsv, i, isLight),// getHue 获取色相渐变
        s: getSaturation(hsv, i, isLight),// getSaturation 获取饱和度渐变
        v: getValue(hsv, i, isLight),// getValue 获取明度渐变
    }).toHexString();
};

 

根据颜色值、色号与主色色号(6)差的绝对值、减淡/加深这三个参数获取渐变后的色值，其中 HSV 的三个值分别经过了渐变调整：

“Hue”(色相)的渐变核心代码如上，首先判断冷暖色调；

“Saturation”饱和度的渐变核心代码如上，对于减淡与加深的饱和度进行了不同的处理，其中减淡递减的值更大，说明减淡的过程中饱和度迅速下降，而由于主色的饱和度一般较高，因此加深的时候饱和度不必增张过快，尤其是最深的颜色，进行了特殊处理。

“Value”明度的渐变核心代码如上，对于减淡与加深的明度进行了不同的处理，其中加深递减的值更大，说明加深的过程中明度迅速下降，这是由于主色的明度一般较高，因此减淡的时候明度不宜增长过多。

 

综合来看 3.x 色板生成算法的实现可以看到，主色的选取很重要，一般主色选取饱和度较高、明度较高的颜色才能更好地匹配这个色板生成算法。

 

2）字体

字体是体系化界面设计中最基本的构成之一。我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。Ant Design 字体方案，是基于『动态秩序』的设计原则，结合了自然对数以及音律的规则得出。 在中后台视觉体系中定义字体系统，建议从下面五个方面出发：

字体家族

主字体

字阶与行高

字重

字体颜色

 

3、制作原理

调用的API，在编辑器中通过React代码绘制SketchUI规范。

 

具体的，通过调用Ant Design 的色板生成算法ant-design-colors产生出基础色板和中性色板的颜色值，然后使用React-Sketchapp基础组件编写代码渲染到Sketch的当前页面中。字体模板亦是如此。

 

具体步骤如下：

1）、确保，本地安装Node，git。

 

2）、本地Clone code_sketch_resource 工程项目

code_sketch_resource项目依据React-Sketchapp官方项目的styleguide例子基本框架。

git clone https://github.com/jingwhale/code_sketch_resource

 

​
3）运行项目，进入styleguide文件夹
npm install
npm run render

 

4、关键代码分析

1）获取调色板色值：

首先，依赖ant-design-colors组件库

$ npm install @ant-design/colors --save

 

其次，获取调色板色值

import { generate, presetPalettes } from '@ant-design/colors';

// Generate color palettes by a given color
const colors = generate('#1890ff');
console.log(colors); // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']

console.log(presetPalettes);
/*
{
  red: [...],
  volcano: [...],
  orange: [...],
  gold: [...],
  yellow: [...],
  lime: [...],
  green: [...],
  cyan: [...],
  blue: [...],
  geekblue: [...],
  purple: [...],
  magenta: [...],
}
*/

 

 

2）调色色板UI开发

调色色板UI：父组件Palette_new.js和子组件Swatch_new.js。代码如下：

父组件Palette_new.js

// @flow
import * as React from 'react';
import { View,Text} from 'react-sketchapp';
import SwatchN from './Swatch_new';

const SWATCH_WIDTH = 285;

type P = {
  colors: any,
};
const PaletteN = ({ name,colors}: P) => (

  <View
     name={name}
    style={{
      width: SWATCH_WIDTH,
      flexWrap: 'wrap',
      marginRight: 33,
      marginBottom: 64
    }}
  >
      <Text style={{width:SWATCH_WIDTH,textAlign:"center",marginBottom:16}}>{name}</Text>
      {Object.keys(colors).map(index => (
      <SwatchN color={colors[index]} index={+index+1} name={name}/>
    ))}
  </View>
);

export default PaletteN;

 

 子组件Swatch_new.js

// @flow
import * as React from 'react';
import { View,Text} from 'react-sketchapp';
import type { Color } from '../processColor';

const SWATCH_WIDTH = 285;
const SWATCH_HEIGHT = 56;

type P = {
  name: string,
  color: Color,
};
const SwatchN = ({ color ,index,name}: P) => (
    <View
      name={name+"-"+index}
      style={{
        width: SWATCH_WIDTH,
        height: SWATCH_HEIGHT,
        backgroundColor: color,
        flexDirection: 'row',
      }}

    >
      <Text style={{width: 128,height: "20",color:index<6?"#000":"#fff",marginLeft:"12",marginTop:"18"}}>{name+"-"+index}</Text>
      <Text style={{width: 128,height: "20",color:index<6?"#000":"#fff",textAlign:"right",marginTop:"18"}}>{color}</Text>
  </View>
);

export default SwatchN;

 

3）react-sketchapp主要Components：

 

更多具体代码请参考code-sketch-resource项目库。

 

五、总结

1、系统设计资源不仅需要，而且非常需要使用react-sketchapp创建。用代码组织管理系统设计资源Sketch 文件，是最好的方式。系统设计资源包括设计规范，它是有规律且相对固定的思维产物，这非常适合用代码管理。

 

2、React-sketchapp 只是提供了一个思路，打通程序与设计后，诸如此类的工具还有非常大的空间等待挖掘。

例如：使用代码进行交互设计中页面流程图的绘制，亦或者是使用代码进行自动配色系统。

 

3、人工智能交互设计？

既然组件是固定的，设计原则是固定的，为什么不能让代码进行交互设计并产出交互稿呢？你只需要输入关键字，依次进行页面布局，功能设计等，偶尔手动调整局部组件位置大小即可。当然这种设想在中后台设计系统中可省去50%-90%的设计和制作原型的时间；前台设计需要更多的用户体验设计，可以先设计初稿，再加强优化用户体验的设计。

 

附：

https://github.com/jingwhale/code-sketch-resource

https://github.com/airbnb/react-sketchapp

https://github.com/ant-design/ant-design-colors

 

posted @ 2019-03-09 17:48  jingwhale  阅读(1430)  评论(0)  编辑  收藏  举报