スクリーンショット_2019-08-26_10

デザインシステム構築ツール Specify (アルファ版) を使ってみた

デザインシステムを構築するためのツール、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との連携についても検討されているみたいですしね。

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

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

(๑˃̵ᴗ˂̵)و
2

711fumi

UI / Digital Product Designer めざせやさしいインターネット。 デザインのこととか書けたらいいですよね〜それ以外のことでもいいですよね〜 https://www.711fumi.info/

アート×デザイン=クリエイティブ

アートとは「自己表現を通じて鑑賞者の感情を励起する装置」であり、デザインとは「機能や目的に向けてユーザーの行動をアフォードする装置」である。故に両者の総和たるクリエイティブとは「暗黙知を通じて人々に新しい知見や体験を与えるプロダクトを生む活動」に他ならない。
1つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。