使用 React-Sketchapp 管理你的設計資產

首發：https://www.yuque.com/jingwhale/blog/do37mc

最近在整理設計規範的過程當中，嘗試使用了 Airbnb 公司發佈的 react-sketchapp 工具。從react-sketchapp公佈之初，它就迅速被設計師和前端工程師們所關注，做爲非主流邊緣設計師，我被它所吸引，得知後便進行了瞭解並進行了體驗。

 

這個跨界的工具提供了一種很新穎的思路，在某些特定狀況下有其應用場景。

 

1、React - SketchApp 是啥？

React - SketchApp 是一個開源庫，爲設計系統量身定製。它經過將 React 元素渲染到 Sketch 來鏈接設計和開發之間的鴻溝。

這個神奇的開源庫給設計師們提供了一個全新的設計工做流程：在時下最流行的 React 前端框架下用代碼進行設計，並實時渲染到 Sketch 中審閱設計。細思恐極，在設計圈大紅大紫的 Sketch 雖然說佔了開源庫的一半名字，但其實擔當的只是一個瀏覽器的角色。真正留下的設計文檔則成了代碼。

 

2、爲啥？？爲啥？？

你必定在想，爲何好好的，忽然讓全部設計師用起代碼作設計了？爲啥又要用前段框架了？這成本對咱們來講有多高？聽聽 Airbnb 怎麼說。

 

一個設計系統可讓設計師複用樣式、組件、圖形，這能夠給設計師更多的時間去進行更高層次的思考。同時，一個好的設計系統也讓工程師自信地添加新功能，而不用去看密密麻麻的標註線，痛苦地和設計師來回調整像素。而一樣的，一個完善的設計系統通常都是很是龐大而複雜的，想有序地構建和發展這個系統，自己就有着巨大的工做量。在咱們團隊中，瓶頸就在 Sketch Template 上。

 

就拿 Airbnb 的設計系統 DLS 舉例，它從字體、顏色、間隙的規範開始，逐漸發展成了跨平臺、跨屏幕尺寸、跨語言的豐富設計庫。固然做爲一個設計系統，永遠也不會有完成的時候，咱們持續的向其中增長內容，更改和調整已有的組件，讓每個人均可以使用它。

 

可是在這個過程當中，每一點對這個系統的增長和更改，都會產生很大的工做量。文檔須要更新，每一個 App 都須要調整，Sketch Template 又要從新繪製。而全部這些工做還必須協同進行。

 

基於圖形的設計工具在版本控制上有着先天的劣勢，全部的能夠拖來拖去的元素常常讓咱們對設計系統的狀態產生不肯定感。「移動端 Title 字體是多大來着？」「如今最新的方案仍是這樣子麼？」「這個組件在不一樣屏幕上怎麼顯示？」諸如此類的問題在辦公室中幾乎是時時出現 。相反，代碼相對來講就更容易管理，同時咱們已經有了對代碼版本管理的積累和基礎。而維護 Sketch Template 還只能依靠勞動密集的人工管理。所以咱們但願經過代碼來優化整個工做流程。

 

Sketch 文件自己卻是能夠直接用代碼組織，可是提供的 API 卻常常變化。相反 React 框架給可複用文檔提供了完美的封裝形式，同時有前端基礎的設計師可能已經比較熟悉了。

 

3、核心優點

剔除 Airbnb，在仔細看了相關文檔和項目樣例後，總結出了一下這個開源工具在構建設計系統時的核心優點：

 

穩定的文檔：用成熟的前端框架做爲設計系統基礎，能夠保證整個設計系統長期的可用性。

 

數據的清晰準確：以代碼爲描述設計的形式，杜絕了基於圖片描述設計時容易產生的數據不穩定。

 

可進行響應式設計：比起 Sketch 略顯簡陋的 Resizing，React 提供了功能完備的佈局系統，能夠在設計端進行準確完整的響應式設計。

 

版本管理：避開了基於圖片設計的版本管理難點，git 等工具組織設計系統，讓系統更實時、可考。

 

跨平臺開發：由於和 ReactNative 採用同一套佈局系統，配合 ReactNative 能夠很好地進行跨平臺工做。

 

引入真實數據 & API：能夠和任何前端開發同樣引入真實的數據和 API 實現例如、等有趣的功能。

 

以上這些優點，確實能夠切中不少團隊在構建大型設計系統時的痛點。

 

相比之下 React - SketchApp 在這些問題下，跳出了原有的思考方式，用超前全新的方案解決目前方案的痛點。

 

4、使用React-Sketchapp製做styleguide模板

說了這麼多概念上的東西，你們必定很期待從實用角度看看它究竟是怎麼工做的，接下來就讓咱們對 React - SketchApp 作一個初步的體驗。對它一樣感興趣的也能夠根據下面步驟一塊兒嘗試。

 

一、code-sketch-resource 工程項目簡介

使用React-Sketchapp製做調色板和文字模板，效果以下：

1）調色板

                   

  

​

 

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 字體方案，是基於『動態秩序』的設計原則，結合了天然對數以及音律的規則得出。 在中後臺視覺體系中定義字體系統，建議從下面五個方面出發：

字體家族

主字體

字階與行高

字重

字體顏色

 

三、製做原理

調用的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

 

四、關鍵代碼分析

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：

• <Document>
• <Page>
• <Artboard>
• <Image>
• <RedBox>
• <Svg>
• <Text>
• <View>

 

更多具體代碼請參考code-sketch-resource項目庫。

 

5、總結

一、系統設計資源不只須要，並且很是須要使用react-sketchapp建立。用代碼組織管理系統設計資源Sketch 文件，是最好的方式。系統設計資源包括設計規範，它是有規律且相對固定的思惟產物，這很是適合用代碼管理。

 

二、React-sketchapp 只是提供了一個思路，打通程序與設計後，諸如此類的工具還有很是大的空間等待挖掘。

例如：使用代碼進行交互設計中頁面流程圖的繪製，亦或者是使用代碼進行自動配色系統。

 

三、人工智能交互設計？

既然組件是固定的，設計原則是固定的，爲何不能讓代碼進行交互設計併產出交互稿呢？你只須要輸入關鍵字，依次進行頁面佈局，功能設計等，偶爾手動調整局部組件位置大小便可。固然這種設想在中後臺設計系統中可省去50%-90%的設計和製做原型的時間；前臺設計須要更多的用戶體驗設計，能夠先設計初稿，再增強優化用戶體驗的設計。

固然，我已經在設計並實現這個系統了，是否是很使人激動呢！咱們拭目以待吧！

 

附：

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

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

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