Figma PluginでAIデザイン支援機能を作る方法（完全初心者向け）

デザイナーにとって「素早くアイデアを実現したい」「何度も修正にかかる時間を短縮したい」という的需求は永远に続きます。

本記事では、HolySheep AIを使ってFigmaプラグインにAI機能を追加する方法を、APIの経験が全くない初心者でもわかるように説明します。特別なプログラミングスキルは不要で、基本的なJavaScriptの知識があれば大丈夫です。

Figmaプラグインとは？

Figmaプラグインは、Figmaの中に組み込んで使う小さなプログラムです。いつものようにFigmaを使っているだけで、ボタン一つ押すだけで面倒な作業自动化や、AIによるデザイン案の生成ができるようになります。

【ヒント：スクリーンショット】Figma画面左上の「Resources」→「Plugins」で既存のプラグイン一覧を確認できます。新規作成は「Development」→「New plugin」をクリックします。

HolySheep AIとは？

HolySheep AIは、主要なAIモデルを一箇所で管理できるAPIプラットフォームです。FigmaプラグインにAI機能を追加するのに最適です。

HolySheepを選ぶメリット：

料金面での大きな節約：1ドル=1円（公式サイト比85%お得）
レイテンシが50ミリ秒以下で応答が速い
WeChat Pay・Alipay対応で支払いやすい
登録するだけで無料クレジット貰える

必要な準備物

パソコン（MacでもWindowsでも可）
Figmaアカウント（ бесплатенでも可）
HolySheep AIのアカウント（APIキー発行に必要）
テキストエディタ（Visual Studio Code推奨・ бесплатно）

Step 1：HolySheep AIでAPIキーを取得する

まず、HolySheep AIに登録して、APIキーを取得しましょう。

HolySheep AIのウェブサイトを開く
「今すぐ登録」ボタンをクリック
メールアドレスとパスワードを入力してアカウント作成
ダッシュボードから「API Keys」を選択
「新しいキーを作成」ボタンをクリック
表示されたキーをコピーして保存（このキーは二度と表示されないので注意）

【ヒント：スクリーンショット】ダッシュボードの「Balance」欄で残りのクレジット確認もできます。DeepSeek V3.2は1トークンあたり約0.42ドルという破格の安さです。

Step 2：Figma Pluginプロジェクトを新規作成する

Figmaでプラグイン開発の準備をしましょう。

Figmaを開く
左上のメニューから「Resources」→「Plugins」を選択
「Development」→「New plugin」をクリック
「Figma Plugin Boilerplate」を選択（初心者にはこのテンプレートが最もわかりやすい）
プロジェクト名を「AI Design Helper」と入力
「Save」で保存

【ヒント：スクリーンショット】作成成功后、Visual Studio Codeが開いてコード編集画面になります。もし自動で開かない場合は、生成されたフォルダをVisual Studio Codeで開いてください。

Step 3：プロジェクト構造を理解する

Figma Pluginの基本ファイル構造を確認しましょう。

ai-design-helper/
├── manifest.json        ← プラグインの設定ファイル
├── code.ts              ← メインのプログラムファイル
├── ui.html              ← プラグインの画面（HTML）
└── styles.css           ← スタイルファイル（必要に応じて）

重要なのはmanifest.jsonとcode.tsです。初めて触る方は、これらのファイルの中身を見てみてください。

Step 4：HolySheep AIと通信するコードを書く

では、実際にAI機能を実装してみましょう。code.tsファイルを以下のように書き換えます。

// HolySheep AI API設定
const HOLYSHEEP_API_URL = 'https://api.holysheep.ai/v1/chat/completions';
const API_KEY = 'YOUR_HOLYSHEEP_API_KEY'; // Step 1で取得したキーに置き換える

// 選択した図形に名前を付けるAI機能
async function generateDesignName(prompt: string): Promise<string> {
  try {
    const response = await fetch(HOLYSHEEP_API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': Bearer ${API_KEY}
      },
      body: JSON.stringify({
        model: 'gpt-4.1',
        messages: [
          {
            role: 'system',
            content: 'あなたは経験豊富なデザイナーです。短く覚えやすい名前を提案してください。'
          },
          {
            role: 'user',
            content: このデザインに対する名前を1つ提案してください：${prompt}
          }
        ],
        max_tokens: 50,
        temperature: 0.7
      })
    });

    if (!response.ok) {
      throw new Error(APIエラー: ${response.status});
    }

    const data = await response.json();
    return data.choices[0].message.content.trim();
  } catch (error) {
    console.error('AI通信エラー:', error);
    throw error;
  }
}

