【デザイン学習者必見】Figma × GPT完全ガイド｜既存UIから自動でデザインシステム構築

生徒

クライアントから既存のFigmaデザインを受け取ったんですが、Variablesが全く設定されてなくて…。色とかスペーシングがバラバラで、コーディングが大変なんです！

ペン博士

それは大変じゃったな！でも朗報じゃ。FigmaとGPTを組み合わせれば、既存デザインから自動的にデザインシステムを構築できるんじゃよ。今日は「デザインシステム逆生成」という革新的な手法を教えるぞい！

生徒

ありがとうございます！よろしくお願いします！

Web制作の現場で、以下のような悩みを抱えていませんか？

• 既存のFigmaデザインにVariables（デザイントークン）が設定されていない
• 色やスペーシングが不規則で、コーディング時に毎回確認が必要
• デザインシステムを一から構築する時間がない
• Tailwind CSSなどのフレームワーク規則に合わせてデザインを整理したい
• 手作業でトークンを設定するのは非効率すぎる

本記事では、FigmaとGPTを活用して、既存UIデザインから自動的にVariables（デザイントークン）を抽出し、Tailwind CSS規則に最適化するという革新的なワークフローを徹底解説します。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

菅井さん
将来的への不安と子育てという背景から「副業」に挑戦しようと決意。独学からプログラミングの学習を開始していたが、WithCodeに出会い体験コースを受講。約4ヶ月の学習に取り組み、当初の目標であった卒業テスト合格を実現した。WithCode Platinumにて3件の案件を担当し、現在は副業だけでなく本格的に「フリーランス」として在宅で活躍していきたいと考えるようになる。

詳しくはこちらの記事をご覧ください。

あわせて読みたい

【子育てママさん必見】「在宅×副業」を達成！多方向で活躍中のママさんフリーランスにインタビュー！ ペン博士、ママさんなのに在宅で副業もこなしている方がいるって聞いたんですけど、本当ですか？だとしたらすごすぎます！ うむ、うちの受講生でな、まさに“時間も場所...

菅井さんの主な制作実績はこちら

広告用途での新規LP制作

株式会社YOURDELT 様

なぜ今、Figma × GPTでUI構築なのか？

デザインシステムの重要性

現代のWeb制作において、デザインシステム（Design System）は必須インフラとなっています。

デザインシステムがもたらす3つの価値

しかし、現実は…

• 既存プロジェクトの90%以上はVariablesが未設定
• 手作業でのトークン設定には20〜40時間かかる
• 色やスペーシングの不規則性により、開発効率が30%低下
• デザイナーとエンジニア間のコミュニケーションコストが増大

AI（GPT）活用による革新

ChatGPT-4以降のLLMは、「抽出」ではなく「リファクタリング」で真価を発揮します。

従来の手法 vs AI活用手法

Tailwind CSS規則に合わせて完全一致が実現

多くの開発現場で採用されているTailwind CSSの規則にデザイントークンを合わせることで、デザインとコードの完全一致が実現します。

Tailwind CSS規則の例

• カラースケール： 50, 100, 200, …, 900, 950（11段階）
• スペーシング： 4の倍数（4px, 8px, 12px, 16px, …）
• フォントサイズ： xs, sm, base, lg, xl, 2xl, …
• ブレークポイント： sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)

既存デザインの「#3B82F6」や「15px」といった不規則な値を、Tailwindの「blue-500」や「16px（p-4）」に自動変換できるのがGPT活用の最大のメリットです。

デザインシステム逆生成とは？

生徒

デザインシステム逆生成って何ですか？

ペン博士

デザインシステム逆生成は、完成したUIデザインから逆算してデザイントークン（Variables）を抽出・体系化する手法じゃ！

通常のフロー vs 逆生成フロー

通常のデザインフロー（理想）

デザイントークン定義
    ↓
Figma Variablesに設定
    ↓
コンポーネント作成
    ↓
画面デザイン
    ↓
コーディング

逆生成フロー（現実的）

既存の画面デザイン（Variables未設定）
    ↓
【Figma Make】使用値を全抽出
    ↓
【GPT】Tailwind規則にリファクタリング
    ↓
【Figma】JSONインポートでVariables作成
    ↓
既存デザインにVariablesを適用
    ↓
以降は通常フローで保守

Primitive vs Semantic トークン

デザイントークンは、2階層構造で管理するのがベストプラクティスです。

Primitive（プリミティブ）トークン

基礎的な値そのもの。色の階調、スペーシングのスケールなど。

{
  "color": {
    "blue": {
      "50": "#EFF6FF",
      "100": "#DBEAFE",
      "200": "#BFDBFE",
      "300": "#93C5FD",
      "400": "#60A5FA",
      "500": "#3B82F6",  // Tailwind blue-500
      "600": "#2563EB",
      "700": "#1D4ED8",
      "800": "#1E40AF",
      "900": "#1E3A8A",
      "950": "#172554"
    }
  },
  "spacing": {
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "5": "20px",
    "6": "24px"
  }
}

Semantic（セマンティック）トークン

用途に応じた意味付けをしたトークン。Primitiveを参照。

{
  "color": {
    "button": {
      "primary": {
        "background": "{color.blue.500}",
        "hover": "{color.blue.600}",
        "text": "{color.white}"
      },
      "secondary": {
        "background": "{color.gray.100}",
        "hover": "{color.gray.200}",
        "text": "{color.gray.900}"
      }
    },
    "text": {
      "heading": "{color.gray.900}",
      "body": "{color.gray.700}",
      "muted": "{color.gray.500}"
    }
  }
}

なぜ2階層なのか？

実践！Figma × GPTでデザインシステム構築 4ステップ

生徒

具体的にどうやって進めればいいんですか？難しそう…

ペン博士

