トークンツール: Style Dictionary
Style Dictionaryツールを使って、デザイントークンをプラットフォーム間で変換・配布します。
「トークンツール: Style Dictionary」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
Style Dictionaryとは
Style DictionaryはAmazonが開発したオープンソースのビルドツールです。トークンJSONを1つの信頼できる情報源として、CSSカスタムプロパティ、SCSS変数、iOS Swift定数、Android XML、JavaScript/TypeScriptモジュールなど、プラットフォームごとの出力に変換します。
プロジェクト構成
tokens/ディレクトリに、JSONまたはJSON5ファイルとしてトークンを整理します。Style Dictionaryはすべてのファイルを自動的に統合します。tokens/color.json、tokens/spacing.json、tokens/typography.jsonのように、カテゴリごとにファイルを分けます。
トークンJSON形式
各トークンは、valueキーと、任意のtype、description、commentフィールドを持つネストされたオブジェクトです。Style Dictionaryはネスト構造をフラット化し、出力用にドット記法の名前へ変換します。
<pre class="json-block">{
"color": {
"brand": {
"primary": { "value": "#3b82f6", "type": "color" }
}
}
}</pre>設定ファイル
config.jsonでは、ソース（トークンファイル）、プラットフォーム（web、ios、android）、プラットフォームごとの変換とフォーマットを指定します。各プラットフォームには異なる変換を適用し、異なるファイル形式を出力できます。
<pre class="json-block">{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "dist/css/",
"files": [{"destination": "variables.css", "format": "css/variables"}]
}
}
}</pre>変換
変換はビルド中にトークンの値を変更します。color/cssはカラーを16進数としてフォーマットし、size/remはpxをremに変換し、name/cti/kebabはネストされたcategory-type-item構造からkebab-caseの名前を生成します。
出力形式
フォーマットは出力ファイルの内容を決定します。組み込みのcss/variablesはCSSの:rootブロックを出力し、scss/variablesはSASS変数を出力し、javascript/moduleはJSオブジェクトをエクスポートします。カスタムフォーマットを使えば、必要な任意の出力形式に対応できます。
トークン間の参照
中括弧構文を使って他のトークンを参照します：{"value": "{color.brand.primary}"}。Style Dictionaryはビルド時に参照を解決し、具体的な値を出力します。参照によってエイリアスからグローバルへのマッピングが作られます。
カスタム変換
プロジェクト固有の要件に対応するため、カスタム変換を登録します。カラーからアルファ値を取り除いたり、デザインツールの不透明度の値を変換したり、ベンダープレフィックスを追加したりできます。カスタム変換は組み込み変換と同じようにビルドパイプラインへ組み込めます。
ビルドの実行
npx style-dictionary buildを実行するか、npmのビルドスクリプトに追加します。出力ファイルは、設定したbuildPathディレクトリに配置されます。生成ファイルをコミットする方法と、CIでビルド時に生成する方法のどちらも一般的です。
Figmaとの統合
Tokens Studio for FigmaはトークンJSONをGitHubリポジトリと同期します。JSONが変更されると、CIでStyle Dictionaryが実行され、更新されたCSSファイルとプラットフォームファイルが自動的に生成されます。デザインの変更を手動でコピー＆ペーストせずにコードへ反映できます。
トークンのバージョン管理
npmでトークンパッケージをバージョン管理します。利用側は特定のバージョンに固定し、意図的にアップグレードします。変更履歴には、追加、非推奨化、削除されたトークンを記録します。セマンティックバージョニングによって、破壊的変更と安全な更新を伝えられます。
知識チェック
Style Dictionaryにおける「transform」の役割は何ですか？
概要
Style Dictionaryは、1つのトークンJSONソースを、設定可能な変換とフォーマットによってプラットフォーム固有の出力へ変換します。Figmaからコードへのトークン同期、複数プラットフォーム間の一貫性、そしてチームが意図的に利用・アップグレードできるバージョン管理されたトークンパッケージを実現します。
よくある質問
「トークンツール: Style Dictionary」レッスンは無料ですか？
はい。「トークンツール: Style Dictionary」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「トークンツール: Style Dictionary」で何を学びますか？
Style Dictionaryツールを使って、デザイントークンをプラットフォーム間で変換・配布します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「トークンツール: Style Dictionary」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- デザイントークンとは
- トークンの命名規則
- CSS変数によるマルチブランドテーマの実装
- トークンツール: Style Dictionary