Figma AI（Figma Make）で作成したプロトタイプをRovo Dev CLIに手伝ってもらいながらGoogle Apps Script（GAS）にデプロイしてみた

何でやろうと思ったか

りっくまは社内アジャイル推進活動をしています。りっくまの会社では、社内からの「ITでこんなことを実現したい」という要望を Jira Product Discoveryにまとめています。リックソフトも似たような使い方しているクマね。　

▶ 社内の業務効率化を目指した AI活用ユースケース記事

研修を終えた新卒エンジニアに開発してもらうネタを探すのが楽になる！リックソフトの Jira Product Discoveryユースケース

要望リストの
「Gmail、Slack、Jira、Googleカレンダー、Teamsなど、日々のタスクや通知を一元管理できるダッシュボードが欲しい！」
というリクエストに対応するために着手しました。

とはいえ社内メンバーにいちからヒアリングをするのは単純な何もない状態での口頭や文章だけのインタビューやアンケートはコミュニケーションコストがかかるので、まずは「簡単なプロトタイプ作成して、インタビューやアンケートのインサイトデータを得たい」という声がチームから出ました。

そこで最近話題の生成AIコーディング （Figma Make/Figma AI、 Rovo Dev CLI）を使って、
「タスク管理画面」を作ってみました。

タスク管理画面の画面イメージ

Figma Makeから GASまでの道のり

1. Figma Make

Figma Makeを使って、左側チャットで指示をしながらプロトタイプを作成します。

「コードをダウンロード」でフォイルをローカルに落とします。

※Figma Make自体の解説や使い方は省きます

※2025年7月中旬時点では、Figma Makeは beta版で Reactベース（Next.jsっぽい構成）で書かれており、他の Figmaツールと連携できるとされています。そのままではローカルで動かせないので、ダウンロードしたファイルを RovoDev CLIでコードを書き換えてもらいます。

2. RovoDev CLI

コードの書き換えは Claude Codeや Gemini CLIでも可能ですが、今回は RovoDev CLIを使用します。

Geminiなどのチャットでコードを貼ってやり取りもできますが、全体のコードを見ながら反復してもらうのであればIDEなどで対話するものが良いです。

RovoDev CLIのインストール

1. まずは ACLIをインストールする（すでにACLIがインストールされている場合はバージョンに更新）今回は Windows版を利用します。
2. Atlassianプロファイル に移動し、APIトークンを作成を選択してスコープのない APIトークンを作成
3. ターミナルで、Atlassianアカウントで認証するために、次のコマンドを実行：

   acli rovodev auth login

4. インタラクティブモード（IM）でRovo Devを開くために、このコマンドを実行します：

   acli rovodev run

5. Vite 環境に書き直し
   次世代の Web アプリケーションを支える超高速フロントエンドビルドツールの「Vite」の環境に書き直しました。
   ＜Figma Makeからダウンロードしたコード解凍、Vite 環境に移植＞
   まずは localhostで Figma Makeで動いていたものが表示されるのを目指します。
   指示としては「このコードをローカル環境で動かしたい」的なことを投げて対話しながらエラーを解消していきました。コードを解析してViteを提案してくれて pakege.jsonなどを書いてもらいました。
   特に Figma Makeで落としたファイルはインポート文に @version など内部で使われるような特殊な記述されていたり、Nextjsで扱われるようなコードを自分の手書きなおすのは無理だったので大変有難く思います。
   localhostで動くようになったら、それを社内の環境で共有できるようにします。
6. 今回はホスト先として GASを選定し、さらに簡単に GASで展開しやすいように html一枚にまとめる形にするためのビルドを目指します。
   自分の権限は社内環境で公開するにはモノが限られており、Google Workspaceの環境で利用できるGAS（Google Apps Script）を利用するにしました。通常は jsファイルで書くものですが、今回は簡単なデモアプリを単純に公開するためなので distで吐き出した静的ファイルをまとめて index.htmlで出力させました。
   「vite-plugin-singlefile」プラグインや single HTMLなどの単語で RovoDev CLIに頼めば頑張ってくれます。作成された htmlファイルを開いて Figma Make/localhostと同様に動く htmlを確認します。

3. GASへのデプロイ

• App Scriptでプロジェクト作成
  

  

• 動作するhtmlをファイルに追加
  ◦ ※GeminiのCanvasでインタラクティブで出力したHTMLも同様に貼ればGASで社内共有が可能です
• コード.gs を全て消して、 doGet()関数とHtmlService Class のcreateHtmlOutputFromFileメソッドを使って、index.htmlを読み込ませて「デプロイ」を押してデプロイします。
  

  

やってみた感想

Figma Make は、プロトタイピングのスピード感が抜群でした。今後は MCP連携など、さらに自動化・効率化を進めていきたいと思います。

今後は MCP連携など、さらに自動化・効率化を進めていきたいと思います。