安心せい！4つのステップに分けて、順を追って説明するぞい。ツールも無料で使えるものを中心に紹介するから、今日から始められるんじゃ！

前提：必要なツール

• Figma（無料プラン可）
• ChatGPT（GPT-4以上推奨、無料版でも可能だが精度が落ちる）
• Figma Make（Figmaプラグイン、無料）
• テキストエディタ（VS Code等）

Step 1: Figma Makeで使用値を抽出

まず、既存のFigmaデザインから実際に使用されている色・スペーシング・フォントサイズなどの値を全て抽出します。

1-1. Figma Makeのインストール

1. Figmaを開く
2. メニューから「Plugins」→「Find more plugins」
3. 検索窓に「Figma Make」と入力
4. 「Install」をクリック

1-2. 抽出対象のフレームを選択

1. デザインシステム化したいページ全体、または主要画面を選択
2. 右クリック → Plugins → Figma Make
3. 「Analyze」タブを選択

1-3. 値の抽出

Figma Makeが以下の値を自動抽出します：

• Colors： 全ての使用色（Fill、Stroke、Shadow等）
• Text Styles： フォントサイズ、ウェイト、行間、文字間
• Effects： シャドウ、ブラー
• Spacing： Auto Layoutのgap、padding

1-4. データのエクスポート

// Figma Makeが出力する形式（例：色の抽出結果）
{
  "colors": [
    "#3B82F6",  // 使用回数: 45
    "#1E40AF",  // 使用回数: 23
    "#93C5FD",  // 使用回数: 12
    "#F3F4F6",  // 使用回数: 67
    "#374151",  // 使用回数: 34
    "#1F2937",  // 使用回数: 28
    // ... 不規則な値も含めて全て抽出される
    "#3A7FE5",  // 使用回数: 3  ← ブレた値
    "#92px",    // スペーシング ← 不規則
    "#15px"     // スペーシング ← 4の倍数ではない
  ]
}

重要： この段階では、不規則な値や重複した値がそのまま抽出されます。次のステップでGPTがこれを整理します。

Step 2: GPTでTailwind規則にリファクタリング

ここがAI活用の真骨頂です。抽出した不規則な値を、Tailwind CSS規則に準拠した体系的なトークンに自動変換します。

2-1. GPTへのプロンプト（色の統一）

あなたはデザインシステムのスペシャリストです。
以下のFigmaデザインから抽出した色のリストを、Tailwind CSSの色規則に準拠した形式に整理してください。

【抽出された色リスト】
#3B82F6 (使用回数: 45)
#3A7FE5 (使用回数: 3)
#1E40AF (使用回数: 23)
#93C5FD (使用回数: 12)
#DBEAFE (使用回数: 8)
#F3F4F6 (使用回数: 67)
#E5E7EB (使用回数: 34)
#374151 (使用回数: 28)

【要件】
1. Tailwind CSSの11段階スケール（50, 100, 200, ..., 900, 950）に整理
2. 近似色は統合し、使用回数が多い色を優先
3. 色相のブレを修正し、明度を正しく分配
4. 出力は以下のJSON形式で

【期待する出力形式】
{
  "blue": {
    "50": "#EFF6FF",
    "100": "#DBEAFE",
    ...
  },
  "gray": {
    "50": "#F9FAFB",
    ...
  }
}

2-2. GPTの出力例

{
  "blue": {
    "50": "#EFF6FF",
    "100": "#DBEAFE",
    "200": "#BFDBFE",
    "300": "#93C5FD",    // 抽出値 #93C5FD をそのまま採用
    "400": "#60A5FA",
    "500": "#3B82F6",    // 抽出値 #3B82F6 を基準に（使用回数最多）
    "600": "#2563EB",
    "700": "#1E40AF",    // 抽出値 #1E40AF をそのまま採用
    "800": "#1E40AF",
    "900": "#1E3A8A",
    "950": "#172554"
  },
  "gray": {
    "50": "#F9FAFB",
    "100": "#F3F4F6",    // 抽出値 #F3F4F6 をそのまま採用
    "200": "#E5E7EB",    // 抽出値 #E5E7EB をそのまま採用
    "300": "#D1D5DB",
    "400": "#9CA3AF",
    "500": "#6B7280",
    "600": "#4B5563",
    "700": "#374151",    // 抽出値 #374151 をそのまま採用
    "800": "#1F2937",
    "900": "#111827",
    "950": "#030712"
  }
}

【統合した色】
・#3A7FE5（使用回数3）→ #3B82F6（blue-500）に統合
  理由：色相が近く、使用回数が少ないため

【追加した階調】
・blue-50, 100, 200, 400, 600, 800, 900, 950
  理由：Tailwind標準スケールの完全性のため

2-3. スペーシングのリファクタリング

【抽出されたスペーシング】
15px (使用回数: 12)
92px (使用回数: 5)
18px (使用回数: 23)
24px (使用回数: 45)
16px (使用回数: 67)

【GPTへのプロンプト】
以下のスペーシング値を、Tailwind CSSの4の倍数規則に準拠した形式に変換してください。
近い値は統合し、使用回数が多い値を優先してください。

【GPTの出力】
{
  "spacing": {
    "1": "4px",    // 0.25rem
    "2": "8px",    // 0.5rem
    "3": "12px",   // 0.75rem
    "4": "16px",   // 1rem （抽出値 16px、使用回数最多）
    "5": "20px",   // 1.25rem （15px→20pxに正規化）
    "6": "24px",   // 1.5rem （抽出値 24px）
    "20": "80px",  // 5rem （92px→80pxに正規化）
    "24": "96px"   // 6rem （92px用の代替）
  }
}

