FigmaをChatGPT、Claude、Geminiに接続

• 01 / 03Figmaファイルの監査方法
• 02 / 03UIコンポーネントの画像書き出し
• 03 / 03デザイントークンの同期方法

最速日

690ms

最遅日

1045ms

14日間の傾向

改善傾向-9%

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

各クライアントの手順ガイドはこちらです。 接続方法

Claude向けのガイド付きセットアップ？ FigmaをClaudeや他のAIに設定する

このConnectorが対応するすべてのAIクライアントを見る ↑

• 01

  プロダクトデザイナー

  手動のエクスポート作業を減らし、ドキュメント作成やアセットの受け渡しを自動化します。

• 02

  フロントエンドエンジニア

  デザイントークンやスタイル、コンポーネントのメタデータをコードへ直接抽出します。

• 03

  プロダクトマネージャー

  自然言語による問い合わせを通じて、デザインの進捗確認やコメントのレビューを迅速に行います。

• 01

  How do I connect my Figma account?

  You need to provide a Figma Personal Access Token. You can find this in your Figma Account Settings. Once you enter it into the Vinkius interface, the connection is ready.

• 02

  Which AI clients can use this Figma MCP?

  This MCP works with any compatible client, including Claude, Cursor, Windsurf, and VS Code.

• 03

  Can the AI actually see my design files?

  Yes. The agent can inspect the document tree, retrieve specific nodes, and view file versions to understand your design structure.

• 04

  Can I get images of my designs through the AI?

  Yes. You can use the get_images capability to render Figma frames, components, or layers as PNG, SVG, or PDF files.

• 05

  Is it possible to manage comments?

  Yes. The MCP includes capabilities to get, post, and delete comments directly on your Figma files.

• 06

  How do I obtain my Figma Personal Access Token?

  Log in to Figma, click on your name in the top-left to go to Account Settings, scroll down to the Personal access tokens section, and click Create a new personal access token.

• 07

  Where can I find the File Key?

  Open any Figma file in your browser. The URL will look like https://www.figma.com/file/:key/:title. The random string of characters after /file/ is your File Key.

• 08

  Can I render design layers as images via chat?

  Yes! The get_images capability allows you to specify a File Key and Node IDs to receive high-quality render URLs in PNG, SVG, or PDF formats flawlessy.

• 

  Figma AIコネクタ

  Access Figma design files, comments, components and images via API — inspect nodes, render exports and track v

  表示
• 

  Pixso AIコネクタ

  Collaborative design platform and UI/UX tool — manage design files, nodes, and teams via AI.

  表示
• 

  Vectorizer AI AIコネクタ

  Convert bitmap images (JPG, PNG) into high-quality vector graphics (SVG, EPS, PDF, DXF) using AI-powered traci

  表示
• 

  Design Pickle AIコネクタ

  Equip your AI agent to manage graphic design requests, track brand profiles, and monitor your production queue

  表示

おすすめ

• 

  Ideogram (AI Image Generation) AIコネクタ

  Generate and edit images via Ideogram — the industry leader for rendering text within AI-generated visuals.

  表示
• 

  MasterGo AIコネクタ

  Collaborative design platform and UI/UX tool — manage design files, nodes, and comments via AI.

  表示
• 

  Adsorption System Designer AIコネクタ

  Professional engineering tool for designing adsorption-based separation systems.

  表示
• 

  Flare System Design AIコネクタ

  Professional engineering tool for designing flare stacks and relief systems using API 520/521 standards.

  表示