RovoDevCLI で MCP設定して FigmaMCPと繋げてみた話

2025年10月30日

りっくま Rickma

※この内容は各種 Beta版ということもあり、検証や実験的な内容になりますのでご留意ください。

1. はじめに.

りっくま

ブログ記事　Figma AI（Figma Make）で作成したプロトタイプをRovo Dev CLIに手伝ってもらいながらGoogle Apps Script（GAS）にデプロイしてみた　をシェアしたりっくまです。前回はFigma Makeで作成した UIプロトタイプをローカルにダウンロードして、RovoDevCLIを使ってローカル環境で動くようにしたりっくまです。詳細は↓の記事を読んでほしいクマ。

今回は、社内の情報連携をもっと自動化・効率化したいので、MCPで Confluence、Jira、Figmaと連携 を試していきたいと思って検証してみたクマ。

2. Figma MCP

2-0. 前提:

有料プランで Figma デスクトップアプリ
Figmaのデザインはレイヤー化されている

Figmaドキュメント: から、以下のことがわかっています。

MCPサーバーが有効になると、以下が可能になります。

選択したフレームからコードを生成する
Figmaのフレームを選択してコードに変換します。新しいフローを作成したり、アプリの機能を改良したりするプロダクトチームに最適です。
デザインの背景を抽出する
変数、コンポーネント、レイアウトデータを IDEに直接取り込みます。デザインシステムやコンポーネントベースのワークフローで特に役立ちます。
Code Connectを使ってよりスマートにコードを書く
実際のコンポーネントを再利用して出力品質を向上させます。Code Connectは、生成されたコードとコードベースの整合性を維持します。

2-1. MCPサーバーを有効にする

Figmaで適当なデザインを準備し、左上のメニューから基本設定>ローカルMCPサーバーの有効化を押します。
すると、http://127.0.0.1:3845/mcp が立ちあがります。

2-2. MCPクライアントをセットアップする

今回は RovodevCLIがクライアント、https://www.npmjs.com/package/mcp-remote を使用してみます。

$ npm install -g mcp-remote
$ npx -y mcp-remote http://127.0.0.1:3845/mcp //疎通確認

~/.rovodev/mcp.json に以下を記載

{
  "mcpServers": {
    "figma-dev-mode-proxied": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "http://127.0.0.1:3845/mcp"
      ]
    }
  }
}

※ Framelink Figma MCPサーバーという OSSのものもあります。こちらは API Keyを設定して stgio接続

"Framelink Figma MCP": {
     "command": "npx",
     "args": [
          "-y", 
          "figma-developer-mcp", 
          "--figma-api-key=", 
          "--stdio"
     ]
}

2-3. Designのレイヤーでコピー/貼り付けオプション > 選択範囲へのリンクをコピー

3.Rovo Dev CLIと Figma MCP

Rovo Dev CLIで GPT-5が選択できるようになっていたので /models で GPT-5を選択してみる

Rovo Dev CLIを立ち上げたら、~/.rovodev/mcp.json で追記した MCP Serverの確認をされました

3-1. Rovo Dev CLIのMCPを確認する

/mcpコマンドで一覧が表示されます。
code-nautilusとatlassian-mcpはデフォルトであります。figma-dev-mode-proxiedは ~/.rovodev/mcp.json で設定したものです。

code-nautilus   stdio    ◎ connected
figma-dev-mode-proxied    stdio     ◎ connected
atlassian-mcp   http  ◎ connected

figma-dev-mode-proxiedのEnterで選択していくと設定が見れます。

※ツールと使用法については figmaのドキュメントを参照してください

3-2. Rovo Dev CLIからFigma のデザインにアクセスできるかを確認する

Figmaデザインでコピーしたリンクを渡して、情報を読み込めるかを検証

https://www.figma.com/design/eEzAM3Tnr4wHvEF4DBBBbA/MCP%E6%8E%A5%E7%B6%9A%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=2-21&t=dTMFt1OCtkfd7wFB-4
のデザインを確認