FigmaやTokens Studioから書き出したデザイントークンのJSONを貼り付けるだけで、 CSS変数・Tailwind設定・SCSS変数を自動生成。ライト・ダークモードの切り替えプレビューにも対応しています。
このツールはブラウザの中だけで動いています。入力した内容が、外部に送信されることはありません。入力内容は外部に送信されません。
詳しくデザイントークンJSON
Figmaデザイントークン変換ツールとは？JSONをCSS変数・Tailwind・SCSSへ自動変換
本ツールは、Figma（Tokens Studio for Figmaなどのプラグイン）から書き出した色・文字サイズ・余白などのデザイントークンJSONを貼り付けるだけで、CSS変数・Tailwind設定（theme.extend）・SCSS変数の3形式に自動変換できる無料ツールです。
JSONのルート直下に「light」「dark」というキーを用意しておくだけで、ライト・ダークモードのペアを自動認識し、 ダークモード用の上書きCSSを自動生成します。生成結果はプレビュー画面でライト・ダークを切り替えながら、実際の色・間隔・タイポグラフィの見え方をその場で確認できます。
変数名の接頭辞（プレフィックス）や命名規則（kebab-case／camelCase／snake_case）、 ダークモードの出力方式（クラス・data属性・メディアクエリ）もその場で切り替えられるため、 プロジェクトのコーディング規約に合わせた形でそのままコピー＆ペーストできます。
こんなシーンで便利です
Figmaのデザインシステムをコードに落とし込むとき
デザイナーが整理した色・余白・文字サイズのトークンを、フロントエンド実装用のCSS変数やTailwind設定にそのまま変換したいときに使えます。
ライト・ダークモード対応のCSS変数を用意したいとき
ライト・ダークそれぞれのトークンJSONを用意するだけで、ダークモード切り替え用のCSSを自動生成。手動での書き分けミスを防げます。
Tailwind CSSのカラーパレット・余白設定を整備したいとき
デザイントークンをもとにしたtheme.extendオブジェクトを自動生成し、Tailwindのユーティリティクラスにそのまま反映できる状態にします。
デザインと実装の色・間隔のズレがないか確認したいとき
プレビュー画面で色・文字サイズ・余白・角丸・影を一覧表示し、トークン名と見た目が意図通りに対応しているかをその場で確認できます。
使い方は簡単 4ステップ
- Figma（Tokens Studio等）から書き出したデザイントークンのJSONをテキストエリアに貼り付けます。サンプルJSONを読み込んでお試しいただくことも可能です。
- 自動的に解析され、色・余白・タイポグラフィ・角丸・影などのカテゴリ別にプレビュー表示されます。ライト・ダークの切り替えボタンで見え方を確認できます。
- プレフィックスや命名規則、ダークモードの出力方式（クラス・data属性・メディアクエリ）をお好みに設定します。
- 「CSS変数」「Tailwind設定」「SCSS変数」の各タブから、必要な形式のコードをコピーまたはダウンロードします。
※JSONを貼り替えるたびに自動で再解析されるため、Figma側でトークンを調整しながら繰り返し確認する用途にも使えます。
ご利用時の注意点
- トークンの種類（色・余白・文字サイズなど）は、JSON内のtype情報またはキー名からの自動推測で判定しています。意図しないカテゴリに分類された場合は、JSON側にtype（またはtype相当のフィールド）を明記することで正確に判定されます。
- ライト・ダークモードは、ルート直下の「light」「dark」キーの有無で自動判定します。この構造に該当しない場合、すべてのトークンはライトモードの値のみが出力されます。
- Tailwind設定として出力されるのは theme.extend に相当するオブジェクト部分のみです。実際の tailwind.config.js へは、ご自身の設定ファイルに貼り付けてご利用ください。
- 完全無料・安全：入力したJSONは一切サーバーに送信されず、すべてブラウザ内（メモリ上）で処理されます。ページを閉じればデータは即座に消去されます。
対応するトークン種別とJSONのtypeフィールド対応表
本ツールが自動認識する主なトークン種別と、Tokens Studio等でよく使われるtypeフィールドの対応関係です。
| トークン種別 | 主なtypeフィールドの例 | 出力先（Tailwind） |
|---|---|---|
| 色（カラー） | color | colors |
| 余白・サイズ | spacing / sizing | spacing |
| 角丸 | borderRadius | borderRadius |
| 影（シャドウ） | boxShadow | boxShadow |
| 不透明度 | opacity | opacity |
| フォントサイズ | fontSizes | fontSize |
| フォントファミリー | fontFamilies | fontFamily |
| フォントウェイト | fontWeights | fontWeight |
| 行間（line-height） | lineHeights | lineHeight |
| 字間（letter-spacing） | letterSpacing | letterSpacing |
【typeフィールドがない場合の自動判定について】
typeフィールドが存在しないフラットなJSON（例：{"colors":{"primary":"#2563eb"}}）の場合は、値が色コード形式かどうか、キー名に「color」「spacing」「font」などの単語が含まれるかを元に自動推測します。推測精度を高めたい場合は、できるだけtype情報を含んだ形式でのJSON書き出しをおすすめします。
デザイントークン運用の基礎知識と、Figma→コード変換のコツ
Figmaのデザインシステムをコードへ落とし込む際に押さえておきたい、トークン設計とダークモード対応の考え方を解説します。
結論：デザイントークンは「意味」と「見た目」を分離して管理する
デザイントークンの基本的な考え方は、「#2563eb」のような具体的な値（プリミティブトークン）と、「color-primary」のような意味づけされた名前（セマンティックトークン）を分離して管理することです。
ライト・ダークモードの切り替えは、プリミティブな色の値自体を変えるのではなく、同じセマンティックトークン名（例：color-primary）の参照先の値だけをモードごとに切り替えることで実現します。本ツールが生成するCSS変数も、この考え方に沿った構造になっています。
Tokens Studio for Figmaのエクスポート形式とJSON構造
Tokens Studio for Figma（旧Figma Tokens）は、トークンを「value」と「type」を持つオブジェクトとしてJSON出力するのが標準的な形式です。
複数のテーマ（ライト・ダークなど）を扱う場合は、トークンセットを分けてエクスポートし、それぞれを「light」「dark」といったキー名でまとめておくことで、本ツールのようなコンバーターが自動的にペアとして認識できるようになります。
CSS変数を軸にしたダークモード実装の考え方
ダークモードを実装する際は、:root に定義したCSS変数を、ダークモード時のセレクタ（.dark や [data-theme="dark"] など）の中だけで上書きする方式が、保守性の高い標準的な手法です。
この方式であれば、コンポーネント側のCSSは変数名を参照するだけでよく、ライト・ダードの切り替えロジックをCSS変数の定義側に閉じ込めることができます。本ツールの「ダークモードの出力方式」設定は、この考え方に基づいて3つの代表的な手法を選べるようにしています。
Tailwind CSSでデザイントークンをユーティリティクラス化する利点
デザイントークンをTailwindのtheme.extendに取り込むことで、bg-primaryやp-mdのような意味のあるユーティリティクラス名でトークンを利用できるようになります。
値をCSS変数（var(--color-primary)等）経由で参照する構成にしておくことで、Tailwindのクラス名はそのままに、ライト・ダークの切り替えやテーマ変更をCSS変数側の差し替えだけで実現できる、保守性の高い構成になります。
よくある失敗と対策
typeフィールドのないJSONで、トークンの種類が誤判定される
「size」や「base」のような曖昧な名前のキーに、意図とは異なるカテゴリ（例：余白のつもりが文字サイズとして分類される）が自動で割り当てられてしまう失敗です。
💡 対策・解決策を見る▼
ライト・ダードのトークン構造が一致しておらず、一部の値が反映されない
「light」側には存在するが「dark」側には存在しないトークン（またはその逆）があると、片方のモードでのみ値が設定され、もう片方は自動的にライト側の値が流用される失敗です。
💡 対策・解決策を見る▼
Tailwindのtheme.extendに貼り付けたが、色が反映されない
生成したTailwind設定をtheme.extendに貼り付けたものの、参照先のCSS変数（--color-primary等）を読み込んでいないため、ブラウザ上で値が反映されない（透明や初期値のままになる）失敗です。
💡 対策・解決策を見る▼
命名規則（kebab-case等）がプロジェクトのコーディング規約と一致せず、手直しが発生する
生成されたトークン名がプロジェクトの命名規則（camelCaseを使用している等）と異なり、取り込み後に変数名を手作業で一括置換する手間が発生する失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.どのようなJSON形式に対応していますか
A. Tokens Studio for Figma（旧Figma Tokens）のようなネスト構造のJSON（各トークンが value / type を持つ形式）と、プラグイン等で書き出されるシンプルなフラット形式（キーと値だけのJSON）の両方に対応しています。ルート直下に「light」「dark」というキーがある場合は、自動的にライト・ダークモードのペアとして認識します。
Q.トークンの種類（色・余白・文字サイズなど）はどうやって判定していますか
A. JSON内に「type」や「$type」フィールドがある場合はそれを優先して判定します。フィールドがない場合は、値が色コード（#から始まる16進数やrgb()形式）かどうか、またキー名に「color」「spacing」「radius」「font」などの単語が含まれるかどうかから自動推測します。推測結果が実際の用途と異なる場合は、JSON側に type フィールドを追加していただくことで正確に判定できます。
Q.ライト・ダークモードはどのように指定すればよいですか
A. JSONのルート直下に「light」と「dark」というキーを用意し、それぞれの中に同じ構造でトークンを記述すると、本ツールが自動的にペアとして認識し、ダークモード用の上書き値を生成します。モードに依存しない余白や角丸などのトークンは、light/darkの外側（ルート直下の別キー、例として「global」）に配置してください。
Q.生成したCSS変数のダークモードの書き出し方は選べますか
A. はい。「クラス（.dark）」「data属性（[data-theme="dark"]）」「メディアクエリ（prefers-color-scheme）」の3種類から選択できます。選んだ方式に応じて、ダークモード用のセレクタと上書きCSSが自動的に切り替わります。
Q.Tailwind CSSの設定ファイルにはそのまま貼り付けられますか
A. 本ツールが生成するのは tailwind.config.js の theme.extend 部分に相当するオブジェクトです。生成されたコードをコピーし、ご自身の設定ファイルの theme.extend 内に貼り付けてご利用ください。色はCSS変数（var(--color-primary)等）を参照する形で出力されるため、先に生成したCSS変数もあわせて読み込んでおく必要があります。
Q.アップロードしたJSONやデザイントークンの情報が外部に送信される心配はありませんか
A. 一切ありません。本ツールはJSONの解析・変換処理のすべてをお使いのブラウザ内（メモリ上）だけで行う完全ローカル処理型です。入力したJSONが外部サーバーへ送信されたり保存されたりすることはなく、ページを閉じればデータは即座に消去されます。社外秘のデザインシステムでも安心してご利用いただけます。
Q.Style DictionaryやCSS-in-JSなど、他の形式にも対応していますか
A. 現在は CSS変数・Tailwind設定（theme.extend）・SCSS変数の3形式に対応しています。Style Dictionary形式のJSONそのものの出力には対応していませんが、生成されたCSS変数をそのままStyle Dictionaryの出力結果と同様に扱っていただくことで、多くのプロジェクトでそのままご利用いただけます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。