デザイナー向け MCP: Figma、トークン、コードを Claude および Cursor に接続する

MCP をわかりやすく言うと

MCP の公式ドキュメントでは、AI アプリケーションをファイル、データベース、ツールなどの外部システムに接続するためのオープンソース標準として説明されています。独自の例の 1 つは、Figma デザインから Web アプリ全体を生成する Claude Code です。デザイナーにとって重要なのは、AI がデザインがどのようなものかを推測する必要がなくなったことです。デザインツールに直接問い合わせることも可能です。

今日の MCP サーバーを使用した設計ツール

2026 年 10 月現在:

• Figma: エージェントにコード生成用の設計コンテキスト (変数、コンポーネント、レイアウト) を提供し、ネイティブ コンテンツをキャンバスに書き戻すことができる MCP サーバー。 Figma はスターター プランと有料プランにリストされています。キャンバスへの書き込みはベータ版の間は無料です。
• Penpot: Claude、Cursor、VS Code、OpenAI Codex を含む任意の MCP クライアントで動作し、自己ホスト型の無料のオープン MCP サーバーです。
• ExodeUI (we make it): AI コーディング ツールで状態とスプリング物理を使用したインタラクティブなアニメーションを作成および編集できるようにする MCP サーバー。
• トークンの設計: トークンが JSON としてリポジトリに存在する場合、AI コーディング ツールはすでにトークンをファイルとして読み取ることができます。専用サーバーは、ツール内に保存されたトークンにのみ必要です。

デザイナーが実際にどのように使用しているか

最も一般的なワークフローは、魔法のようなものではなく実用的なものです。開発者はフレームを選択し、AI に既存のコンポーネント ライブラリを使用して実装するよう依頼します。デザイナーはAIに、コード化された画面がデザインと一致するかどうかをチェックしてもらい、相違点をリストアップします。チームは AI に、コードベース全体でコンポーネントのトークンを更新するように依頼します。そして、デザイナーが AI を使用してキャンバス上で直接バリアントを作成し、手作業で改良するケースが増えています。

サーバーに接続する

Claude Code は、claude mcp add コマンドまたはプロジェクト内の .mcp.json ファイルを使用してサーバーを追加し、ローカル HTTP サーバーだけでなくリモート HTTP サーバーもサポートします。 Cursor は設定で MCP サーバーを管理し、ローカル (stdio) サーバーとリモート サーバーをサポートします。通常、リモート サーバーは、OAuth を使用して一度サインインするように求めます。各ベンダーは、サーバーの正確なコマンドまたは URL を文書化します。

気をつけるべきこと

MCP は AI ツールに実際のアクセスを与えるため、他の統合と同様に扱います。

• 権限: キャンバスまたはリポジトリに書き込むことができるエージェントも間違いを犯す可能性があります。バージョン履歴を使用して変更を確認します。
• プライバシー: 設計データの保存先と、プランでそれが許可されているかどうかを確認してください。
• コスト: 一部の書き込み機能はベータ版では無料ですが、使用量ベースになる予定です。
• 品質: AI 出力は、システムが適切に構造化されており、名前付きのコンポーネントとトークンが含まれている場合にのみ、設計システムに従います。