AIクライアントでFigmaのデザイントークンを同期する方法

このMCPを使用すると、AIクライアントがFigmaからローカル変数や公開スタイルを取得できます。これにより、エージェントはCSS、Tailwind設定、またはテーマオブジェクトを生成するために必要な正確な値を取得可能になります。

1. 01

   変数の取得

   Figmaファイルからローカル変数を読み取り、カラー、スペーシング、サイズスケールを把握します。

   get_local_variables
2. 02

   スタイルのリストアップ

   エージェントがファイルをスキャンし、タイポグラフィやエフェクトを含むすべての公開スタイルを見つけ出します。

   list_styles
3. 03

   コードへのマッピング

   取得した変数とスタイルを使用して、プロジェクト固有の形式でコードを生成します。

   get_local_variableslist_styles
4. 04

   同期の検証

   既存のコードベースとデザインデータを照合し、不一致がないか確認します。

   list_styles

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

  AIはファイルに直接コードを書き込めますか？

  いいえ。このMCPはFigmaからデータを読み取るためのものです。デザインデータをコードに適用するには、お使いのAIクライアントが持つファイル書き込み機能を使用してください。

• 03

  変数とスタイルの両方に対応していますか？

  はい。AIはローカル変数と公開スタイルの両方にアクセス可能です。

• 04

  AIは非公開のFigmaファイルも閲覧できますか？

  はい。接続したアカウントが閲覧権限を持っているファイルであれば、アクセス可能です。

• 05

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

  いいえ。提供されるツールは、変数とスタイルの読み取りに限定されています。

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