【変換理由】
・15px（使用12回）→ 16px（spacing-4）または20px（spacing-5）に統合を推奨
・92px（使用5回）→ 80px（spacing-20）または96px（spacing-24）に変更を推奨
・18px（使用23回）→ 16px（spacing-4）または20px（spacing-5）に統合

2-4. セマンティックトークンの生成

【GPTへのプロンプト】
先ほど作成したPrimitiveトークンを使って、以下の用途別のSemanticトークンを定義してください：

・ボタン（Primary、Secondary、Danger）
・テキスト（Heading、Body、Muted、Link）
・背景（Page、Card、Hover）
・ボーダー（Default、Focus、Error）

【GPTの出力】
{
  "button": {
    "primary": {
      "background": "{color.blue.500}",
      "backgroundHover": "{color.blue.600}",
      "text": "#FFFFFF",
      "border": "{color.blue.500}"
    },
    "secondary": {
      "background": "{color.gray.100}",
      "backgroundHover": "{color.gray.200}",
      "text": "{color.gray.900}",
      "border": "{color.gray.300}"
    },
    "danger": {
      "background": "{color.red.500}",
      "backgroundHover": "{color.red.600}",
      "text": "#FFFFFF",
      "border": "{color.red.500}"
    }
  },
  "text": {
    "heading": "{color.gray.900}",
    "body": "{color.gray.700}",
    "muted": "{color.gray.500}",
    "link": "{color.blue.600}",
    "linkHover": "{color.blue.700}"
  },
  "background": {
    "page": "#FFFFFF",
    "card": "{color.gray.50}",
    "hover": "{color.gray.100}"
  },
  "border": {
    "default": "{color.gray.200}",
    "focus": "{color.blue.500}",
    "error": "{color.red.500}"
  }
}

Step 3: DTCG仕様のJSON作成

FigmaにインポートするためのJSON形式は、DTCG（Design Tokens Community Group）仕様に準拠する必要があります。

3-1. DTCG仕様の必須要素

• $type：トークンの型（color、dimension、fontFamily等）
• $value：実際の値
• $description（任意）：説明

3-2. 色のDTCG形式

重要： Figmaの色インポートは、オブジェクト形式（colorSpace/components）またはhex形式のみサポート。

{
  "color": {
    "blue": {
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": {
            "red": 0.231,
            "green": 0.510,
            "blue": 0.965,
            "alpha": 1
          },
          "hex": "#3B82F6"
        },
        "$description": "Primary brand color"
      }
    }
  }
}

// または簡易版（hex のみ）
{
  "color": {
    "blue": {
      "500": {
        "$type": "color",
        "$value": "#3B82F6",
        "$description": "Primary brand color"
      }
    }
  }
}

3-3. スペーシングのDTCG形式

{
  "spacing": {
    "4": {
      "$type": "dimension",
      "$value": "16px",
      "$description": "Base spacing unit (1rem)"
    },
    "6": {
      "$type": "dimension",
      "$value": "24px",
      "$description": "1.5 times base unit"
    }
  }
}

3-4. 完全なDTCGファイル例

{
  "$schema": "https://design-tokens.org/schema/v1",
  "color": {
    "primitive": {
      "blue": {
        "50": {
          "$type": "color",
          "$value": "#EFF6FF"
        },
        "500": {
          "$type": "color",
          "$value": "#3B82F6"
        },
        "900": {
          "$type": "color",
          "$value": "#1E3A8A"
        }
      },
      "gray": {
        "100": {
          "$type": "color",
          "$value": "#F3F4F6"
        },
        "700": {
          "$type": "color",
          "$value": "#374151"
        }
      }
    },
    "semantic": {
      "button": {
        "primary": {
          "background": {
            "$type": "color",
            "$value": "{color.primitive.blue.500}"
          },
          "text": {
            "$type": "color",
            "$value": "#FFFFFF"
          }
        }
      }
    }
  },
  "spacing": {
    "4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "6": {
      "$type": "dimension",
      "$value": "24px"
    }
  },
  "fontSize": {
    "base": {
      "$type": "dimension",
      "$value": "16px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "18px"
    },
    "xl": {
      "$type": "dimension",
      "$value": "20px"
    }
  }
}

Step 4: FigmaへのVariablesインポート

作成したJSONファイルをFigmaにインポートして、Variablesとして設定します。

4-1. Figma標準機能でのインポート

1. Figmaファイルを開く
2. 右サイドバーの「Variables」アイコンをクリック
3. 「…」メニュー →「Import variables」
4. 作成したJSONファイルを選択
5. 「Import」をクリック

4-2. インポート後の確認

Variablesパネルに以下のように表示されているか確認：

color:
  primitive:
    blue:
      50: "#EFF6FF"
      100: "#DBEAFE"
      500: "#3B82F6"
    gray:
      100: "#F3F4F6"

  semantic:
    button:
      primary:
        background: "{color.primitive.blue.500}"
        text: "#FFFFFF"

spacing:
  4: "16px"
  6: "24px"

fontSize:
  base: "16px"
  lg: "18px"

4-3. 既存デザインへのVariables適用

インポートしたVariablesを、既存のデザイン要素に適用していきます。

1. 色の置き換え – ボタンを選択 → Fill → Variables → button.primary.background を選択
2. スペーシングの置き換え – Auto Layoutのgap → Variables → spacing.4 を選択
3. フォントサイズの置き換え – テキスト選択 → Font size → Variables → fontSize.lg を選択

4-4. 一括置換の活用

Figmaのプラグイン「Find and Replace Colors」を使うと、特定の色を一括でVariablesに置換できます。

1. Plugins → Find and Replace Colors
2. Find: #3B82F6
3. Replace with: Variables → color.blue.500
4. 「Replace All」

実践例：Webサイトのデザインシステム構築

生徒

デザインシステム構築の実践方法が知りたいです！

ペン博士

