Sketch の Color Variables からコードを生成するプラグインを作った

最初のバージョンの開発から3ヶ月近く経ちましたがタイトル通り Sketch の Color Variables からコードを生成する Sketch Plugin を開発したのでその紹介です。

griffin-stewie/ColorVariablesExporter: Export all Color Variables

何をするプラグインか

デザインツール Sketch のプラグインです。2020年10月にアップデートされた version 69 で追加された Color Variables という Sketch 上で定義されている色を開発者向けの書き出しをこのプラグインは行います。

対応フォーマット

僕自身が iOS app 開発者なので Apple Platform を中心に以下の形式に対応しています。

• Color Set
• 上記 Color Set を使った UIColor Extension
• color.xml
• JSON
• CLR ファイル

:::message Color Variables は Sketch 上でグルーピングして管理できます。Color Variables がグルーピングされている場合、対応フォーマットのほとんどが階層構造に対応していないため、このプラグインではそれっぽい区切り方で文字列を連結したりしています。 :::

Color Set の書き出しは Storyboard から色を参照したい人もコードから参照したい人も利用できるのでお勧めです。コードから Color Set を使うには文字列で対象の色を参照するのが嫌だったので UIColor の Extension も書き出せるようにしました。Color Set の書き出しと合わせて使う必要があります。UIColor Extension は SwiftGen が生成してくれるコードが気に入らなかったので作りました。RGB の Hex 形式で Doc コメントを書いているので色の値もわかりやすいかなと思います。

extension UIColor {
    /// #361D32 - 100%
    static let appKey: UIColor = UIColor(named: "app_key")!

    /// #543C52 - 100%
    static let appKeyLight: UIColor = UIColor(named: "app_key_light")!

    /// #F55951 - 100%
    static let appAccent: UIColor = UIColor(named: "app_accent")!
}

color.xml は使ったことはないですが こちらの実装を参考に作ったので、Android アプリケーションの開発に使えると思います。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="app_key">#FF361D32</color>
    <color name="app_key_light">#FF543C52</color>
    <color name="app_accent">#FFF55951</color>
</resources>

JSON 形式の書き出しは、他の形式で書き出したい場合のデータとして利用されることを想定して用意しました。jq と組み合わせて CSV にするとかもできますね。階層構造はオリジナルデータのままにしています。 / を適宜処理してもらうと良いかと思います。

{
  "App/Key": "#361D32FF",
  "App/Key Light": "#543C52FF",
  "App/Accent": "#F55951FF"
}

CLR ファイルは、macOS の Color Picker で参照できる形式です。利用用途はあまりなさそうですが Keynote や他のデザインツールなどに持ち込みたいときに使えるかもしれません。

サンプル

元データとなる Sketch ファイルと全形式を書き出したサンプルを置いているので気になる方はみてみてください。

さいごに

個人的には Sketch データと iOS アプリケーション開発での色のやりとりや管理に悩んでいました。そこに登場した Color Variables は待望の機能です。リリース時にすでに API も整備されていたのですぐにプラグインが書ける状況だったのですぐに着手できた事にテンションが上がった記憶があります。

Sketch Plugin の開発は簡単ですので皆さんもぜひチャレンジしてみてください。