Figma MCP って何？実際の業務で使ってみた

MCP って何？

MCP（Model Context Protocol）は、AIが外部のツールやサービスと直接やりとりするための仕組みです。Claude Code に Figma MCP を接続すると、会話の中から Figma のファイル情報を取得したり、スクリーンショットを撮ったりできるようになります。

難しく聞こえますが、やることは簡単です。「このFigmaファイルのスクリーンショットを撮って」と Claude Code に頼むだけ。

何ができるのか

Figma MCP でできることは、大きく分けて3つあります。

1. ファイル情報の取得

Figma のファイルURLを共有すると、ファイル名・ページ構成・フレーム一覧などの情報をJSON形式で取得できます。「このファイルにどんなページがあるか」が一瞬でわかります。

2. スクリーンショットの取得

指定したフレームのスクリーンショットを画像としてダウンロードできます。複数フレームを並列で処理できるので、10数件を一度に取得しても問題ありません。

3. ファイルへの書き込み

テキストの変更、画像の配置、フレームの作成など、Figma上の操作をコマンドで実行できます。ポートフォリオのページを自動生成するときに活用しました。

実際に使った場面

制作物の棚卸し

数百件の制作物を一覧化する作業で、各FigmaファイルのスクリーンショットをMCP経由で取得しました。手作業なら1件ずつFigmaを開いて、エクスポートして、ファイル名をつけて保存する必要がありますが、MCPなら「このフレームのスクリーンショットを撮って」の一言です。

ポートフォリオの自動生成

A4サイズのポートフォリオをFigma上で作る際、スクリーンショットの取得→画像のアップロード→フレームへの配置を半自動化しました。レイアウトの微調整は手動でしたが、素材の配置作業が大幅に省力化されました。

ハマりどころ

URLが必須

Figma MCP は、ファイルのURLを指定して操作する仕組みです。「チームの全ファイルを一覧表示」のようなブラウジングはできません。事前にFigmaでURLを控えておく必要があります。

スクリーンショットは一時URL

取得したスクリーンショットのURLには有効期限があります。取得したらすぐにダウンロードしないと、リンク切れになります。

レート制限

Figma の Starter プランでは API のレート制限があり、短時間に大量のリクエストを送るとエラーになることがあります。間隔を空けながら処理を進める工夫が必要でした。

デザイナーにとっての MCP

MCP の概念自体は開発者向けのものですが、恩恵を受けるのはデザイナーです。

Figma は日々の仕事で最も使うツール。そのFigmaを、AIとの会話の中からシームレスに操作できるのは、想像以上に便利です。「あのファイルのあのフレームを見せて」と言うだけで画像が出てくる。それだけで、AIとの協働の幅が大きく広がります。

MCPはFigma以外にも、GitHub、Slack、データベースなど様々なサービスに対応しています。私たちデザイナーが普段使っているツールとAIがつながる世界は、もうすぐそこまで来ています。