Figma To Tailwind

Figma Variables → Tailwind CSS 変換スキル

このスキルは、Figma MCPで取得したデザイン変数（Variables）を、Tailwind CSS標準クラスに自動変換するためのガイドです。

いつ使用するか

以下の状況で、このスキルを自動的に適用してください：

1. Figma MCPでデザインを取得した後

   • mcp__figma-mcp__get_design_contextやmcp__figma-mcp__get_variable_defsを実行した直後
   • Figma MCPが生成したコードにvar(--spacing-*)やvar(--width-*)などの変数が含まれている場合

2. デザイン実装中

   • コンポーネントのスタイリング時
   • レイアウト調整時
   • Figma変数を使用しているコードを発見した場合

3. コードレビュー時

   • px-[var(--spacing-4)]のようなFigma変数の直接使用を発見した場合
   • インラインスタイルでstyle={{ fontSize: 'var(--h4-font-size)' }}のような記述を発見した場合

変換手順

ステップ1: マッピングファイルを確認

frontend/lib/figma-tailwind-map.tsを参照して、Figma変数がTailwind標準クラスに変換可能か確認します。

import {
  spacingMap,
  widthMap,
  heightMap,
  borderRadiusMap,
  typographyMap,
  figmaVarToTailwindClass,
  isStandardTailwindClass
} from '@/lib/figma-tailwind-map'

ステップ2: 変換ルールの適用

スペーシング（spacing）

// ❌ Figma MCPが生成したコード
<div className="px-[var(--spacing-4,16px)] py-[var(--spacing-2,8px)] gap-[var(--spacing-3,12px)]">

// ✅ Tailwind標準クラスに変換
<div className="px-4 py-2 gap-3">

変換マッピング:

• spacing/1 → 1 (4px)
• spacing/2 → 2 (8px)
• spacing/3 → 3 (12px)
• spacing/4 → 4 (16px)
• spacing/1-5 → 1.5 (6px) ※カスタム
• spacing/2-5 → 2.5 (10px) ※カスタム

サイズ（width/height）

// ❌ Figma MCPが生成したコード
<div className="w-[var(--width-w-4,16px)] h-[var(--height-h-5,20px)]">

// ✅ Tailwind標準クラスに変換
<div className="w-4 h-5">

ボーダー半径（border-radius）

// ❌ Figma MCPが生成したコード
<div className="rounded-[var(--border-radius-rounded-md,8px)]">

// ✅ Tailwind標準クラスに変換
<div className="rounded-md">

タイポグラフィ（typography）

// ❌ Figma MCPが生成したコード（インラインスタイル）
<h1 style={{
  fontFamily: 'var(--h4-font-family)',
  fontSize: 'var(--h4-font-size)',
  fontWeight: 'var(--h4-font-weight)',
  lineHeight: 'var(--h4-line-height)',
}}>

// ✅ Tailwind標準クラスに変換
<h1 className="text-h4">

// または Tailwind標準で代用可能な場合
<p className="text-sm">  // body2と同等 (14px/20px)
<p className="text-base">  // body1と同等 (16px/24px)

実装済みのカスタムクラス:（tailwind.config.tsで定義済み）

• text-h4: 24px/32px/bold
• text-h5: 20px/28px/bold
• text-title: 18px/28px/bold
• text-body1: 16px/24px/normal
• text-body2: 14px/20px/normal
• text-body3: 12px/16px/normal

注意: 新規デザイン変換時は必ずFigma MCPのHEX/px値を確認し、既存クラスと比較すること。名前の類似性だけで判断しない。

ステップ3: カラーの扱い

カラーはFigma MCPから届くHEX値を確認して、適切に変換します。

// ❌ Figma独自変数の直接使用は禁止
<div className="bg-[var(--base-primary)]">
<div className="text-[var(--base-foreground)]">

// ✅ 正しい実装
// 1. まずFigmaのHEX値と既存のshadcn/ui変数を比較
//    --base-primary: #00a0e9 = --primary: #00a0e9 → 同じ色！
<div className="bg-primary text-primary-foreground">

