Figma検索アプリをがClaude Codeで作った話

課題：Figmaファイルが多すぎて見つからない

日々増えていくFigmaファイル。プロジェクトもファイルも数百件規模になると、「あのデザイン、どこだっけ？」という問いに、毎回Figmaのサイドバーをスクロールして探すのは時間コストがかかり過ぎていました。

WordPress で管理していたポートフォリオサイトもありましたが、検索性が低く、更新も面倒。もっと速く、直感的にファイルを探せる仕組みがほしい。

そこで、Claude Code に相談しました。

「検索アプリを作りたい」から始まった

「Figmaのファイルを検索できるWebアプリがあったら助かるのに」—— 率直に思ったことです。Claude Code が提案してくれた構成は、Vite + React + TypeScript。正直、React という名前は聞いたことがある程度で、自分で書いたことは一度もありませんでした。

でも、やってみることにしました。

データをどう集めるか

アプリを作るには、まずFigmaのファイル情報が必要です。Claude Code が Figma API を使った同期スクリプトを書いてくれました。

Figma API でプロジェクト一覧を取得し、各プロジェクトのファイル情報をJSON形式で保存する仕組みです。さらに、WordPress のポートフォリオサイトにあったリッチな説明文や画像も REST API 経由で取得して統合。2つのデータソースをマージすることで、Figma の構造データと WordPress の説明文が1つのJSONに統合されました。

つまずいたこと

Figma API のレート制限

73プロジェクトの情報を一気に取得しようとしたら、API のレート制限（429エラー）に引っかかりました。リクエスト間隔を 350ms → 700ms → 1000ms と段階的に広げて、5回の同期実行でようやく全データを取得できました。

トークンの権限不足

最初に発行した Figma トークンは、一部の権限しか付与していませんでした。チーム情報を取得する API が 403 エラーを返し、原因がわからずしばらく悩みました。全スコープにチェックを入れて再発行したら解決。

リッチコンテンツの消失事故

「データを最新に更新しよう」と思って全データを再構築したら、WordPress 側の説明文がすべて消えてしまいました。Figma API だけで再構築したので、WordPress のデータが上書きされたのです。バックアップから復元し、以降は WordPress API との同期スクリプトを別に作って、2段階で同期する仕組みに変更しました。

日本語URLの罠

WordPressの投稿スラッグに日本語が含まれていて、URLエンコードされた文字列（%e3%82%...）と日本語が混在。約300件中250件でスラッグの不一致が起きて、詳細ページが「ファイルが見つかりません」になりました。全スラッグをデコードして正規化することで解決。

できあがったもの

最終的に、こんなアプリになりました。

• 即座に検索 — キーワードでファイル名・プロジェクト名を絞り込み
• カテゴリフィルター — クライアント・種別でワンクリック絞り込み
• 詳細ページ — サムネイル、説明文、チームメンバー、更新履歴をまとめて表示
• Figmaリンク — ワンクリックで該当ファイルをFigmaで開ける

数百件のファイルが一瞬で検索できるようになりました。

振り返り

Reactもフックもルーティングも、自分では一行も書いていません。やったのは、「こういう画面にしたい」「この色に変えて」「検索はこう動いてほしい」と伝えること。Claude Code がコードを書き、自分はブラウザで確認してフィードバックを返す。

「コードを書かずにアプリを作った」というと少し語弊がありますが、設計とフィードバックのループを回すことで、想像以上のものが形になりました。