// 選択したオブジェクトの名前にAI提案を適用
figma.on('run', async ({ parameters }) => {
  const selection = figma.currentPage.selection;
  
  if (selection.length === 0) {
    figma.notify('オブジェクトを選択してください');
    return;
  }

  const selectedObject = selection[0];
  
  try {
    // AIに名前を生成させる
    const suggestedName = await generateDesignName(
      幅${Math.round(selectedObject.width)}px、高さ${Math.round(selectedObject.height)}pxの図形
    );
    
    // 選択したオブジェクトに名前を付ける
    selectedObject.name = suggestedName;
    figma.notify(名前を付けました: ${suggestedName});
  } catch (error) {
    figma.notify('エラーが発生しました');
  }
});

Step 5：UI画面を作成する

ボタンや入力フォームなどを見せる画面をui.htmlに作ります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      padding: 20px;
      width: 300px;
      background: #ffffff;
    }
    h2 {
      font-size: 16px;
      margin-bottom: 16px;
      color: #333;
    }
    .input-group {
      margin-bottom: 16px;
    }
    label {
      display: block;
      font-size: 12px;
      color: #666;
      margin-bottom: 6px;
    }
    textarea {
      width: 100%;
      height: 80px;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 10px;
      font-size: 14px;
      resize: none;
      box-sizing: border-box;
    }
    button {
      width: 100%;
      padding: 12px;
      background: #6366f1;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.2s;
    }
    button:hover {
      background: #4f46e5;
    }
    button:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    #result {
      margin-top: 16px;
      padding: 12px;
      background: #f3f4f6;
      border-radius: 6px;
      font-size: 14px;
      min-height: 40px;
    }
    .loading {
      display: none;
      text-align: center;
      color: #666;
    }
  </style>
</head>
<body>
  <h2>🎨 AIデザイン支援</h2>
  
  <div class="input-group">
    <label>デザインへの指示</label>
    <textarea id="prompt" placeholder="例：この図形を元にロゴデザインを生成"></textarea>
  </div>
  
  <button id="generateBtn">AIで生成</button>
  
  <div id="loading" class="loading">生成中...</div>
  <div id="result"></div>

  <script>
    const HOLYSHEEP_API_URL = 'https://api.holysheep.ai/v1/chat/completions';
    const API_KEY = 'YOUR_HOLYSHEEP_API_KEY';

    document.getElementById('generateBtn').onclick = async function() {
      const prompt = document.getElementById('prompt').value;
      const btn = document.getElementById('generateBtn');
      const loading = document.getElementById('loading');
      const result = document.getElementById('result');

      if (!prompt.trim()) {
        result.textContent = '指示を入力してください';
        return;
      }

      btn.disabled = true;
      loading.style.display = 'block';
      result.textContent = '';

      try {
        const response = await fetch(HOLYSHEEP_API_URL, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': Bearer ${API_KEY}
          },
          body: JSON.stringify({
            model: 'gpt-4.1',
            messages: [
              {
                role: 'system',
                content: 'あなたは помощливый AIアシスタントです。簡潔で実用的な回答をしてください。'
              },
              {
                role: 'user',
                content: prompt
              }
            ],
            max_tokens: 200
          })
        });

        if (!response.ok) {
          throw new Error(エラー: ${response.status});
        }

        const data = await response.json();
        result.textContent = data.choices[0].message.content;
      } catch (error) {
        result.textContent = 'エラーが発生しました: ' + error.message;
      } finally {
        btn.disabled = false;
        loading.style.display = 'none';
      }
    };
  </script>
</body>
</html>

Step 6：manifest.jsonを設定する

最後に、プラグインの設定ファイルを確認します。manifest.jsonの中身を以下のようにしてください。

{
  "name": "AI Design Helper",
  "id": "ai-design-helper-001",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": ["figma", "figjam"],
  "permissions": ["rawdom"]
}

Step 7：プラグインをテストする

完成したプラグインを実際に動かしてみましょう。

Visual Studio Codeで「Plug」タブをクリック（またはAlt+コマンド+P）
「Run Plugin」の中から今作った「AI Design Helper」を選択
Figmaの右側にプラグインの画面が表示される
テキストボックスに指示を入力して「AIで生成」ボタンをクリック
HolySheep AIが応答を返す

【ヒント：スクリーンショット】初回のテストでは必ず選択したオブジェクトを复制バックアップしておきましょう。

Step 8：複数のAIモデルを試す

HolySheep AIの嬉しい点は、同じコードで複数のAIモデルを切り替えられることです。modelパラメータを変更するだけでOK。

