はじめまして。松本芳郎と申します。
デザイナーですが、コーディングばかりやっているものです。

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とコードが乖離しやすい」という課題に、上記のような解決案を考えました。しかし、いろんな解決方法があると思います。
こっそりと教えて頂けますと幸いです。

あと、プラグインの改善案・不具合報告等もお待ちしております。