うむ。ここでは、実際のWebサイトプロジェクトで、Figma × GPTを使ったデザインシステム構築を行った事例を紹介するぞ！

プロジェクト概要

• 対象： コーポレートサイトリニューアル
• ページ数： 15ページ
• 状況： デザインカンプ完成済みだがVariables未設定
• 課題： 色が47種類、スペーシングが32種類と不規則

実施内容と結果

削減できた色の例

【Before（47色）】
#3B82F6, #3A7FE5, #4287F7, #2F7AE0  // ← ブレた青色が4種類
#1E40AF, #1D3DAC, #2044B2           // ← ブレた濃い青が3種類
#F3F4F6, #F4F5F7, #F2F3F5           // ← ほぼ同じグレーが3種類
... （以下43色）

【After（44色＝11階調×4色相）】
blue-50, blue-100, ..., blue-950   // 11色
gray-50, gray-100, ..., gray-950   // 11色
green-50, green-100, ..., green-950 // 11色
red-50, red-100, ..., red-950       // 11色

【削減率】
47色 → 44色に統合（重複排除）
実質的な管理コスト：1/3以下（体系化により）

開発への影響

• CSS変数の生成： Figma Variablesから自動生成可能に
• Tailwindとの整合性： クラス名が完全一致（text-blue-500等）
• 開発効率： デザイン確認回数が70%削減
• 保守性： ブランドカラー変更時、1箇所の修正で全体に反映

ツール比較：Figma Make vs 他の選択肢

ChatGPT vs Claude for デザインシステム構築

結論： 通常のプロジェクトであればChatGPT、超大規模（50ページ以上）のプロジェクトではClaudeが推奨です。

トラブルシューティング

生徒

FigmaとGPTを使用するにあたってトラブルシューティングのことも知りたいです！

ペン博士

うむ。ここでは、主なトラブルシューティングを3つ紹介するぞい！

問題1: FigmaがJSONをインポートできない

症状： 「Invalid JSON format」エラーが表示される

原因と解決策：

1. 色の形式が不正 – "$value": "rgb(59, 130, 246)" –正しくは "$value": "#3B82F6" – または "$value": {"colorSpace": "srgb", ...}
2. $typeが不正 – "$type": "colour" – 正しくは "$type": "color"
3. 参照構文が不正 – "$value": "color.blue.500" – 正しくは "$value": "{color.blue.500}"

問題2: GPTが規則を守らない

症状： Tailwind規則ではない独自の値を生成してしまう

解決策：

【改善前のプロンプト】
「Tailwind CSSに合わせて整理してください」

【改善後のプロンプト】
「以下の厳密なルールに従ってください：
1. 色は必ず50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950の11段階
2. スペーシングは必ず4の倍数（4px, 8px, 12px, 16px, ...）
3. フォントサイズはTailwindの定義（xs=12px, sm=14px, base=16px, lg=18px, xl=20px, 2xl=24px, ...)に厳密に従う
4. 出力はDTCG仕様のJSON形式のみ

【参考】Tailwind CSS公式ドキュメント
https://tailwindcss.com/docs/customizing-colors
」

問題3: 既存デザインとトークンの色が合わない

症状： リファクタリング後の色が、元のデザインと視覚的に異なる

解決策：

1. プロンプトに「可能な限り元の色を保持」を追加

「抽出された色のうち、使用回数が多いものは可能な限りそのまま採用してください。
Tailwindの階調に当てはまらない場合のみ、最も近い標準色に置き換えてください。」

2. カスタムカラーの追加

{
  "color": {
    "brand": {  // Tailwindにはない独自カラーとして定義
      "primary": {
        "$type": "color",
        "$value": "#3A7FE5"  // 元のブランドカラーをそのまま保持
      }
    },
    "blue": {  // Tailwind準拠の汎用カラー
      "500": {
        "$type": "color",
        "$value": "#3B82F6"
      }
    }
  }
}

コピペで使える！GPTプロンプトテンプレート集

生徒

デザインシステム構築のプロンプトを知りたいです！

ペン博士

うむ。ここでは、実際のプロジェクトですぐに使えるプロンプトテンプレートを紹介するぞ。【】内を自分のプロジェクトの値に置き換えて使用するのじゃ！

テンプレート1: 色の統一と階調化

あなたはUI/UXデザインのスペシャリストです。
以下のFigmaデザインから抽出した色のリストを、Tailwind CSSの色規則に準拠した11段階スケールに整理してください。

【抽出された色リスト】
【ここに色のリストを貼り付け】
例:
#3B82F6 (使用回数: 45)
#3A7FE5 (使用回数: 3)
#1E40AF (使用回数: 23)

【要件】
1. Tailwind CSSの11段階スケール（50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950）に厳密に従う
2. 近似色は統合し、使用回数が多い色を優先的に採用
3. 色相のブレを修正し、明度を正しく分配
4. 各色の選択理由を簡潔に記載
5. 統合した色と新規追加した色を明記

【出力形式】
以下のJSON形式で出力してください：
{
  "【色名】": {
    "50": "#XXXXXX",
    "100": "#XXXXXX",
    ...
  }
}

【統合・追加した色の説明】
・統合した色: ...
・追加した色: ...

テンプレート2: スペーシングの正規化

以下のスペーシング値を、Tailwind CSSの4の倍数規則に準拠した形式に変換してください。

【抽出されたスペーシング】
【ここにスペーシング値を貼り付け】
例:
15px (使用回数: 12)
92px (使用回数: 5)
18px (使用回数: 23)
24px (使用回数: 45)
16px (使用回数: 67)

【要件】
1. 全ての値を4の倍数に変換（4px, 8px, 12px, 16px, 20px, 24px, ...）
2. 近い値は統合し、使用回数が多い値を優先
3. Tailwindのspacing-1〜spacing-96の範囲内
4. 変換前後の対応表を作成