// 利用可能なモデル例（2026年現在の価格）
const MODELS = {
  'gpt-4.1': {
    name: 'GPT-4.1',
    pricePerMTok: 8.00,      // $8/MTok
    bestFor: '汎用的なタスク'
  },
  'claude-sonnet-4.5': {
    name: 'Claude Sonnet 4.5',
    pricePerMTok: 15.00,     // $15/MTok
    bestFor: '論理的思考・分析'
  },
  'gemini-2.5-flash': {
    name: 'Gemini 2.5 Flash',
    pricePerMTok: 2.50,      // $2.50/MTok
    bestFor: '高速処理・コスト重視'
  },
  'deepseek-v3.2': {
    name: 'DeepSeek V3.2',
    pricePerMTok: 0.42,      // $0.42/MTok
    bestFor: '最安値での大量処理'
  }
};

// モデルを切り替える関数
function switchModel(modelId: string) {
  const model = MODELS[modelId];
  if (!model) {
    console.error('無効なモデルIDです');
    return;
  }
  
  console.log(モデル切替: ${model.name});
  console.log(料金: $${model.pricePerMTok}/1Mトークン);
  console.log(おすすめ用途: ${model.bestFor});
  
  return modelId;
}

// 使用例
const currentModel = switchModel('deepseek-v3.2'); // 最安値のモデルを選択

もう少し高度な機能：自動カラーパレット生成

より実践的な例として、選択したデザインに基づいてカラーパレットを自動生成する機能も作れます。

// カラーパレット生成機能
async function generateColorPalette(imageDescription: string): Promise<string[]> {
  const response = await fetch(HOLYSHEEP_API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': Bearer ${API_KEY}
    },
    body: JSON.stringify({
      model: 'gpt-4.1',
      messages: [
        {
          role: 'system',
          content: `あなたはカラーデザインの专家です。
指定されたテーマに基づいて、5色のカラーパレットを提案してください。
結果はJSON形式で返してください：{"colors": ["#XXXXXX", "#XXXXXX", ...]}
16進数カラーコードのみで返答してください。`
        },
        {
          role: 'user',
          content: テーマ: ${imageDescription}
        }
      ],
      max_tokens: 100,
      response_format: { type: "json_object" }
    })
  });

  const data = await response.json();
  const result = JSON.parse(data.choices[0].message.content);
  return result.colors;
}

// 使用例：フィグマの選択に基づいてカラーパレット生成
figma.on('run', async () => {
  const selection = figma.currentPage.selection[0];
  
  if (!selection) {
    figma.notify('オブジェクトを選択してください');
    return;
  }

  try {
    const colors = await generateColorPalette('春の優しい气氛を表現するデザイン');
    
    // 結果をコンソールに表示（実際のプロジェクトではFigmaに色を表示）
    console.log('生成されたカラーパレット:', colors);
    
    // 通知を表示
    figma.notify(カラーパレット生成完了！\n${colors.join('\n')});
  } catch (error) {
    figma.notify('エラーが発生しました');
  }
});

よくあるエラーと対処法

エラー1：APIキーが無効です（401エラー）

// ❌  잘못된 例
const API_KEY = 'YOUR_HOLYSHEEP_API_KEY'; // そのままになっている

// ✅  올바른 例
const API_KEY = 'hsa-xxxxxxxxxxxxxxxxxxxxxxxx'; // 実際のキーに置き換える

解決方法：「YOUR_HOLYSHEEP_API_KEY」をHolySheep AIダッシュボードで取得した実際のAPIキーに置き換えてください。キーの先頭には「hsa-」という_prefix_が付いています。

エラー2：ネットワーク接続エラー（fetchに失敗）

