【ITニュース解説】How to connect Figma MCP to KIRO IDE

現代のシステム開発、特にWebサイトやアプリケーションのユーザーインターフェース（UI）を構築するフロントエンド開発では、デザイナーが作成したデザインと、エンジニアが記述するコードの間でスムーズな連携が求められている。デザインツールとして広く利用されるFigmaと、開発者がコードを書くための統合開発環境（IDE）であるKiro IDEを連携させ、開発ワークフローを大きく改善するための画期的なツールがFigma MCP（Model-Code-Proxy）である。このFigma MCPは、大規模言語モデル（LLM）がFigmaでデザインされたUIをより正確に理解し、それに基づいたコードやコンポーネントを効率的に生成できるようにするための「仲介役」を果たす。この仕組みをKiro IDEに設定することで、デザインからコードへの変換プロセスを大幅に効率化し、開発者がより少ない手間で高品質なUIを実装できるようになる。ここでは、Figma MCPをKiro IDEに接続する具体的な手順と、その背景にある技術的な考え方について解説する。

まず、Figma MCPをKiro IDEで利用可能にするための最初のステップは、Figma側でパーソナルアクセストークンを生成することである。このパーソナルアクセストークンは、Kiro IDEがFigmaのデザインデータに安全にアクセスするための「鍵」のようなものだと考えると良い。直接FigmaのアカウントパスワードをKiro IDEに教えるのではなく、特定の権限（今回はデザインの読み取り権限）だけを持つトークンを発行することで、セキュリティを確保しつつ必要な連携を可能にする。このトークンはFigmaの設定画面から生成できる。具体的には、Figmaを開き、設定画面へ移動し、上部にある「Security」タブを選択する。そこには「Personal Access Tokens」という項目があるので、新しいトークンを生成する手続きを進める。この際、必ず「read」（読み取り）権限を付与することが重要だ。これにより、Kiro IDEはFigmaのデザイン情報を参照できるようになる。トークンが生成されたら、それを必ずコピーして控えておく必要がある。なぜなら、この段階を過ぎると二度と表示されず、再度コピーすることはできないため、失念するとまた生成し直さなければならないからである。

次に、生成したFigmaのアクセストークンを使って、Kiro IDE側でMCPの設定を行う。Kiro IDEを開き、設定画面にアクセスする。設定画面内で「MCP」と検索すると、「Workspace MCP configuration」（ワークスペースMCP設定）または「User MCP configuration」（ユーザーMCP設定）のいずれかが表示される。ワークスペースMCP設定は、現在開いている特定のプロジェクト（ワークスペース）だけに適用される設定であり、ユーザーMCP設定はKiro IDE全体、つまりどのプロジェクトでも適用される設定である。どちらか適切な方を選択し、その設定ファイルに以下のJSON形式のコードを貼り付ける。

このJSONコードは、Kiro IDEがFigma MCPを実行するための具体的な指示を定義している。 "mcpServers"という項目は、複数のMCPサーバー設定をまとめるためのものだ。その中に"figma"という名前で、Figma MCPのための具体的な設定が記述されている。 "command": "npx"は、Node.jsのパッケージを実行する際に使用するnpxというコマンドをKiro IDEに指示している。npxは、プロジェクトにインストールされていないNode.jsパッケージでも一時的に実行できる便利なツールである。 "args"には、npxコマンドに渡す引数が配列形式で指定されている。 "-y"は、パッケージのインストール確認などのプロンプトに対して自動的に「はい」と答えるオプションである。 "figma-developer-mcp"は、FigmaとLLMの間でデータを受け渡しする役割を果たす、実際のFigma MCPツールの名前である。 "--figma-api-key=your_figma_api_key"は、FigmaのAPI（アプリケーションプログラミングインターフェース）にアクセスするために必要なキーを指定する部分である。ここで先ほどFigmaで生成し、コピーしておいたパーソナルアクセストークンを、"your_figma_api_key"の部分に正確に置き換える必要がある。このキーがあることで、Figma MCPツールはFigmaのデザインデータに安全にアクセスできる。 "--stdio"は、標準入出力（Standard Input/Output）を通じてKiro IDEとFigma MCPツールが通信することを指定するオプションである。 "disabled": falseは、このFigma MCPの設定が有効であることを示している。trueにすると無効になる。 "autoApprove"は、特定の操作を自動的に承認するための設定で、["get_figma_data", "download_figma_images"]と記述することで、Figmaからデザインデータを取得したり、画像をダウンロードしたりする際に、ユーザーが毎回承認することなく自動で実行されるようになる。これにより、作業の中断が減り、効率が向上する。 このJSONコードを貼り付けたら、"your_figma_api_key"の部分を忘れずに実際のトークンに置き換え、設定を保存する。これでKiro IDEとFigma MCPの接続設定は完了である。

設定が完了したら、実際にFigma MCPをKiro IDEで活用できる。その利用方法は非常にシンプルである。Kiro IDE内で、連携したいFigmaのデザインファイルを開く。次に、そのデザインファイルの中で、コードとして生成したい特定のUIコンポーネント、例えばボタンや入力フォーム、カードデザインなどを選択する。選択したコンポーネントの上で右クリックし、「Copy link to selection」（選択範囲へのリンクをコピー）を選択する。これで、その特定のコンポーネントを指し示すURLがクリップボードにコピーされる。コピーしたリンクをKiro IDEのチャット機能に貼り付ける。そして、そのリンクに対してLLMに指示を出すプロンプト（指示文）を記述する。例えば、「このボタンのデザインに対応するReactコンポーネントのコードを生成してください」といった具体的な指示を出す。LLMはこのリンクを通じてFigmaの特定のコンポーネントを正確に認識し、そのデザインに基づいたコードを提案したり、デザインの変更点を分析して修正案を提示したりすることが可能になる。これにより、デザイナーが作ったデザインの意図が開発者に正確に伝わるだけでなく、LLMにも正確に伝わり、コード生成の精度と開発効率が飛躍的に向上する。

ただし、このFigma MCPを利用するには、Figmaの有料プランに加入している必要がある点には注意が必要だ。この連携機能は、現代のフロントエンド開発におけるデザインとコードのギャップを埋め、LLMを活用した次世代の開発ワークフローを実現する強力な手段となる。デザインからコードへのスムーズな変換は、開発のスピードと品質を高め、より迅速なイノベーションを可能にするだろう。