【出力形式】
{
  "spacing": {
    "1": "4px",    // 0.25rem
    "2": "8px",    // 0.5rem
    ...
  }
}

【変換対応表】
・15px → 16px (spacing-4) に統合 理由: ...
・92px → 96px (spacing-24) に変更 理由: ...

テンプレート3: セマンティックトークン生成

以下のPrimitiveトークンを使って、用途別のSemanticトークンを定義してください。

【Primitiveトークン】
【ここにPrimitiveトークンのJSONを貼り付け】

【定義が必要なSemantic要素】
1. ボタン
   - Primary（主要アクション）
   - Secondary（副次アクション）
   - Danger（削除等の危険操作）
   - Disabled（無効状態）

2. テキスト
   - Heading（見出し）
   - Body（本文）
   - Muted（補足情報）
   - Link（リンク）
   - Error（エラーメッセージ）

3. 背景
   - Page（ページ背景）
   - Card（カード背景）
   - Hover（ホバー状態）
   - Selected（選択状態）

4. ボーダー
   - Default（デフォルト）
   - Focus（フォーカス状態）
   - Error（エラー状態）

【要件】
1. 各要素にbackground、text、border（該当する場合）を定義
2. hover、active、disabled等の状態も含める
3. Primitiveトークンを参照する形式で記述（{color.blue.500}形式）

【出力形式】
DTCG仕様のJSON形式

テンプレート4: フォントサイズの体系化

以下のフォントサイズを、Tailwind CSSの規則に準拠した形式に整理してください。

【抽出されたフォントサイズ】
【ここにフォントサイズのリストを貼り付け】
例:
14px (使用回数: 67)
15px (使用回数: 12)
17px (使用回数: 23)
18px (使用回数: 45)

【要件】
1. Tailwindの標準スケールに従う
   xs: 12px, sm: 14px, base: 16px, lg: 18px, xl: 20px, 2xl: 24px, 3xl: 30px, 4xl: 36px, 5xl: 48px, 6xl: 60px, 7xl: 72px, 8xl: 96px, 9xl: 128px
2. 近似値は統合
3. line-heightも合わせて定義（1.5が基本、見出しは1.25）

【出力形式】
{
  "fontSize": {
    "xs": {
      "$type": "dimension",
      "$value": "12px",
      "lineHeight": "18px"
    },
    ...
  }
}

テンプレート5: DTCG形式への変換

以下のシンプルなJSON形式のデザイントークンを、DTCG（Design Tokens Community Group）仕様に変換してください。

【入力JSON】
【ここにシンプルなJSONを貼り付け】
例:
{
  "blue-500": "#3B82F6",
  "spacing-4": "16px"
}

【要件】
1. $schema、$type、$value を含める
2. 色は以下のいずれかの形式
   - 簡易版: "$value": "#3B82F6"
   - 詳細版: "$value": {"colorSpace": "srgb", "components": {...}, "hex": "#3B82F6"}
3. スペーシングは "$type": "dimension" を使用
4. 階層構造を適切に設定

【出力形式】
DTCG仕様の完全なJSON

テンプレート6: 色の明度調整

以下の色セットの明度を、Tailwind CSSの標準的な明度分布に合わせて調整してください。

【現在の色セット】
【ここに色のリストを貼り付け】

【要件】
1. 50は非常に明るい（明度95%程度）
2. 500は基準色（明度50%程度）
3. 950は非常に暗い（明度10%程度）
4. 各階調の明度差が均等になるように調整
5. 色相と彩度は可能な限り維持

【参考】Tailwindのblue階調
50: #EFF6FF (L: 97%)
100: #DBEAFE (L: 94%)
200: #BFDBFE (L: 88%)
300: #93C5FD (L: 78%)
400: #60A5FA (L: 67%)
500: #3B82F6 (L: 55%)  ← 基準
600: #2563EB (L: 50%)
700: #1D4ED8 (L: 43%)
800: #1E40AF (L: 36%)
900: #1E3A8A (L: 28%)
950: #172554 (L: 14%)

【出力形式】
調整後の11段階の色コードと、各階調の明度(%)

テンプレート7: ダークモード対応トークン

以下のSemanticトークンに、ダークモード用の値を追加してください。

【現在のSemanticトークン（ライトモード）】
【ここにSemanticトークンを貼り付け】

【要件】
1. ライトモードとダークモードで異なるPrimitiveトークンを参照
2. ダークモードでは背景は暗く、テキストは明るく
3. コントラスト比を維持（WCAG AA基準：4.5:1以上）
4. ブランドカラーの認識性を保つ

【出力形式】
{
  "color": {
    "semantic": {
      "button": {
        "primary": {
          "background": {
            "$type": "color",
            "$value": "{color.blue.500}",  // light mode
            "$extensions": {
              "mode": {
                "dark": "{color.blue.400}"
              }
            }
          }
        }
      }
    }
  }
}

テンプレート8: コンポーネント別トークン抽出

Figma Makeで抽出したデータから、【コンポーネント名】専用のデザイントークンを定義してください。

【抽出データ】
【ここにFigma Makeの出力を貼り付け】

【対象コンポーネント】
【ボタン / カード / フォーム / ナビゲーション 等を指定】

【要件】
1. そのコンポーネントで使用されている値のみ抽出
2. 状態別（default、hover、active、disabled）の値を定義
3. サイズバリエーション（sm、md、lg）がある場合は含める
4. Primitiveトークンを参照する形式

【出力形式】
{
  "component": {
    "【コンポーネント名】": {
      "【状態or要素】": {
        "$type": "...",
        "$value": "..."
      }
    }
  }
}

テンプレート9: 既存CSSからのトークン逆生成

