Figma × Tailwind CSS 連携で学ぶ：デザインからコーディングまでの流れ

Posted on by

デザインとコードをつなぐ時代

Web制作において、「デザインと実装のズレ」 は永遠の課題です。
デザイナーがFigmaで美しく整えたUIも、
コーディング段階で「余白が違う」「フォントがズレる」といった問題が起こりがち。

しかし、Figma × Tailwind CSS の連携を意識すれば、
「見た目通りのUIを、再現性高くコード化する」ことが可能になります。

TailwindのユーティリティクラスとFigmaの構造を対応させることで、
“デザインシステムがそのままコードになる” という理想に一歩近づけます。

Figma × Tailwind の組み合わせが最強な理由

Tailwindは「クラス名がデザイン仕様そのもの」という特徴があります。

たとえば次のようなTailwindの記述

<button class="bg-blue-500 text-white py-3 px-6 rounded-lg hover:bg-blue-600">
  お問い合わせ
</button>

これはそのまま「Figma上の設定」を再現しています。

Figmaの設定Tailwindのクラス
背景色：#3B82F6bg-blue-500
テキスト色：白text-white
余白：上3 下3 左6 右6py-3 px-6
角丸：8pxrounded-lg
ホバー時の色：#2563EBhover:bg-blue-600

このように FigmaのデザインパラメータとTailwindのCSSユーティリティが一対一で対応 しているのが最大のメリットです。

Step 1：FigmaでTailwind対応のデザインを作る

▶ カラースタイルをTailwindに合わせる

Tailwindのカラーパレットに近い色をFigmaのスタイルとして登録しておきます。

目的Figmaカラー名HEXTailwind対応
PrimaryBlue / 500#3B82F6bg-blue-500
Primary DarkBlue / 600#2563EBhover:bg-blue-600
Gray BaseGray / 200#E5E7EBborder-gray-200
TextGray / 800#1F2937text-gray-800

ポイント：
Tailwindの公式カラーパレットをFigmaに読み込んでおくと、実装段階で迷わずに済みます。

▶ テキストスタイルを統一する

Tailwindではフォントサイズもクラスで管理できます。

FigmaスタイルTailwindクラス
Heading 1：32pxtext-4xl
Heading 2：24pxtext-2xl
Body：16pxtext-base
Caption：14pxtext-sm

このように「Figmaスタイル名 ＝ Tailwindクラス名」にしておくと、
デザイナーとコーダーが同じ言語で話せます。

Step 2：Spacing（余白）をTailwindのスケールに合わせる

Tailwindでは、余白が「4px刻み」で定義されています。
Figmaでも、同じスケールでガイドを作っておくと再現性が高まります。

Figmaの余白(px)Tailwindクラス
4pxp-1 / m-1
8pxp-2 / m-2
16pxp-4 / m-4
24pxp-6 / m-6
32pxp-8 / m-8

Figmaでオートレイアウトを使用すると、これらの数値がそのままTailwindに対応します。

Step 3：オートレイアウトをTailwindの「flex構造」で考える

Tailwindは flexbox と grid が基本構造。
Figmaのオートレイアウト（Shift + A）は、まさにその練習に最適です。

対応関係

Figma設定Tailwind構文
Auto layout direction：Horizontalflex flex-row
Verticalflex flex-col
Align centeritems-center
Justify space-betweenjustify-between
Gap: 16pxgap-4

この考え方でデザインしておけば、「見た目＝構造」 がそのままコードになります。

Step 4：FigmaプラグインでTailwind対応を自動化する

FigmaにはTailwindと連携できるプラグインが多数存在します。
中でもおすすめは以下の3つです

① Figma to Tailwind CSS

選択した要素のスタイルをTailwindクラスに変換してくれるプラグイン。
ボタンやカードなど、すぐにコピペできるコードを自動生成します。

② Design to Code (by Builder.io)

FigmaのデザインをReact + Tailwind形式で書き出せる高精度ツール。
コーディングの初稿として非常に優秀です。

③ Tailwind Color Generator

Figma上のカラーをもとに、Tailwind用のカラーパレットを自動生成します。
ブランドカラーバリエーションをTailwind形式に即変換できるのが魅力。

Step 5：実際のコードに落とし込む

たとえば、Figmaで次のようなカードデザインを作ったとします👇

[ 画像 ]
サービス名
説明テキスト
[ 詳しく見るボタン ]

この構成をTailwindで書くと以下のようになります：

<div class="max-w-sm bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
  <img src="/service.jpg" alt="サービス" class="w-full h-48 object-cover">
  <div class="p-6">
    <h2 class="text-xl font-semibold text-gray-800 mb-2">サービス名</h2>
    <p class="text-gray-600 text-sm mb-4">
      ここにサービスの説明が入ります。
    </p>
    <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
      詳しく見る
    </button>
  </div>
</div>

このコードは、Figmaの構造を忠実に反映しています。

  • オートレイアウト → flex / p-6 / gap-*
  • テキスト階層 → text-xl, text-sm
  • スタイル → rounded, shadow, hover:bg-*

Tailwindを理解する＝Figmaの構造を理解する ことと同じです。

Step 6：Figma Tokens でデザイン変数を管理する

さらに上級者向けには、Figma Tokens（Design Token管理プラグイン） を使うと便利です。

これは、Figma内のスタイル（色・余白・フォントなど）をコード化し、
Tailwindの theme.config.js に自動で同期できます。

{
  "color": {
    "primary": "#3B82F6",
    "primaryDark": "#2563EB"
  },
  "font": {
    "body": "Noto Sans JP",
    "heading": "Inter"
  }
}

こうしておけば、デザイン変更がそのままコーディング側にも反映され、
「FigmaとTailwindが共通言語で動く」 環境を作れます。

Step 7：チームでのワークフローに落とし込む

FigmaとTailwindを連携させたチーム開発では、以下の流れが最もスムーズです

  1. デザイナー：FigmaでTailwind対応のデザインを作成
  2. エンジニア：Tailwindのクラス構造で再現
  3. 共通ドキュメント：Figma StylesとTailwind Configを同期
  4. レビュー：デザイン→実装間でズレがないか確認

結果として、チーム全員が「同じUI言語」を使えるようになります。

まとめ：Figma × Tailwindで“構造的デザイン思考”を身につけよう

デザインと実装は、もはや別世界の話ではありません。
FigmaとTailwindを連携させれば、
「美しいデザイン」も「整ったコード」も同じ設計思想で作れる ようになります。

この記事のまとめ

項目内容
Step1FigmaでTailwindに合わせたカラースタイルを作る
Step2テキスト・余白をTailwindスケールに統一
Step3オートレイアウトをflex思考で設計
Step4プラグインでTailwindクラスを自動生成
Step5コード化して再現性を確認
Step6Tokensでデザイン変数を同期
Step7チーム全体で同一言語化

デザインの美しさ × コードの合理性。
Figma × Tailwindで、“構造的に整うWeb制作”を実現しよう。