figma
Figma デザインプラットフォームとの連携。デザインファイルへのアクセス、コンポーネント情報の抽出、デザイントークンの読み取り、デザインのコード化により、デザインと開発をつなぐ。
導入
公式マーケットプレイスが未追加なら先に実行
- カテゴリ
- デザイン
- GitHub
- figma/mcp-server-guide
こんな用途に
- 選択した Figma フレームをコードに変換する
- 変数、コンポーネント、レイアウト情報を IDE に取り込む
- Code Connect で実際のコンポーネントを再利用する
- Figma キャンバス上でフレーム、コンポーネント、オートレイアウトを作成・変更する
始め方
- Claude Code で /plugin install figma@claude-plugins-official を実行する
- 案内に従ってサインインし、Figma MCP サーバーに接続する
- Figma でフレームを選び、コード生成やデザイン情報の取得を Claude に依頼する
導入前に
Starter プランや有料プランの View・Collab シートは月 6 回までのツール呼び出しに制限され、Dev・Full シートには毎分のレート制限があります。キャンバスへの書き込みはベータ中は無料で、今後は従量課金になる予定です。
プロジェクトの説明をもとに AI がまとめました。利用前に公式ドキュメントをご確認ください。
似たツール
- adobe-for-creativity公式プラグイン · デザイン
Adobe の AI クリエイティブツールで画像編集やデザインワークフローの自動化。背景削除、ベクター化、プロ品質のレタッチなどに対応。
- canva公式プラグイン · デザイン
Canva MCP サーバーで Canva デザインの作成、編集、レビュー、リサイズ、ブランドチェック。
- hyperframes公式プラグイン · デザイン
HeyGen の HyperFrames。HTML を書いて動画をレンダリング。コンポジション、GSAP とランタイムアダプターによるアニメーション、字幕、ナレーション、音声連動ビジュアル、Web サイトの動画キャプチャ。
- miro公式プラグイン · デザイン
Miro ボードへの安全なアクセス。エンタープライズ級のセキュリティで、ボードのコンテキスト読み取り、図の作成、コード生成を AI に許可。
- runway-api公式プラグイン · デザイン
大規模な動画生成。Runway の API で動画、画像、音声を生成し、広告キャンペーンの一括制作、製品動画、マルチショットのストーリー、クリエイティブの反復に対応。seedance2、gen4.5、veo3、Nano、Banana Pro などをサポート。
出典 anthropics/claude-plugins-official · 更新日 2026年10月11日 · 著作権は各作者に帰属します