Sketchプラグイン `DesignToken2Code` を作ってみた
はじめまして。松本芳郎と申します。
デザイナーですが、コーディングばかりやっているものです。
DesignToken2CodeというSketch プラグインを公開いたしました。Sketchデータ内のシェイプからSASS用のカラー変数をコマンド一発でシュッと作成するものです。
「初めてのプラグイン作成！初めてのOSS！」といった私的事情もあり、やりきった気持ちになってしまいそうです。
しかし、作ったツール以上に、ツールを通して自分の考えを公表することが大事だと、会社の凄腕エンジニアに教わりました。
ツールを作りどんな課題を解決しようとしたのか、動機など記しておこうと思います。
※ 本記事では、コーディング・コードという単語をWebアプリを想定して使用しています。
・きっかけはスタイルガイドの運用
・Design Token | デザインの構成要素を命名する
・Sketchとコードの維持は大変
・「面倒な変換は自動化したい」からプラグインを作った
きっかけはスタイルガイドの運用
私の所属しているサービスでは、最近サイトのリニューアルを行いました。
それをきっかけに、デザイン資産を管理する仕組みを整備していきました。UIデザインはSketchを用いてパターンライブラリーを作成して、コーディング側の実装もスタイルガイドを作成しました。
そして、Sketchとコードでコンポーネントの名称を同期するようにしています。（手作業）
Design Token | デザインの構成要素を命名する
Design Tokenとは、プロダクトのビジュアルを構成する最も原始的な要素です。色、フォントサイズ、スペーシングにプロダクト固有の値を定義し、それぞれに名前をつけます。イメージしずらい方は、各社が公開している実物を覧いただくと分かりやすいと思います。
私のサービスでもDesign Tokenを定義しました。ここでもSketchとコード間で名称を同期するようにしました。
Sketchとコードの維持は大変
Sketch上で定義したDesign Tokenは、コードの方ではDesign Tokenの名前を持った変数に変換します。手作業です。例えば、50色のDesign Tokenがあるならば、それらを全て手作業でコードに落とし込みます。大変！
開発初期は、Design Tokenの変更が頻繁に生じます。また、手動だと人為的ミスも避けられません。
徐々にSketchとコードの乖離が入り込んでいきます。
「乖離しない開発フローが欲しい」からプラグインを作った
ようやくプラグインの話です。
DesignToken2Codeは、Sketch上で作成したDesign Tokenをシュッとコード化するためのプラグインです。（現在はカラーのみ対応ですが…）
これを開発フローに組み込むことで、乖離しない開発フローに近づけたいと考えています。例えば、以下のようなルールを作る。
コード上のDesign Tokenの変数は、Sketchからプラグインを使用して編集すること
すると、Sketchデータが起点でコードに変換されるので、乖離する心配はぐっと減ります。
最後に
私は「Sketchとコードが乖離しやすい」という課題に、上記のような解決案を考えました。しかし、いろんな解決方法があると思います。
こっそりと教えて頂けますと幸いです。
あと、プラグインの改善案・不具合報告等もお待ちしております。