以下のCSS変数を、Figma Variablesとして使用できるDTCG形式に変換してください。

【既存のCSS変数】
【ここにCSS変数を貼り付け】
例:
:root {
  --color-primary: #3B82F6;
  --color-secondary: #64748B;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --font-size-body: 16px;
}

【要件】
1. CSS変数名を適切なトークン階層に変換
2. DTCG仕様の$type、$valueを含める
3. 命名規則をPrimitive/Semanticに整理
4. 欠けている階層（例：spacing-xs、spacing-lg等）を補完

【出力形式】
DTCG仕様のJSON

テンプレート10: エラーチェックと最適化

以下のデザイントークンJSONをレビューし、エラーや改善点を指摘してください。

【レビュー対象JSON】
【ここにJSONを貼り付け】

【レビュー観点】
1. DTCG仕様への準拠
   - $schema、$type、$valueが正しく設定されているか
   - 色の形式（hex or colorSpace形式）が正しいか

2. Tailwind CSS規則への準拠
   - 色の階調が11段階（50, 100, ..., 950）か
   - スペーシングが4の倍数か

3. 命名規則
   - Primitive/Semanticが適切に分離されているか
   - 参照構文（{...}）が正しいか

4. 一貫性
   - 同じ用途のトークンで命名が統一されているか
   - 重複定義がないか

5. 完全性
   - 欠けている階調やバリエーションがないか

【出力形式】
1. エラー一覧（あれば）
2. 警告一覧（あれば）
3. 最適化の提案
4. 修正後のJSON（必要な場合）

追加ケーススタディ：実際のプロジェクトでの成功事例

ペン博士

ここでは、実際のプロジェクトでの成功事例を2つ紹介するぞい！非常に参考になると思うからよーく聞くんじゃぞ！

生徒

分かりました！

ケース1：ECサイトのデザインシステム統一（株式会社B社）

背景：

• 商品数3,000点のECサイト
• 複数のデザイナーが関わり、デザインの一貫性が欠如
• カテゴリーページごとに異なる色・スペーシングを使用
• 開発チームから「デザインカンプと実装の齟齬が多すぎる」とクレーム

実施内容：

1. Week 1: 全80ページのデザインからFigma Makeで値を抽出 – 色：127種類（！）を発見 – スペーシング：68種類を発見
2. Week 2: GPTで統一ルールに基づきリファクタリング – 色：11段階×6色相（66色）に削減（52%削減） – スペーシング：24種類に削減（65%削減）
3. Week 3-4: Figma Variablesに一括インポート&既存デザイン更新
4. Week 5-6: デザインガイドライン作成、チーム教育

結果：

B社デザインリーダーのコメント：
「GPTを使わずに127色を手作業で整理していたら、2ヶ月はかかったでしょう。Figma × GPTのワークフローで、わずか6週間でデザインシステムを構築でき、開発チームとの関係も劇的に改善しました。もう元には戻れません。」

ケース2：SaaSプロダクトのリブランディング（スタートアップC社）

背景：

• B2B SaaSプロダクト（画面数200+）
• リブランディングに伴い、既存UIの色を全面刷新
• 新ブランドカラー：青系 → 紫系に変更
• 限られたリソース（デザイナー2名、エンジニア5名）

実施内容：

1. Day 1-2: 既存デザインから青系トークンを抽出
2. Day 3: GPTに新ブランドカラー（紫）の11階調生成を依頼

【GPTへのプロンプト】
以下の青系トークンを、新ブランドカラー（紫: #8B5CF6）を基準に、
同じ明度分布を持つ紫系トークンに変換してください。

【既存の青系トークン】
blue-50: #EFF6FF (L: 97%)
blue-100: #DBEAFE (L: 94%)
...
blue-500: #3B82F6 (L: 55%)  ← 基準
...

【新ブランドカラー】
purple-500: #8B5CF6  ← 基準にする色

【要件】
・明度分布は既存の青系と同じにする
・色相・彩度は紫系で統一

3. Day 4-5: Figma VariablesのPrimitiveトークンを更新 – blue.500 → purple.500に変更 – Semanticトークンは参照のため自動的に更新
4. Day 6-10: 全200画面を自動的に紫系に変換完了

結果：

• リブランディング期間： 従来6ヶ月 → 10日（99%削減！）
• コスト削減： 推定1,200万円 → 50万円
• 一貫性： 全画面で完全に統一された紫系カラー
• ユーザーフィードバック： 「新UIがブランドイメージと完璧にマッチ」と好評

C社CTOのコメント：
「Figma Variablesの2階層構造（Primitive + Semantic）がなければ、10日での完了は絶対に不可能でした。Primitiveトークンを変更するだけで全体が更新される仕組みと、GPTによる正確な明度調整が、リブランディングの成功要因です。」

Figma × GPT実装チェックリスト

ペン博士

ここでは、デザインシステム構築の進捗を確認できるチェックリストを紹介するぞ！実践の際に非常に重要なパートだから覚えておくのじゃ！

生徒

はい！お願いします！

Phase 1: 準備（所要時間：30分）

• Figmaアカウントの準備（無料プランでOK）
• ChatGPT/Claudeアカウントの準備（GPT-4以上推奨）
• Figma Makeプラグインのインストール
• 対象デザインファイルの決定
• Tailwind CSS公式ドキュメントの確認

Phase 2: 抽出（所要時間：30分〜1時間）

• Figma Makeで色を抽出
• 使用頻度を確認
• スペーシング値を抽出
• フォントサイズを抽出
• その他のデザイン値（角丸、シャドウ等）を抽出
• ☐ 抽出データをテキストファイルに保存

Phase 3: リファクタリング（所要時間：1〜2時間）

