Figma MCP サーバーを使用すると、Figma のコンテキストを取り込み、コードベースとデザインの意図に沿った高品質なコードを生成できます。MCP サーバーを通じて Figma Design や Make ファイルからコードリソースを取得し、アイデアをプロダクションレディなアプリへと変換しましょう。
**主な機能：**
• **選択したフレームまたはノードからコードを生成** — Figma でフレームを選択するか、ノード URL を指定するだけで、AIエージェントがデザインをコードに変換します。
• **レイヤーからデザインコンテキストを抽出** — デザインから変数、コンポーネント、レイアウトを取り出し、デザインパターンに準拠したビルドを実現します。
• **Code Connect でよりスマートにコーディング** — 既存のコンポーネントを再利用することで出力品質を向上させます。MCP サーバーが Code Connect の情報をもとに既存コンポーネントを AIエージェントに伝達します。
• **ダイアグラムでフローを可視化** — Figma MCP サーバーは、Claude へのプロンプトをフローチャート、ガントチャート、その他のダイアグラムとして FigJam に出力できます。
**注意：** get_screenshot ツールは、Claude および Claude Code から呼び出した場合、現在のところ Figma のスクリーンショットの説明を返す機能に限定されています。開発者向け利用規約は[こちら](https://www.figma.com/legal/developer-terms/)をご覧ください。
ツール
- generate_diagram
- get_design_context
- get_screenshot
- get_metadata
- create_design_system_rules
- get_variable_defs
- get_code_connect_map
- get_figjam
- whoami
信頼できる開発者のコネクタのみご利用ください。Anthropicは開発者が提供するツールを管理しておらず、意図どおりに動作すること、または変更されないことを保証できません。
関連コネクタ
Canva デザインの検索、作成、自動入力、エクスポート
monday.com のプロジェクト管理と CRM を活用して、プロジェクト、タスク、ポートフォリオ、ボード、ワークフロー、マイルストーン、依存関係、フォーム、ダッシュボード、クロスプロジェクトのポートフォリオ稼働状況、クリティカルパスを一元管理できます。
Adobe のプロツールでデザイン、組み合わせ、編集を行えます。
Miro ボード上のコンテンツへのアクセスおよび新規作成が可能です。
テンプレートから動画・PDF・画像を自動生成し、ソーシャルプラットフォームへ投稿、エンゲージメントの追跡と成長を実現します
YouTube・Instagram・TikTok 向けの研究とコンテンツ制作を支援