figma Claude Code プラグイン
Claude Code プラグインClaude Codeデザインデザイン・メディア制作Web・アプリ開発以下の解説は生成 AI によるものです。出典と照らし合わせてご確認ください。
このプラグインは、Figma MCP サーバーを通じて AI コーディングアシスタントと Figma を連携させ、デザインファイルの読み取りとコードへの変換を行うものです。README によると、選択したフレームやレイヤーから構造化されたデザインコンテキスト（React と Tailwind による表現など）を取得したり、変数やデザイントークンを抽出したりできます。また、Figma ファイルへの書き込み、Code Connect によるコンポーネントとコードベースの紐付け、Figma Make のプロトタイプからのコンテキスト取得にも対応しています。README では、Figma のプランやシートの種類によって、月間または分単位の呼び出し回数制限が課される場合があると説明されています。
連携サービスについて
Figma は UI やプロダクトのデザイン・プロトタイピング・共同作業をブラウザ上で行うデザインプラットフォームで、このプラグインは Figma の MCP サーバーを介して接続し、AI エージェントがデザインデータを取得したり関連コードを生成したりできるようにします。
figma でできること
- 選択したフレームやノードについて、構造化されたデザインコンテキスト（React + Tailwind 表現など）を取得する
- デザインで使われている変数・スタイル・デザイントークンを抽出する
- 選択したフレームやレイヤーからコードを生成し、実装に利用する
- フレーム・コンポーネント・変数・オートレイアウトなど、Figma ファイルへの変更を書き戻す（リモートサーバー限定、ベータ期間中は無料）
- Code Connect を使って生成コードを既存コンポーネントに紐付け、コードベースとの一貫性を保つ
- Figma Make のプロジェクトからコンテキストやファイルを取得し、プロトタイプを本番コードへ発展させる
- AI コーディングエージェントからウェブページを Figma デザインに変換する（順次展開中の機能）
- UI 操作の録画から注釈付き Figma ボードを作成したり、PRD から FigJam のプロジェクト計画ボードを作るなど、追加のワークフロー用スキルを利用する