AIでFigmaのUIコンポーネントを画像として書き出す方法

AIに取得したいFigmaのノードやフレームを伝えるだけで、PNGまたはSVGファイルとして抽出できます。チャット画面から離れることなく、ドキュメントやコード用のデザインアセットを素早く取得可能です。プロジェクトに必要なファイルを正確に手に入れられます。

1. 01

   デザイン要素の特定

   プロンプトで指定された特定のフレームやノードをAIが特定します。

   get_file_nodes
2. 02

   ビジュアルデータの抽出

   ノードが見つかると、AIはその要素の実際の画像データをリクエストします。

   get_images
3. 03

   出力形式の準備

   指示に基づき、AIが画像をPNGまたはSVG形式で用意します。

   get_images
4. 04

   チャットへの提供

   最終的な画像ファイルがチャット画面に直接表示されます。

   get_images

Figma Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_259SBocJyDiuTotSWjQKeGBx55ULMHMQHRbOcsF5/mcpコピー

Claude Desktop

以下の手順で数秒で接続できます。

1. 1In Claude Desktop, open Settings → Connectors.
2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3. 3Click Add and start a new chat — Figma capabilities are ready to use.

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "figma-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_259SBocJyDiuTotSWjQKeGBx55ULMHMQHRbOcsF5/mcp"
    }
  }
}

• Claude
• ChatGPT
• Cursor
• VS Code
• Windsurf
• Claude Code
• JetBrains
• Cline

Figmaアカウントを連携するだけで準備完了です。認証情報は暗号化されて保護されるため、対応するクライアントからすぐにアセットの取得を開始できます。

• 01

  AIはFigmaのデザインを編集できますか？

  いいえ。AIができるのはノードの読み取りと画像の抽出のみです。レイヤーの移動、色の変更、Figmaファイル自体の修正はできません。

• 02

  どのようなファイル形式が取得できますか？

  PNGまたはSVG形式の画像をリクエストできます。

• 03

  AIは新しいFigmaコンポーネントを作成できますか？

  いいえ。AIの機能は、利用可能なツールを介して既存のノードや画像を取得することに限定されています。

• 04

  FigmaのURLを指定する必要がありますか？

  はい。AIがどのファイル内のノードを探すべきか判断するために、特定のファイルURLを指定する必要があります。

• 05

  ページ全体を一度に取得することはできますか？

  はい。そのページを表すフレームまたはノードを特定できれば可能です。

• Figmaに関するその他の質問は、コネクターの専用ページで確認できます。 Figma MCPの全機能を見る