style dictionaryを使ってみた
はじめに
デザインシステムというとstorybookなどのUIライブラリをイメージしてしまい、影響範囲や運用コストを考えるとなかなか重い腰があがらずにいました。
そのような中で、デザイントークンを一括で管理するStyle Dictionaryというライブラリがあることを知ったので紹介したいと思います。
デザインシステムがなぜ必要か
デジタル庁ではデザインシステムを構築・推進する目的として、4点あげています。
- デザインと開発を効率化し、利用者の課題解決に集中する
- 大規模なサービスで素早く改善サイクルを回す
- 一貫性を担保し、行政サービスを使いやすくする
- 開発チームの円滑なコミュニケーション
行政サービスも民間サービスもこの目的は同様ではないかと思います。
デザイントークンとは
デザイントークンとはデザインシステムにおいて信頼できる最も基礎的な情報です。
具体的には、色、余白、行間、フォント、フォントサイズ、アニメーション時間、アイコンなどで、サービスの「らしさ」を伝える要素です。
Style Dictionaryとは
Amazonが開発しているデザイントークンの管理を手助けしてくれるライブラリです。
JSON形式で定義したスタイルを、CSS, iOS, Androidなど様々なプラットフォームで利用できるフォーマットに変換・出力してくれます。
単一のソースから生成することで、プラットフォームによってデザインに差異が出ることがなくデザインシステムの一貫性の維持が期待できます。
導入
StyleDictionaryをインストールします。
$ npm i -g style-dictionary
$ style-dictionary init ${example}
style-dictionary init ${example}は、exampleをもとに設定が作成されるので、簡単に試してみることができます。
exampleには、basic または completeを選択します。
style-dictionary init basicで作成されるファイルの役割は下記の通りです
- tokens/**/*.json: デザイントークンを定義する
- config.json: 変換するプラットフォームの設定や、出力フォーマットの設定など
トークンの設定
{
"color": {
"base": {
"gray": {
"light" : { "value": "#CCCCCC" },
"medium": { "value": "#999999" },
"dark" : { "value": "#111111" }
},
"red": { "value": "#FF0000" },
"green": { "value": "#00FF00" }
}
}
}
トークンの用途が名称からわかるように他のトークンを利用して、設定を行うことも可能です。
{
"color": {
"Text Link": {"value": "{color.base.gray.dark}"}
}
}
出力ファイルの設定
Style Dictionaryでデフォルトとして用意しているフォーマットは下記のとおりです。
{
"source": ["tokens/**/*.json"],
"platforms": {
"scss": {
"transformGroup": "scss",
"buildPath": "build/scss/",
"files": [{
"destination": "_variables.scss",
"format": "scss/variables"
}]
},
"android": {
"transformGroup": "android",
"buildPath": "build/android/",
"files": [{
"destination": "font_dimens.xml",
"format": "android/fontDimens"
},{
"destination": "colors.xml",
"format": "android/colors"
}]
},
}
}
ファイルの出力
$ style-dictionary build
buildPathに記載したディレクトリに、各プラットフォーム用に変換されたファイルが出力されます。
scss
// Do not edit directly
// Generated on Wed, 21 Dec 2022 00:55:36 GMT
$color-base-gray-light: #cccccc;
$color-base-gray-medium: #999999;
$color-base-gray-dark: #111111;
$color-base-red: #ff0000;
$color-base-green: #00ff00;
$color-font-base: #ff0000;
$color-font-secondary: #00ff00;
$color-font-tertiary: #cccccc;
$size-font-small: 0.75rem; // the small size of the font
$size-font-medium: 1rem; // the medium size of the font
$size-font-large: 2rem; // the large size of the font
$size-font-base: 1rem; // the base size of the font
android
<?xml version="1.0" encoding="UTF-8"?>
<!--
Do not edit directly
Generated on Wed, 21 Dec 2022 00:55:36 GMT
-->
<resources>
<color name="color_base_gray_light">#ffcccccc</color>
<color name="color_base_gray_medium">#ff999999</color>
<color name="color_base_gray_dark">#ff111111</color>
<color name="color_base_red">#ffff0000</color>
<color name="color_base_green">#ff00ff00</color>
<color name="color_font_base">#ffff0000</color>
<color name="color_font_secondary">#ff00ff00</color>
<color name="color_font_tertiary">#ffcccccc</color>
</resources>
出力されたファイルをインポートすることで、各プラットフォームで使用することができます。
生成したファイルをnpmパッケージとして配布する方法もあるようです。
おわりに
一貫性のあるサービスの土台づくりとして、取り組みやすい内容だと感じました。
最後に宣伝ですが、sweeepではエンジニアを募集しています。ご興味のある方は下記リンクよりご応募お待ちしております！
Discussion