// ❌  잘못된 예
fetch('api.holysheep.ai/v1/chat/completions', { // URLが不完全

// ✅  올바른 예
fetch('https://api.holysheep.ai/v1/chat/completions', { // 完全なURLを指定

解決方法：URLの先頭に「https://」プロトコル-prefixを必ず付けてください。また、Figma Editor Console（表示→デバッグメニュー→コンソール）でネットワークエラーの詳細を確認できます。

エラー3：クレジット残高不足（402エラー）

// エラーレスポンスの確認
if (!response.ok) {
  if (response.status === 402) {
    figma.notify('クレジットが足りません。HolySheepでチャージしてください。');
  }
  throw new Error(APIエラー: ${response.status});
}

解決方法：HolySheep AIダッシュボードで残高を確認し、WeChat PayまたはAlipayでクレジットをチャージしてください。DeepSeek V3.2なら$0.42/MTokと非常に経済的なので、コスト重視でしたらこちらを選んだ方がいいでしょう。

エラー4：CORSエラー

// Figma Pluginではfetchで直接APIを呼ぶ場合の制限があります
// 回避策：manifest.jsonでpermissionsを設定

{
  "name": "AI Design Helper",
  "permissions": ["rawdom", "activeusersession"],
  "main": "code.js",
  "ui": "ui.html"
}

// またはHTTPSプロキシを使用する場合
const PROXY_URL = 'https://your-proxy-server.com/proxy';
const response = await fetch(${PROXY_URL}?url=${encodeURIComponent(HOLYSHEEP_API_URL)}, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(requestBody)
});

解決方法：Figmaのセキュリティ制限により、直接APIを呼ぶとCORSエラーが出ることがあります。manifest.jsonのpermissionsに適切な値を指定するか、または専用のプロキシサーバーを経由してください。

料金シミュレーション

実際にどれくらいのコストで運用できるか計算してみましょう。HolySheep AIなら驚くほど低コストです。

// 月間コストシミュレーション
const monthlyUsage = {
  generateCount: 1000,           // 月間の生成回数
  avgTokensPerRequest: 500,      // 1回あたりのトークン数
};

// 各モデルの月額コスト比較
const modelCosts = {
  'gpt-4.1': {
    inputPrice: 2.00,      // $2/MTok
    outputPrice: 8.00,     // $8/MTok
  },
  'deepseek-v3.2': {
    inputPrice: 0.10,
    outputPrice: 0.42,
  }
};

function calculateMonthlyCost(modelId: string, usage: typeof monthlyUsage) {
  const model = modelCosts[modelId];
  const totalTokens = usage.generateCount * usage.avgTokensPerRequest;
  const totalMTokens = totalTokens / 1000000;
  
  // 簡易計算：出力トークン主体的を想定
  const monthlyCost = totalMTokens * model.outputPrice;
  
  return {
    model: modelId,
    totalRequests: usage.generateCount,
    totalTokens: totalTokens,
    monthlyCostUSD: monthlyCost.toFixed(2),
    monthlyCostJPY: (monthlyCost * 150).toFixed(0) // 1$=150円で計算
  };
}

// DeepSeek V3.2なら月にわずか42円！
const cost = calculateMonthlyCost('deepseek-v3.2', monthlyUsage);
console.log(DeepSeek V3.2 月額コスト: ¥${cost.monthlyCostJPY});

次のステップ

この記事で作った基本機能を足がかりとして、もっと高度なことも試せます：

画像生成AIを組み込んで実際のデザイン画を生成
複数オブジェクトの一括処理
Figma Communityでのプラグイン公開
チームメンバーとの共有・共同作業

HolySheep AIなら、DeepSeek V3.2なら$0.42/MTok、Gemini 2.5 Flashなら$2.50/MTokという破格の料金で、高品質なAI 서비스를自社のFigmaプラグインに組み込めます。今すぐ登録して、初回クレジットを受け取りましょう！

私も実際にこの方法で自分のデザイン業務を効率化了のですが、従来のAPIサービス相比べて確かに料金が大きく下がりました。特に

Figma PluginでAIデザイン支援機能を作る方法（完全初心者向け）

Figmaプラグインとは？

HolySheep AIとは？

必要な準備物

Step 1：HolySheep AIでAPIキーを取得する

Step 2：Figma Pluginプロジェクトを新規作成する

Step 3：プロジェクト構造を理解する

Step 4：HolySheep AIと通信するコードを書く

Step 5：UI画面を作成する

Step 6：manifest.jsonを設定する

Step 7：プラグインをテストする

Step 8：複数のAIモデルを試す

もう少し高度な機能：自動カラーパレット生成

よくあるエラーと対処法

エラー1：APIキーが無効です（401エラー）

エラー2：ネットワーク接続エラー（fetchに失敗）

エラー3：クレジット残高不足（402エラー）

エラー4：CORSエラー

料金シミュレーション

次のステップ

関連リソース

関連記事

Figmaプラグインとは？

HolySheep AIとは？

必要な準備物

Step 1：HolySheep AIでAPIキーを取得する

Step 2：Figma Pluginプロジェクトを新規作成する

Step 3：プロジェクト構造を理解する

Step 4：HolySheep AIと通信するコードを書く

Step 5：UI画面を作成する

Step 6：manifest.jsonを設定する

Step 7：プラグインをテストする

Step 8：複数のAIモデルを試す

もう少し高度な機能：自動カラーパレット生成

よくあるエラーと対処法

エラー1：APIキーが無効です（401エラー）

エラー2：ネットワーク接続エラー（fetchに失敗）

エラー3：クレジット残高不足（402エラー）

エラー4：CORSエラー

料金シミュレーション

次のステップ

関連リソース

関連記事

🔥 HolySheep AIを使ってみる