Gemini × Figma Make でデザインワークフローをAI化する方法【2026年版】

import json
from google import genai
 
client = genai.Client(api_key="YOUR_GEMINI_API_KEY")
 
# デザイン要件（自然言語）
design_brief = """
SNS向けのモバイルアプリのランディングページをデザインしたい。
- 対象ユーザー：20代～30代の都市部の女性
- カラーテーマ：ピンクと白を基調に、アクセントで黄色を使いたい
- コンセプト：「日常に癒しを」という感じで、やさしい雰囲気
- 機能：フィード表示、ユーザープロフィール、いいね機能
"""
 
# Gemini APIで要件を構造化
response = client.models.generate_content(
    model="gemini-2.0-flash",
    contents=f"""
以下のデザイン要件を、JSONフォーマットで構造化してください。
以下の項目を必ず含めてください：
- target_audience（対象ユーザー）
- color_palette（カラーパレット：メイン色、サブ色、アクセント色）
- concept（デザインコンセプト）
- typography（タイポグラフィの方向性）
- key_features（主要機能）
- layout_approach（レイアウトのアプローチ）
 
デザイン要件：
{design_brief}
 
JSON形式のみで返してください。説明は不要です。
"""
)
 
design_structure = json.loads(response.text)
print(json.dumps(design_structure, ensure_ascii=False, indent=2))

{
  "target_audience": "20代～30代の都市部の女性（ライフスタイル・ウェルネス関心層）",
  "color_palette": {
    "primary": "#FFB6D9",
    "secondary": "#FFFFFF",
    "accent": "#FFD700",
    "neutral": "#F5F5F5"
  },
  "concept": "やさしく、親しみやすい。毎日使いたくなる」をコンセプトに、丸みを帯びた優しいデザイン",
  "typography": {
    "heading": "丸みを帯びたサンセリフ（游ゴシック、Poppins）",
    "body": "可読性重視のサンセリフ（Noto Sans JP）"
  },
  "key_features": ["フィード表示", "ユーザープロフィール", "いいね機能"],
  "layout_approach": "カード型レイアウト、スペーシング重視"
}

import requests
 
# Figma Make の Webhook URL（あらかじめ設定）
webhook_url = "https://hooks.make.com/path/to/webhook"
 
payload = {
    "design_structure": design_structure,
    "variations": [
        {"variant": "light", "tone": "minimalist"},
        {"variant": "colorful", "tone": "vibrant"},
        {"variant": "dark", "tone": "sophisticated"}
    ]
}
 
response = requests.post(webhook_url, json=payload)
print(f"Figma Make triggered: {response.status_code}")

# Figmaのスクリーンショットを Gemini API に送信
curl https://api.gemini.google.com/v1/files/upload \
  -H "Authorization: Bearer YOUR_GEMINI_API_KEY" \
  -F "file=@landing-page.png"
 
# 出力されたファイル ID を使用して解析
gemini analyze \
  --image-id "files/..." \
  --prompt "このUIをHTMLコンポーネントとして実装するためのコード例を示してください。\
フレキシブルなカード型レイアウトを使用し、Tailwind CSS で実装してください"

<!-- Hero Section -->
<section class="bg-gradient-to-r from-pink-100 to-pink-50 py-20">
  <div class="max-w-4xl mx-auto px-6">
    <h1 class="text-5xl font-bold text-gray-900 mb-4">
      日常に癒しを
    </h1>
    <p class="text-xl text-gray-700 mb-8">
      毎日を少しずつ、心地よくするコミュニティ
    </p>
    <button class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full">
      今すぐ始める
    </button>
  </div>
</section>
 
<!-- Feed Section -->
<section class="py-20">
  <div class="max-w-4xl mx-auto px-6">
    <h2 class="text-3xl font-bold mb-12">タイムライン</h2>
    <div class="grid gap-6">
      <!-- Card component -->
      <div class="bg-white rounded-3xl shadow-md p-6 hover:shadow-lg transition">
        <!-- Content here -->
      </div>
    </div>
  </div>
</section>

html_code = """
<!-- 生成されたHTMLコード -->
"""
 
review_response = client.models.generate_content(
    model="gemini-2.0-flash",
    contents=f"""
以下のHTMLコードをレビューしてください。
チェック項目：
- アクセシビリティ（a11y）の問題はないか？
- レスポンシブデザインは十分か？
- パフォーマンス最適化の余地はないか？
- SEOメタタグは適切か？
 
改善提案があれば、具体的なコード例を示してください。
 
{html_code}
"""
)
 
print(review_response.text)

{
  "page_type": "SPA_landing",
  "color_scheme": {
    "primary": "#0066CC",
    "secondary": "#FFFFFF",
    "accent": "#00D4AA",
    "text": "#333333"
  },
  "sections": [
    "hero",
    "features",
    "testimonials",
    "pricing",
    "cta"
  ]
}