概要
AnthropicのAIエージェント「Claude Code」がFigma MCPサーバー経由でデザイン操作に対応し、コードからデザインシステムやコンポーネントを自動生成・同期する実用的な検証レポート。
詳細内容
Figmaが発表したMCP（Model Context Protocol）サーバーにより、Claude CodeなどのAIエージェントがFigmaファイルを直接操作できるようになりました。本記事では、新たに追加された`use_figma`ツールと、それに基づく様々なスキルを検証しています。
主な検証内容は以下の通りです：
- **/figma-generate-library**: CSSなどのコードからデザイントークン（変数）やコンポーネントを自動生成し、Figmaライブラリを構築します。特にReactコンポーネントのCVA定義を解釈し、バリアント付きコンポーネントを作成する機能の有用性を確認しています。
- **/figma-generate-design**: ローカルのコードを元にFigma上で画面を構成します。オートレイアウトや命名規則も考慮されており、完成度7割程度のモックアップが自動生成可能です。
- **その他のスキル**: アクセシビリティ仕様書の生成（/create-voice）や、視覚的階層に基づいた余白の自動適用（/rad-spacing）、コードとデザイン間の同期（/sync-figma-token）など、エンジニア主体でデザイン品質を担保するための強力な機能群を紹介しています。
現在はベータ期間中で無料利用が可能であり、エンジニアとデザイナーのワークフローを劇的に変える可能性が示されています。