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 デザインの検索、作成、自動入力、エクスポート
有料広告、SEO、メール、ソーシャル、アナリティクスを担う AI マーケター
静的なフォームを対話型の AI コンシェルジュに変換します。
Adobe のプロツールでアイデアを形にし、成果物を届けます
数分でウェブサイトやウェブアプリを構築できます。生成、デザイン、コーディング、コピーライティングまで — B12 が提供します。お問い合わせ: hello@b12.io
monday.com のプロジェクト管理・CRM でプロジェクト、タスク、ポートフォリオ、ボード、ワークフロー、マイルストーン、依存関係、フォーム、ダッシュボードを管理