// 2. shadcn/uiにない独自色の場合はtailwind.config.tsに追加
//    --base-dark-primary: #006cab → shadcn/uiにない
//    → tailwind.config.tsに 'dark-primary': '#006cab' を追加
<div className="text-dark-primary">

重要な原則:

• 名前の類似性だけで判断しない - 必ずHEX値を確認する
• Figma MCPからはHEX形式で届くので、既存のshadcn/ui変数(HSL形式)と比較
• 同じ色なら既存の変数を使用（例: bg-primary）
• 異なる色ならtailwind.config.tsにカスタム定義を追加

ステップ4: 標準にない値の対応

マッピングにない値を発見した場合：

1. tailwind.config.tsに追加

   theme: {
     extend: {
       spacing: {
         '13': '52px',  // 新しいカスタム値
       }
     }
   }
   

2. figma-tailwind-map.tsに追加

   export const spacingMap: Record<string, number | string> = {
     // ... 既存のマッピング
     'spacing/13': 13,  // 新しいマッピング
   }
   

3. 実装で使用

   <div className="px-13">
   

禁止事項

❌ Figma変数の直接使用

// 禁止
<div className="px-[var(--spacing-4)]">
<div className="gap-[var(--spacing-2,8px)]">
<div style={{ width: 'var(--width-w-4)' }}>

❌ カスタムユーティリティクラス

/* globals.cssに以下を追加するのは禁止 */
.w-spacing-2 {
  width: var(--spacing-2);
}

.header-base {
  height: var(--height-h-16);
}

❌ インラインスタイルの乱用

// 特別な理由がない限り禁止
<div style={{
  fontSize: 'var(--h4-font-size)',
  padding: 'var(--spacing-4)'
}}>

実装例

Before（Figma MCPが生成）

export default function Main() {
  return (
    <div className="bg-[var(--base/background-gray,#f6f8f9)] border-[var(--base/border,#edeef1)] border-b-0 border-l-[var(--border-width/border,1px)]">
      <div className="bg-[var(--base/background,#ffffff)] h-[64px] px-[var(--spacing/4,16px)] py-0">
        <div className="gap-[var(--spacing/2,8px)]">
          <div className="rounded-[var(--border-radius/rounded-md,8px)] size-[28px]">
            <Icon className="size-[16px]" />
          </div>
          <div className="gap-[var(--spacing/3,12px)]">
            <div style={{
              fontFamily: 'var(--h5-font-family)',
              fontSize: 'var(--h5-font-size)',
              fontWeight: 'var(--h5-font-weight)',
              lineHeight: 'var(--h5-line-height)',
            }}>
              サポート
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

After（Tailwind標準クラスに変換）

export default function Main() {
  return (
    <div className="bg-muted border border-l border-b-0">
      <div className="bg-background h-16 px-4 py-0">
        <div className="gap-2">
          <div className="rounded-md size-7">
            <Icon className="size-4" />
          </div>
          <div className="gap-3">
            <div className="text-h5">
              サポート
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

チェックリスト

変換時に以下を確認してください：

• var(--spacing-*)をpx-*, py-*, gap-*等に変換
• var(--width-*)をw-*に変換
• var(--height-*)をh-*に変換
• var(--border-radius-*)をrounded-*に変換
• インラインスタイルのフォント指定をtext-*クラスに変換
• カラーはCSS変数のまま保持
• 標準にない値はtailwind.config.tsに追加
• カスタムユーティリティクラスを作成していない

参照ドキュメント

• 変換マッピング: frontend/lib/figma-tailwind-map.ts
• Tailwind設定: frontend/tailwind.config.ts
• 開発ガイド: documents/development/coding-rules/frontend-rules.md セクション12

注意事項

• このスキルはFigma MCPのコード生成後に自動的に適用されるべきです
• 変換後のコードは必ずLintとBuildチェックを行ってください
• 疑問がある場合は、必ずfigma-tailwind-map.tsを参照してください
• カラー定義は例外として、常にCSS変数を使用してください