• 色のリファクタリング – GPTに抽出データを渡す – Tailwind 11段階への統一を指示 – 出力されたJSONを確認 – ブランドカラーの維持を確認
• スペーシングのリファクタリング – 4の倍数への変換を指示 – 変換対応表を取得 – 極端な変換がないか確認
• フォントサイズのリファクタリング – Tailwind規則への統一 – line-heightの自動生成
• Semanticトークンの生成 – ボタン用トークン – テキスト用トークン – 背景用トークン – ボーダー用トークン

Phase 4: DTCG形式変換（所要時間：30分〜1時間）

• GPTにDTCG形式への変換を指示
• $schema、$type、$valueの確認
• 色の形式確認（hex or colorSpace）
• 参照構文（{…}）の確認
• JSONバリデーション（オンラインツール使用）
• JSONファイルの保存

Phase 5: Figmaインポート（所要時間：30分）

• Figma Variablesパネルを開く
• Import variablesを実行
• エラーがないか確認
• Primitive/Semanticの階層確認
• 参照が正しく機能しているか確認
• サンプルコンポーネントで動作テスト

Phase 6: 既存デザインへの適用（所要時間：2〜4時間）

• 色の一括置換 – Find and Replace Colorsプラグイン使用 – 主要色から順に置換 – 置換前後のスクリーンショット取得
• スペーシングの置換 – Auto Layoutのgap – padding – margin（Figmaではgapとして表現）
• フォントサイズの置換
• 全ページの目視確認
• デザインレビュー

Phase 7: ドキュメント化（所要時間：1〜2時間）

• デザイントークン一覧表の作成
• 使用例の作成
• 変換対応表の記録
• GPTプロンプトの保存
• チーム共有ドキュメントの作成
• 開発チームへの説明資料作成

Phase 8: 保守・運用（継続）

• Variablesの定期レビュー（月1回）
• 新規トークン追加時のルール策定
• チームメンバーへの教育
• CSS/Tailwindへの同期方法の確立
• バージョン管理の仕組み構築

総合評価

よくある質問（FAQ）

Q1: Figma Variablesとは何ですか？

A: Figma Variablesは、色・スペーシング・フォントサイズなどのデザイン値を変数として一元管理する機能です。デザイントークン（Design Tokens）とも呼ばれ、一箇所を変更すれば全体に反映されるため、デザインの一貫性と保守性が大幅に向上します。

Q2: なぜTailwind CSSの規則に合わせる必要があるのですか？

A: Tailwind CSSは多くの開発現場で採用されているCSSフレームワークです。デザイントークンをTailwind規則に合わせることで、デザインとコードの完全一致が実現し、開発効率が30〜40%向上します。また、text-blue-500のような直感的なクラス名が使えるようになります。

Q3: GPT-4以外のモデル（GPT-3.5やClaude）でも使えますか？

A: 可能ですが、精度に差があります。

• GPT-3.5： 色相のブレ補正が弱い
• Claude 3.5 Sonnet： 大量データ処理に強い
• 推奨： 小〜中規模プロジェクトならGPT-4、大規模（50ページ以上）ならClaude 3.5 Sonnet

無料版ChatGPTでも基本的な作業は可能ですが、リファクタリングの質は落ちます。

Q4: DTCG仕様とは何ですか？

A: Design Tokens Community Group（DTCG）が策定する、デザイントークンの標準仕様です。$type、$value、$descriptionなどの要素で構成され、Figma、Adobe XD、Sketch等の複数ツール間でトークンを共有できます。JSON形式で記述します。

Q5: Figma Makeの代替ツールはありますか？

A: はい、Design Tokensプラグイン、Tokens Studio、Specify等があります。しかし、Figma Makeは無料で使いやすく、使用頻度も表示されるため最もおすすめです。高度な機能が必要な場合はTokens Studio（有料）を検討してください。

Q6: 実装にかかる時間はどのくらいですか？

A: プロジェクト規模により異なりますが、標準的な目安は以下の通りです：

• 小規模（5〜10ページ）： 3〜4時間
• 中規模（20〜30ページ）： 6〜8時間
• 大規模（50ページ以上）： 10〜15時間

初回は習熟に時間がかかりますが、2回目以降は50%程度に短縮されます。従来の手作業（30〜40時間）と比較すると、80〜90%の時間削減が可能です。

Q7: PrimitiveトークンとSemanticトークンの違いは何ですか？

A: 2階層のトークン構造です：

• Primitive（基礎トークン）： blue-500、spacing-4など、具体的な値を持つトークン。デザインシステムの基礎となる色・サイズの定義。
• Semantic（意味トークン）： button-primary-background、card-paddingなど、用途・意味を持つトークン。Primitiveトークンを参照して定義。

例えば、button-primary-background: {color.primitive.blue.500}とすることで、ボタン色を変更したい時はSemanticトークンだけを変更すれば済みます。Primitiveトークンは保持されるため、他の要素に影響しません。

Q8: 既存プロジェクトにも適用できますか？

A: はい、段階的に適用可能です。推奨アプローチ：

1. Phase 1： 色トークンのみ導入（最も効果が高い）
2. Phase 2： スペーシングトークンを追加
3. Phase 3： タイポグラフィトークンを追加
4. Phase 4： コンポーネント単位でトークン適用を拡大

既存デザインの色を抽出 → GPTでリファクタリング → 新規トークンに置き換えという流れで、リスクを最小限に抑えて移行できます。一度に全体を変更する必要はありません。

Q9: デザインが変更された場合、どう対応すればいいですか？

A: デザイントークンの最大の利点がここにあります：

• ブランドカラー変更： Primitiveトークンのblue-500を変更するだけで、全てのボタン・リンク・アイコンが一括変更
• ダークモード追加： Semanticトークンのモード切り替えで対応（Primitiveトークンは不変）
• スペーシング調整： spacing-4: 16px → 20pxに変更すれば、全体の余白が自動調整

