又雙叒叕搶行了？使用 React 管理你的設計資產

dwb發表於2018-04-19
React

前言

最近在整理設計規範的過程中，嘗試使用了 Airbnb 公司釋出的 react-sketchapp 工具，感覺非常好用，在這裡牆裂推薦一哈，順便聊一聊使用過程中的體會：

這是一個使用 React 生成 Sketch 檔案的命令列工具，主要用於生成設計系統(design system)，**簡單來說就是使用 程式碼 生成 設計稿 **。這個跨界的工具提供了一種很新穎的思路，在某些特定情況下有其應用場景。

設計師同學們可能不瞭解 React，如果你們想了解一點點程式設計的話，從這個工具開始學習，可能是一個很好的入口 ?

為什麼要用程式碼生成設計稿

用程式碼生成設計稿是一種新穎的思路，那麼為什麼要這樣做呢？這樣做有什麼好處？官方是這樣介紹的：

Managing the assets of design systems in Sketch is complex, error-prone and time consuming. Sketch is scriptable, but the API often changes. React provides the perfect wrapper to build reusable documents in a way already familiar to JavaScript developers.

簡言之：程式碼可以更好地控制設計資產的版本迭代。這也是我們使用這個工具的核心原因：設計資產的穩定迭代能夠提高設計師與零設計團隊的工作效率。

在設計規範逐漸複雜時，對規範的版本迭代變得越來越難。以往設計師需要手動去修改規範，這樣往往容易出錯，而且速度比較慢，尤其是製作一些重複性較強的內容的時候，例如調色盤上面可能會有上百種顏色，這些色彩可能會頻繁調整。

除此以外，使用程式碼生成設計稿還有一些優點：

  1. 程式碼可以方便地輸出重複性的檢視
  2. React-sketchapp 這個工具使用 React 的語法，有利於程式上的複用，包括元件程式碼及其樣式。個人感覺寫起來很像 React Native
  3. 使用真實資料或元件生成設計稿，這將使設計稿與最終產出的頁面更接近
  4. 基於 Sketch 定製一些效率工具，舉個例子：通過簡單的配置生成完整設計規範

如何使用？

快速上手

上手 react-sketchapp 很簡單，首先確保你已經安裝了 43 及以上版本的 sketch，確保安裝了 npm。

然後在終端中執行下面三句命令：

git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup
npm install
複製程式碼

這三句命令的作用是從 github 上將 react-sketchapp 專案克隆到本地，進入專案的 /examples/basic-setup 目錄並安裝依賴檔案。

安裝完成後新建一個 sketch 檔案，這裡注意一定要新建檔案，react-sketchapp 會在當前最新開啟的 sketch 檔案進行輸出！

然後在終端中輸入下面這條命令並執行（執行後請不要關閉終端視窗）：

npm run render
複製程式碼

在 sketch 檔案中看到下圖的樣子說明配置成功：

又雙叒叕搶行了？使用 React 管理你的設計資產

用編輯器開啟 react-sketchapp 目錄，裡面 /examples/basic-setup/src/my-command.js 就是上圖的程式碼，現在可以複製官方給的一段示例程式碼到這個檔案中簡單地看下效果：

import React from 'react';
import { render, Text, Artboard } from 'react-sketchapp';

const App = props => (
  <Artboard>
    <Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>
      {props.message}
    </Text>
  </Artboard>
);

export default (context) => {
  render(<App message="Hello world!" />, context.document.currentPage());
}
複製程式碼

點選儲存，sketch 檔案會自動重新整理，重新整理後是下圖的效果：

又雙叒叕搶行了？使用 React 管理你的設計資產

使用 API

react-sketchapp 提供了全面的 API，包含了絕大部分 sketch 的功能

首先開啟 API 文件地址, 左側的 API Reference 就是 API 列表，這裡面我常用的 API 有：

  • Document: sketch 文件
  • Page: 頁面
  • Artboard: 畫板
  • Image: 影像
  • Text: 文字
  • View: 資料夾（矩形），類似 React Native 中的 View 元件
  • StyleSheet: react-sketchapp 封裝了一些樣式的函式，使用它可以更好的複用程式碼
  • TextStyles: 共享文字樣式

使用這些元件的時候，需要在檔案頂部進行 API 的引用，以逗號分隔，不引入則會報錯：

import { Document, Page, Artboard , ... } from 'react-sketchapp';
複製程式碼

現在來嘗試組合使用上述 API，輸出一個頁面：

import React from 'react';
import { render, Document, Page, Artboard, View, Text, Image } from 'react-sketchapp';

const App = props => (
  <Document>
    <Page>
      <Artboard name="ymfe.org">
        <View name="box" style={{ width: 140, height: 140, backgroundColor: '#333' }}>
          <Text name="title" style={{ color: '#fff' }}>Hello</Text>
          <Image source="https://ws1.sinaimg.cn/large/006oPFLAly1fqg4tqz7d2j30be06mjrl.jpg" style={{ height: 120, width: 140 }} />
        </View>
      </Artboard>
    </Page>
  </Document>
);

