【使えそうな予感】Figma公式MCPを試してみた
この記事は Figma Dev Mode MCP Server の open beta 版を使用した体験に基づいて、Claudeに仕様を照らし合わせた上で執筆してもらっています。
機能の詳細や最新情報については、公式ドキュメントやリリース記事をご確認ください。
こんにちは、私は事業会社でフロントエンドエンジニアとして従事しています。
たまにデザインエンジニアのようなこともやっています。
Figma公式のMCP Serverが使えるようになっていたので、サードパーティ製と比べて感じたことを書きます。
注意: この機能は現在ベータ版です。Dev/Fullシート（Professional以上のプラン）とFigmaデスクトップアプリが必要で、VS Code、Cursor、Windsurf、Claude Code等のMCP対応エディタで利用できます。
大規模ファイルでもスムーズに動作
デザインシステムのような規模の大きいFigmaファイルでも読み込めるようになりました。
サードパーティ製はAPIからmetadataをまるっと読み込んでおり、ちょっとしたデザインでもとんでもないトークン数になっていたので、これはかなり嬉しい点です。
公式のDev Mode MCP Serverでは選択ベース（Selection-based）またはリンクベース（Link-based）でのアプローチを採用しており、必要な部分のみを効率的に取得できるようになりました。これにより、LLMのトークン使用量も削減され、APIレート制限の問題も解決されています。
バリアブル（Variables）の取得が可能に
バリアブル（Variables）もVariablesとしてMCPから個別に返してくれるようになりました。
デザイントークンの構成とルールをAIエディタ側に伝えやすくなったので、これもかなり好印象です。AIエディタ側で 「最新のVariablesを取得して、themeファイルを更新して」という指示だけでデザイントークンを同期できるようになるのではと期待しています。
Figmaでは、これを「パターンメタデータ」として提供しており、Variables、コンポーネント、スタイルの情報を効率的に取得・活用できます。Code Connectと連携することで、デザインで使用している具体的なVariableの名前や、設定したコード構文も正確にLLMに伝達されます。
レスポンシブ等のレイアウト対応の改善
VariablesやModeの情報も渡しているのか、同じ画面のPCとSPということも判別していて、それを踏まえてレスポンシブでの実装を行ってくれました。
Dev Mode MCP Serverでは、デザインの「意図」を理解するために、スクリーンショットとメタデータを組み合わせた情報を提供します。これにより、単なる見た目の再現ではなく、デザインの文脈を理解した実装提案が可能になっています。
総評
全体としてサードパーティ製と比べ、ようやく使い物になりそうな予感がしました。
これまでのサードパーティ製Figma MCPは「使えなくはないが実用性に疑問」というレベルでしたが、公式のDev Mode MCP Serverは「実際の開発ワークフローに組み込める」レベルに達していると感じます。特にデザインシステムを運用している開発チームや、Code Connectを既に活用しているチームには大きなメリットをもたらしそうです。
Discussion