FigmaのデザイントークンからTailwindへ:色・タイポグラフィ・spacing

簡単な答え： Figmaの色/テキスト/spacingの値は、Tailwind自体のユーティリティスケールと照合することでTailwindにマッピングされます——最も近いspacingのステップ、最も近い色、一致するタイポグラフィのサイズです。値がそのスケールから外れている場合、出力は存在しないテーマカラーを新しく作り出すのではなく、bg-[#f4f4f5]のような任意値クラスにフォールバックします。

Figmaファイルにおける「デザイントークン」の具体的な定義

このマッピングを理解する前に、Figmaにおいて何がトークンで、何が単発の値なのかを具体的にしておくと役立ちます。

• カラースタイル——保存され、名前が付けられた塗り（例：「Gray/100」）で、ファイル全体で一貫して適用されているもの。一度だけ選ばれて二度と使われない生の16進数値とは対照的です。
• テキストスタイル——フォント、サイズ、太さ、行の高さの組み合わせが保存され、見出しや本文テキストに一貫して適用されているもの。
• spacingの値——同じような形で「スタイル」として保存されることは通常ありませんが、複数のフレームにわたって繰り返し使われる、一貫したAuto Layoutのgap/paddingの数値。

Tailwindへのマッピングは、Figmaファイルが実際にこれらを一貫して使っている場合に最もうまく機能します。すべてのボタンが同じ保存済みの「Primary」カラースタイルを使っているファイルは、どこでも再利用されるひとつのTailwindクラスにきれいに変換されます。5つのボタンがそれぞれ微妙に異なる単発のblueを持っているファイルは、5つの微妙に異なるTailwindの値に変換されます——これは変換の欠陥ではなく、デザインに実際にそう含まれているからです。

値がTailwindのスケールに解決される仕組み

Tailwindの価値提案は、spacing・色・タイポグラフィのための制約された事前定義スケールであり、開かれたパレットではありません。そのスケールへの変換とは、新しい値を発明することではなく、照合することを意味します。

これは意図的な区別です。MarkupGenのTailwind出力は、すべての値を無理やり「合わせる」ためのカスタムtailwind.configテーマを生成するのではなく、Tailwindの実際のデフォルトスケールと照合して解決します。これにより、出力はデザインの実際の値に対して正直であり続けます——スケール外の色は任意値クラスとして表示され、それはデザイナーに、共有パレットに寄せるべきかどうかを確認する価値があるという目に見えるシグナルになります。サイレントな丸め誤差ではありません。

エクスポートをレビューする際に意味すること

• 任意値クラスはバグではなくシグナルです。 出力の中にbg-[#...]クラスがまとまって現れる場合、大抵はデザイン自体に統合すべき、ほぼ重複した単発の色があることを意味します。コード側だけで「修正」するのではなく、デザイン側にフィードバックする価値があります。
• 繰り返されるコンポーネント間でspacingの一貫性を確認しましょう。 Tailwindのスケールは各値を独立して丸めるため、デザインが同じ数値を使っていれば、2つの異なるフレームにある同じ見た目の間隔は同じクラスに解決されるべきです。
• プロジェクトにすでにtailwind.configのテーマがある場合は、生成された任意値をそれと照合しましょう。 Tailwindのデフォルトパレットに対してはスケール外に見える色でも、自分のconfigではすでに名前付きの色になっている場合があり、手作業で置き換える価値があります。

プラグインでのエクスポート、AIによる生成、編集、出力形式の選択まで含めた全体のワークフローについては、Figma to Tailwind CSS: A Practical Conversion Guideを参照してください。

自分のデザインで試してみる

自分のファイルの色とspacingがどれだけ一貫して変換されるかを確かめる一番早い方法は、実際のフレームを通してみることです。MarkupGenを無料で試すか、含まれる内容を知りたい場合はFigma to Tailwindコンバーターのページをご覧ください。