従来は数十〜数百箇所を手作業で修正していた作業が、数分で完了します。これが修正工数60〜70%削減の理由です。

Q10: プログラミング知識は必要ですか？

A: 基本的なJSON理解があれば十分です。必要なスキルレベル：

• 必須： Figmaの基本操作、JSONの読み書き（{"key": "value"}形式の理解）
• 推奨： CSSの基礎知識（色・余白・フォントサイズの概念）
• 不要： JavaScript、React、プログラミング全般

本記事のプロンプトテンプレート集をコピー&ペーストすれば、GPTが自動でJSON生成してくれます。WithCodeの初級コース修了レベルで十分実践可能です。

Q11: コンポーネント固有のトークンはどう管理すればいいですか？

A: Semanticトークンの階層化で対応します：

{
  "color": {
    "semantic": {
      "button": {
        "primary": {
          "background": "{color.primitive.blue.500}",
          "text": "{color.primitive.white}",
          "border": "{color.primitive.blue.600}"
        },
        "secondary": {
          "background": "{color.primitive.gray.100}",
          "text": "{color.primitive.gray.900}"
        }
      },
      "card": {
        "background": "{color.primitive.white}",
        "border": "{color.primitive.gray.200}",
        "shadow": "{color.primitive.gray.300}"
      }
    }
  }
}

コンポーネントごとにbutton、card、modal、inputなどの名前空間を作り、その中でbackground、text、borderなどの役割別トークンを定義します。本記事のプロンプトテンプレート8を活用してください。

Q12: ダークモードに対応させるにはどうすればいいですか？

A: Figma VariablesのModes機能を活用します：

1. Lightモード： button-background: blue-500
2. Darkモード： button-background: blue-400（明度を調整）

Semanticトークンに対してモード別の値を設定するだけで、デザイン全体がワンクリックで切り替わります。実装方法プロンプトテンプレート7（ダークモード対応）を参照してください。GPTに「ダークモード用のトークン値を生成して」と依頼すれば、適切な明度調整を自動で行ってくれます。

Q13: チーム全体でトークンの一貫性を保つにはどうすればいいですか？

A: 3つのルールを設定します：

1. 命名規則の統一： color-{category}-{scale}、spacing-{size}など、チーム全員が従うネーミングルールを文書化
2. トークン追加の承認フロー： 新しいトークンを追加する際は、デザインリードの承認を必須化
3. 定期的な棚卸し： 月1回、使われていないトークンを削除し、重複を統合

また、Figma Makeの使用頻度表示機能を活用し、「使用回数0のトークンは削除候補」とすることで、無駄なトークンの蓄積を防げます。

Q14: 導入コストはどのくらいかかりますか？

A: 初期投資は最小限です：

ROI（投資対効果）：

• 月1プロジェクトで10時間削減 → 時給3,000円換算で月3万円のコスト削減
• 投資：月2,000円（ChatGPT Plus）
• 純利益：月28,000円、年間33.6万円

初月で投資回収可能です。

Q15: Vue/React/Angularなどのフレームワークでも使えますか？

A: はい、すべての主要フレームワークで利用可能です。DTCG仕様のJSONをCSS変数やSCSS変数に変換するツールがあります：

• Style Dictionary（Amazonオープンソース）： DTCG JSON → CSS変数、SCSS、JS、iOS/Androidネイティブコードに変換
• Tailwind CSS設定： DTCGトークンをtailwind.config.jsに直接インポート
• CSS-in-JS（Styled Components、Emotion）： トークンをJS objectとしてインポート

GPTに「このDTCG JSONをReactのStyled Components用に変換して」と依頼すれば、即座に対応コードを生成してくれます。

生徒

最初は「AIで楽をする方法」だと思ってました。
でも違いました。
これは構造を持つための武器ですね！

ペン博士

うむ。Figma × GPTは作業を減らす道具ではない。
思考を拡張する道具なのじゃ！

生徒

実際に既存UIからデザインシステムを構築してみようと思います。ありがとうございました！

まとめ

本記事では、FigmaとGPTを活用した革新的なUI構築手法「デザインシステム逆生成」について、実践的なワークフローを徹底解説しました。

重要なポイントは以下の通りです。

・デザインシステムは必須インフラ： 開発時間30〜40%削減、修正工数60〜70%削減
・AI活用で効率化： 従来30時間 → AI活用で4時間（87%削減）
・4ステップで実現： ① Figma Makeで抽出 → ② GPTでリファクタリング → ③ DTCG JSON作成 → ④ Figmaにインポート
・Tailwind規則準拠： デザインとコードの完全一致、開発効率向上
・2階層構造： Primitive（基礎値）+ Semantic（用途別）で保守性・拡張性を確保

WithCodeで学んだWeb制作スキルに、AIを活用したデザインシステム構築を組み合わせれば、プロフェッショナルとして大きく差別化できます。

大切なのは、完璧を目指さず、段階的に実装すること：

1. Week 1: 小規模プロジェクトで4ステップを試す
2. Week 2: プロンプトを改善し、精度を向上
3. Week 3: チーム全体でワークフローを共有
4. Month 2-3: 全プロジェクトに展開、ドキュメント整備

デザインシステム構築は「いつかやろう」ではなく、「今日から始める」ことが重要です。クライアントプロジェクトの品質向上、そして自分のスキルアップのために、今すぐFigma × GPTを実践しましょう！

WithCodeを体験できる初級コース公開中！

初級コース（¥49,800）が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

WithCodeでは、Web制作の技術だけでなく、FigmaやGPTを活用した最新のデザインワークフローも学べるカリキュラムを用意しています。プロとして活躍するために必要な、技術力と効率化スキルの両方を身につけましょう。