figma プラグイン
プラグイン Claude Code デザイン デザイン・メディア制作Web・アプリ開発以下の解説は生成 AI によるものです。出典と照らし合わせてご確認ください。
README によると、Figma MCP サーバーは Figma のデザインファイルを AI コーディングエージェントに接続し、デザイン情報とコンテキストを提供することでコード生成を支援します。get_design_context、get_variable_defs、get_metadata、get_screenshot といったツールが提供されており、VS Code、Cursor、Claude Code、Gemini CLI など Streamable HTTP に対応するクライアントから利用できます。ツール呼び出し数はプランやシートの種類によって制限され、Starter プランや View/Collab シートでは月6回までとなっています。キャンバスへの書き込み機能は現在ベータ期間中で無料提供されていますが、将来的には使用量に応じた有料機能へ移行する予定です。README では、Figma ファイルの構造化やプロンプトの書き方、カスタムルールの追加、大きな選択範囲を分割する手法など、生成コードの品質を高めるためのベストプラクティスと、Make プロジェクトからコンテキストを取得する連携についても説明されています。
概要
Figma はデザイン作成のためのプラットフォームです。本リポジトリはその Figma MCP サーバーの利用ガイドであり、Figma のデザインファイルを VS Code、Cursor、Claude Code、Gemini CLI などの MCP 対応クライアントに接続し、デザインコンテキストを読み取ってコードに変換する仕組みを解説しています。
figma でできること
- 選択した Figma フレームからコードを生成する
- get_design_context、get_variable_defs、get_metadata、get_screenshot などで変数・コンポ��ネ��ト・レイアウト情報を抽出する
- Code Connect で実際のコードベースのコンポーネントと一致させたコードを生成する
- リモートサーバー経由でキャンバスに書き込む（現在ベータ期間中は無料）
- Web ページから Figma デザインを生成する（展開中の機能）
- MCP の resources capability を使って Make のプロジェクトコンテキストを取得する
- VS Code、Cursor、Claude Code、Gemini CLI など Streamable HTTP 対応クライアントから接続する
出典
原文の説明（英語）
Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and development workflows.
figma の変更履歴
- プラグイン figma を追加