デザインシステムを構築するためのツール、Specifyのアルファ版が使えるようになったので少し触ってみました。
(Ver 0.7.1)

なぜSpecifyに期待するのか

私はWebアプリの（UI）開発に関わっているのですが、デザインのアウトプットとして一番管理されるべきなのは「ソースコード（HTML/CSSなど）」だと思っています。
（もちろん自分の役割、担当範囲、チームのスタイルによりますが）
実際にユーザーに届くのはUIモックアップやプロトタイプではなく、アプリケーション上で提供されるソースコードだからです。
なので個人的にはUIモックアップやプロトタイプは設計やコミュニケーションのためのツールとして利用しており、厳格な管理はおこなっていません。

というわけで、デザインシステムで提供されるデザインルールやコンポーネントライブラリなども、アプリケーションのソースコードを見える化するような構造にしたいと思っています。

しかし既存のデザインシステムのツールは、プロダクトのソースコードではなくUIモックアップなどのいわゆるデザインファイルと同期させる機能に力を入れているものが多いように感じていました。
もちろんそれも重要だしありがたいんですけど。

そんなときに見つけたのがSpecifyでした。
ソースコード（GitHub）との連携機能が特徴としてあげられていたので、これは私のやりたいことができるんじゃないか…！と感じアーリーアクセスに申し込みました。

アルファ版が使えるようになったので、ちょっと使ってみました。

スタイルの定義

現状選べるのは以下の要素。コンポーネントライブラリとしての機能はまだないのかな？

Colorの定義を作成するとこんな感じに。
よくあるスタイルガイドの機能ですね。

コードのインテグレーション機能

例えば↑で作ったColorの定義を、GitHubのリポジトリに反映させることができます。

まずはGitHubとの連携、反映させるリポジトリの情報

次に形式の選択

ファイル名の指定

リポジトリへの反映の仕方も選べます

リポジトリと反映させたいスタイル定義の設定ができたら、Specify上でのスタイル定義の変更をリポジトリに反映させることができるようになります。

今後期待すること

今回紹介した機能は「SpecifyからGitHubへ」の連携でしたが、ソースコードを中心に管理していきたい私としては「GitHubからSpecifyへ」変更を反映する機能があると嬉しいなーと感じました。

プロダクトのロードマップにはそのへんについての機能案も出ていたので、実装されることを願っています。

あとコンポーネントガイドの機能はまだこれから実装されるっぽいので、そこも期待しています。
Storybookとの連携についても検討されているみたいですしね。

アップデートを楽しみに待っています。