トップ > design system > design tokens の管理ツールのpros/cons

design tokens の管理ツールのpros/cons

design system design tokens sketch

CSS or SassとSketchでdesign tokensを共有したい場合、どうやってdesign tokensを管理するべきか。

調べた感じだと、現時点だと以下のツールあたり。

  • theo
  • brand.ai
  • Lingo

これらのpros/consをざっと見ていく。

theo

theoを利用することで、CSS、Sass、ios用のjson、android用のxmlなど各プラットフォームに合わせてフォーマット別にdesign tokensを生成することができる。

github.com

token.ymlからscssとjsonのフォーマットにdesign tokensを生成する場合は以下のような形でtheoコマンドを実行する。

$ theo token.yml -- --transform web --format scss, json --dest .

これでtoken.ymlをSingle source of truthとしてdesign tokensを管理できる。 ただ、これをSketch側で参照するのに良い方法が今のところ見つかってない。

カラーパレットに限定すると、theoからsketchプラグインのsketch-palettesでimportできる形にすればsketchから参照できるようにはなる。

github.com

sketch-palettesでimportできる状態にするには.sketchpaletteファイルでないといけないので、theoのregisterFormatでフォーマットを追加して、sketchpaletteに変換する。

const theo = require('theo')
const fs = require('fs-extra')

theo.registerFormat('sketchpalette', (res) => {
  const colors = res.get('props').map(prop => {
    return '"' + prop.get('originalValue') + '"'
  }).toJS()
  const version = require('./package.json').version

  return `
    {
      "pluginVersion": "${ version }",
      "colors": [${ colors }]
    }
  `
})

theo.convert({
  transform: {
    type: 'web',
    file: require('path').resolve(__dirname, './token.yml'),
  },
  format: {
    type: 'sketchpalette',
  }
}).then((res) => {
  fs.outputFile('./token.sketchpalette', res)
  console.log('✏️  Palette created!')
}).catch((err) => {
  console.log(err)
})

これで生成したsketchpaletteファイルをsketch-palettesプラグインからsketchに読み込む。

sketch-paletteからカラーパレットの読み込み

読み込んだらsketchで色を選ぶときにGlobal ColorsかDocument Colorsの選択肢に反映された状態になる（sketch-palettesで読み込むときのSourceの選択肢次第）。

sketchのカラー選択

Pros

  • コードでdesign tokensを管理できる
  • sketch以外は無料

Cons

  • design tokensの種別毎にsketchで参照する方法を調べる必要がありそう
  • カラーパレットを読み込めはするけど、sketch上でdesign tokensの色のみを使用する強制力は弱そう

brand.ai

brand.aiは個人利用だと無料だけど、複数人で利用する場合は有料になる。今後Craftあたりと統合されてInvision Design System Managerの一部になっていくのか、ちょっとその辺があんまり分かってないけど、

support.invisionapp.com

とりあえず2018/01/03時点で利用できるbrand.aiはsketchのプラグインも用意されていて、ウェブとsketch両方でdesign tokensを編集・参照できる。

brand.aiのウェブ画面

ダウンロードして利用する手間はあるけど、SassやJSON、XML、YMLなど各種フォーマットでdesign tokensを利用できるようにもなっている。

バージョン管理ができるようになっていたり、slackに通知できるようになってたりする。

Pros

  • Invision Design System Managerでさらに強力なツールになっていく可能性が高い
  • Sketch側でdesign tokensを参照することが容易にできる

Cons

Lingo

Lingoはbrand.aiと同じようにGUIでdesign tokensを管理するツール。

www.lingoapp.com

design tokensをLingoと同期すると、Sketch側でテンプレートから参照・再利用できるようになる。

brand.aiとは違って各種フォーマットでダウンロードできるようにはなってない。一応コピペはできる程度。

Lingoのカラーの各種フォーマット

brand.aiのようなSketchへの通知機能だったり、バージョン管理の機能などは持ってないっぽい。

Props

  • Sketchからの参照が容易

Cons

  • アセット数に応じて有料
  • コードでdesign tokensを管理できない

ここまで見た感じから判断すると、コード中心でdesign tokensを管理することにこだわるんであればtheoでなんとか頑張る 。コード中心で管理することに拘らないんであれば、brand.ai -> 今後の Invision Design System Manager の動きに注目っていうような形になる。