export default (context) => {
  render(<App/>, context.document.currentPage());
}
複製程式碼

上述案例的輸出結果是：

又雙叒叕搶行了？使用 React 管理你的設計資產

除了上述這些基本功能，react-sketchapp 甚至還可以輸出 Symbol，例如如下程式碼：

import React from 'react';
import { render, View, Artboard, makeSymbol } from 'react-sketchapp';
const BlueSquare = () => (
  <View
    name="Blue Square"
    style={{ width: 100, height: 100, backgroundColor: 'blue' }}
  />
);

const BlueSquareSymbol = makeSymbol(BlueSquare);

const Main = () => (
  <Artboard>
    <BlueSquareSymbol />
  </Artboard>
);

export default (context) => {
  render(<Main />, context.document.currentPage());
}
複製程式碼

執行後輸出結果是：

又雙叒叕搶行了？使用 React 管理你的設計資產

這將帶來更大的可能性：直接用程式碼輸出完整 UI Kit 模板檔案

我們的實踐

我們根據一系列色彩、字號引數，使用 react-sketchapp 製作了設計規範的調色盤、文字規範及專案色彩規範。

由於開發的專案獨立性較強，有些專案需要進行一定的定製（一般是字號、顏色），因此基於 頂級設計規範 來制定 專案設計規範，我們在 YDoc - 優雅的文件站構建工具 中率先使用了匯出的專案設計規範，並嚴格執行，取得了不錯的效果：

有興趣同學可以檢視 YDoc 專案規範檔案 , 完全用 react-sketchapp 輸出的 sketch 檔案：

又雙叒叕搶行了？使用 React 管理你的設計資產

進一步思考

1. 零設計團隊需要設計規範嗎

國內很多團隊缺少設計師，或者設計資源不夠充足，往往需要程式設計師直接上手進行設計（尤其是中後臺系統），這時程式設計師就會跟著感覺走，寫出醜陋的頁面甚至難以維護的程式碼。缺乏規範的頁面即使使用了美觀的 UI 庫也會成為東施效顰，不倫不類。

因此對於這樣的團隊來說，程式設計師學習一些設計規範的基本使用方式，將會大大改善這一情況：遵循一定的設計規範進行設計將會快速提高這些頁面的顏值，工具賞心悅目，使用者使用起來工作也會很開心。

2. 效率工具

前面提到了 React-sketchapp 可以基於 Sketch 定製一些效率工具，這其實帶來了無限的可能性：

這些工具的輸入可以是非常簡單的一些配置項，例如產品的顏色、文字大小等，而這些工具的最終產物可能是 Sketch 檔案、PDF檔案、也可能是程式碼或圖片，其中 Sketch 檔案可用於生成設計規範，提供給設計師進行業務元件的二次設計；PDF 可以直接用於瀏覽列印；圖片可以單獨使用，也能夠以 案例圖 的形式存在。

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

3. 關於程式設計師使用設計工具

由於程式學習成本很高，我們僅在自研專案中做了這樣的嘗試，因此在設計稿中經常會看到一些工程師思維 ?

在設計規範的製作中，我們團隊遇到了這樣一種情況：有同學進行了一次有趣的嘗試，將 JavaScript 中 原型鏈(prototype) 的思想應用到 Sketch 的 Symbol 中，由於 Symbols 中很多元件都類似，因此相似元件繼承自同一個 Symbol 而只改變文字顏色、邊框、背景色等屬性，如下圖：

又雙叒叕搶行了？使用 React 管理你的設計資產

此外，還將常用屬性製作成配置項，只需進行選擇即可修改元件樣式：

又雙叒叕搶行了？使用 React 管理你的設計資產

這些優化其實有點過度封裝了：

  • 前者原型鏈模式可讀性太差，設計師很難理解，但是可以把原型寫到程式裡，在 sketch 設計稿中隱藏這一概念，這樣既有利於維護設計稿，又利於 sketch 檔案的使用；
  • 後者封裝的配置項過於死板，不夠靈活：實際開發中設計師往往將設計稿中的元件分離，對屬性逐個調整，而我們預設的配置項往往無法滿足各式各樣的需求，反而會增加設計稿的製作成本。

總結：

用程式碼控制設計規範的迭代，是一個很新穎的想法，在設計與技術之間跨界，實現難度比較大。react-sketchapp 這個工具提供了很多可能性，讓藝術與技術能夠更緊密地聯絡起來，讓技術可以為藝術提供更好的支援。

我們尚在摸索中前行，做了一些大膽的嘗試，就讓時間證明它創造的價值吧 ?

相關連結：
知乎原文文章
團隊官網
個人部落格

相關文章