react-sketchapp で新規プロジェクトを作ってsketchに描画する #JavaScript

やったこと

react-sketchapp/examples 内にディレクトリを作って、sketch上に描画できるようにしました。

前提

知識

node, npm はなんとなくわかります
sketchは使ったことありません
react, redux は実務で触ったことあります

環境

sketch 43.2(trial)
node.js 6.9.1
npm 3.10.8
react-sketchapp/examples/original で新規ディレクトリを作成

1. package.json作成, npm install

他のサンプルからコピーして,name,main,authorを書き換えます。mainはjsファイルではなくスケッチプラグインにします。

package.json

{
  "name": "original",
  "private": true,
  "main": "original.sketchplugin",
  "manifest": "src/manifest.json",
  "scripts": {
    "build": "skpm build",
    "watch": "skpm build --watch",
    "render": "skpm build --watch --run",
    "render:once": "skpm build --run",
    "link-plugin": "skpm link"
  },
  "author": "DesignChips <info@designchips.net>",
  "license": "MIT",
  "dependencies": {
    "chroma-js": "^1.2.2",
    "react": "^15.4.2",
    "react-sketchapp": "^0.10.0",
    "react-test-renderer": "^15.4.2",
    "react-with-styles": "^1.4.0"
  },
  "devDependencies": {
    "skpm": "^0.8.0"
  }
}

パッケージのインストール

$ npm i

2. manifest.json作成

これも他のサンプルから流用します。以下は、styleguideからコピーしてnameを変更し、menuの部分は消したものになります。

src/manifest.json

{
  "compatibleVersion": 1,
  "bundleVersion": 1,
  "commands": [
    {
      "name": "react-sketchapp: Original",
      "identifier": "main",
      "script": "./main.js"
    }
  ]
}

3. main.js 作成

Artboardはsketchのアートボード
Textは文字を入れる div
ViewはTextやLabelを囲むdiv
Labelはstyleguideのサンプルからsrc/components にコピーしたものを使用(marginBottomを変更しました。)
render は ReactDOM.render のレンダリング対象がsketchになったもの（だと思います）
Articleは独自に作成したコンポーネントを利用

src/main.js

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

import Label from './components/Label';

const App = props => (
  <Artboard>
    <Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>
      { props.message }
    </Text>
    <View name="Intro" style={{ width: 420, marginBottom: 30 }}>
      <Label>
        This is an example react-sketchapp document, showing how to
        render a styleguide from a data representation of your design system.
      </Label>
    </View>
  </Artboard>
);

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

4. 試しに表示してみる

sketchであらかじめnew Documentを作成した状態にし、original/ で以下を実行。sketchを

npm run render

5. 独自に定義したコンポーネントを追加

src/main.js(変更後)

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

import Label from './components/Label';
import Article from './components/Article';

const App = props => (
  <Artboard>
    <Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>
      { props.message }
    </Text>
    <View name="Intro" style={{ width: 420, marginBottom: 30 }}>
      <Label>
        This is an example react-sketchapp document, showing how to
        render a styleguide from a data representation of your design system.
      </Label>
    </View>
    <Article/>
  </Artboard>
);

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

src/components/Article.js(新規作成)

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

const Article = () => {
  const styles = {
    articleWrap: {
      width: 960,
      flexWrap: 'wrap',
      flexDirection: 'row',
      justifyContent: 'flex-start',
    },
    article: {
      width: 460,
      padding: 10,
      margin: 10,
      flexWrap: 'wrap',
      flexDirection: 'row',
      justifyContent: 'flex-start',
    },
    thumbnail: {
      width: 120,
      height: 90,
      marginRight: 15,
      backgroundColor: '#eee',
      flexShrink: 0,
    },
    title: {
      color: '#333',
      fontWeight: 'bold',
      fontSize: 24,
      lineHeight: '1.3em',
    },
    content: {
      color: '#333',
      fontWeight: 'normal',
      fontSize: 16,
      lineHeight: '1.5em',
    }
  };

  const strings = {
    image: '',
    title: '記事のタイトルが入ります。',
    content: '記事の本文が入ります。',
  };

  return (
    <View style={styles.articleWrap}>
      <View style={styles.article}>
        <View style={styles.thumbnail}/>
        <View>
          <Text style={styles.title}>{strings.title}</Text>
          <Text style={styles.content}>{strings.content}</Text>
        </View>
      </View>
      <View style={styles.article}>
        <View style={styles.thumbnail}/>
        <View>
          <Text style={styles.title}>{strings.title}</Text>
          <Text style={styles.content}>{strings.content}</Text>
        </View>
      </View>

    </View>
  );
};
export default Article;

6. sketchの描画を確認

できたこと・できなかったこと

できたこと

examples 内に新規プロジェクトの作成
独自に作成してコンポーネントの描画
examples の外側に移動しても動きました（~/Desktop で確認）

できなかったこと

styleguideのサンプルで使われている{...css(styles.container)}の使用
- withStylesの利用方法がよくわかりませんでした。themeを作れば動くかもしれません。
const Article ... の外でスタイルを定義
- サンプルではwithStylesで行っていましたが動かし方がわかりませんでした。react-reduxのconnectと同じような考え方のもの？

使ってみた感想

自分はReactは動かすぐらいはできますが、デザインができないので、react-sketchappをうまく使いこなせそうにはないです。

やっぱり海外のデザイナーさんはReactもできて当然なのでしょうか。

View や Text がsketchへの描画だけでなく、通常のアプリ内でも使えるのであれば便利だと思いました。

以上です。