Communitygithub.com

Figma ドラフト整理ツール

Figma チーム内のすべてのドラフトファイルを自律的に整理します。各ファイルの実際のコンテンツ(古い名前ではなく)を検査し、英語の説明的な名前を付け、一致する番号付きカテゴリプロジェクトに移動します。Figma の内部 API を使用するため、マウス自動化は不要です。

Figma ドラフト整理ツール とは?

このスキルは、Figma チームの「ドラフト」フォルダを完全に空にするための実績ある自律的な方法です。各ファイルの実際のフレーム内テキストを Figma 内部 API 経由で読み取り、そのコンテンツに基づいて新しい名前とカテゴリを決定し、リネームと移動を 1 つの API リクエストで実行します。マウス操作に依存する古い方法は遅くて不安定でしたが、このスキルは内部 API を使用することで高速かつ確実に動作します。デフォルトの動作モードは完全自律型で、ユーザーに承認を求めずにファイルを 1 つずつ処理し、結果を報告します。Figma の公開 REST API ではドラフト一覧の取得やファイルの移動ができないため、このスキルは Chrome の JavaScript ツールを介して Figma の内部 Web API を直接呼び出します。ユーザーは事前に Figma の個人アクセストークン(読み取り専用)とチーム ID を設定する必要があります。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ahmeduxui/figma-drafts-organizer/tree/main/figma-drafts-organizer

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Figma ドラフト整理ツール(自律型、内部 API)

このスキルは、Figma チームの ドラフト フォルダを空にするための、実績のある信頼性の高い方法を実装したものです。すべてのファイルを分類し、適切な番号付きカテゴリプロジェクトにファイリングします。すべての処理は、Chrome 上の Claude の javascript_tool を介して Figma の 内部 API を通じて行われます。ファイルカードのクリック、移動ダイアログ、名前変更フィールドの操作は一切不要です。マウス駆動のアプローチは遅くて不安定でしたが、内部 API は移動と名前変更を 1 つのリクエストで実行し、スタックすることはありません。

良い結果を得るための核となる考え方は、ファイルのコンテンツが真実の源であり、古い名前は決して信頼しない ということです。古いドラフト名は、しばしば間違っていたり、一般的すぎたり、コピーされたりしています。そのため、各ファイルについて、フレーム内の実際のテキストを読み取り、そこから名前とカテゴリを決定し、名前を変更してから移動します。

動作モード

デフォルトは 完全自律型 です。ドラフトフォルダ内のファイルを1つずつ順番に処理し、ファイルごとに即座に名前を変更して移動します。ファイル間で承認を求めることはありません。ファイルごとに短い結果を報告します。コンテンツから解決できないほど明確に曖昧な場合(まれ)、または API 呼び出しが繰り返し失敗した場合にのみ、ユーザーに確認を求めます。

ユーザーが明示的にプレビュー/承認パスを要求した場合は、比較表(現在の名前 → 提案された名前 + カテゴリ)を表示して待機します。ただし、これは例外であり、デフォルトではありません。

5 つのステップ(ファイルごと — これらを再利用し、新しいステップを発明しないでください)

各 ドラフトファイルに対して、以下の 5 つのステップをこの順序で正確に実行します。

  1. ファイルキーを取得する — ドラフトリスト(再取得したリストのインデックス 0)から取得します。
  2. 実際のコンテンツを検査する — REST API を介してフレーム内の実際のテキストを読み取ります。古い名前を信頼してはいけません。
  3. 新しい名前 + カテゴリを決定する — 両方ともコンテンツから導き出します。 名前のパターン: <Subject> - <Key features> Dashboard(デザインの言語に関係なく英語)。
  4. 宛先プロジェクトを特定する — 一致する番号付きカテゴリプロジェクトを見つけます。存在しない場合は作成します(シーケンスの次の番号)。
  5. 名前を変更して移動する — 両方を実行する 1 つの内部 API PUT。HTTP 200 を期待します。

その後、ドラフトリストを再取得し、ドラフトフォルダが空になるまでステップ 1 から繰り返します。リストはファイルが移動するたびに並び替えられるため、毎回 インデックス 0 を取得するために、毎回リストを再取得します。


セットアップ(セッションごとに 1 回)

  1. Chrome タブがチームのドラフトページ(例: https://www.figma.com/files/team/{TEAM_ID}/drafts)で開いており、その tabId を取得していることを確認します。ユーザーはその Chrome プロファイルで Figma にサインインしている必要があります。

  2. ユーザーの値を収集します。まだ不明な場合は、一度だけ尋ねます。

    • FIGMA_TOKEN — 読み取り専用 のファイルアクセス権を持つ Figma の個人アクセストークン(Figma → 設定 → セキュリティ → 個人アクセストークン → スコープ "File content: Read only")。ファイルコンテンツの読み取りにのみ使用します。
    • TEAM_ID — ドラフトページの URL で /team/ の後の数字。

    これらを scripts/helpers.js の CONFIG ブロックに配置するか、貼り付ける前に window.__FIGMA_TOKEN と window.__TEAM_ID を設定します。トークンを共有またはコミットされるファイルに書き込まないでください。

  3. ヘルパーブロックを 1 回貼り付けます(scripts/helpers.js を参照)。これにより、findDraftsFolder、inspect、moveFile、loadFolders、loadDrafts が window 上に定義されます。すべての JS は、Figma タブ上で Chrome 上の Claude の javascript_tool を使用して実行します。

  4. ドラフトフォルダ ID を見つけます(ドラフトページがロードを完了している必要があります)。

    window.findDraftsFolder()   // → "drafts=<id>"
    

    もし NOT_FOUND を返した場合は、ドラフトページをリロードし、待ってからヘルパーを再貼り付け、再試行します。

  5. カテゴリプロジェクトをロードして、名前の変更や移動でそれらを見つけられるようにします。

    window.loadFolders()   // window.__folders = { "<name>": id, ... } を設定
    

ヘルパーは通常のアプリ内(SPA)ナビゲーションでは維持されますが、プロジェクト作成ページはハードリロードを実行し、ヘルパーを消去します。 新しいプロジェクトを作成した後は、ヘルパーブロックを再貼り付けし、loadFolders() を再実行してから続行します。トークン、チーム ID、ドラフトフォルダ ID はメモに残しておき、リロード後に復元できるようにします。

カテゴリプロジェクトが存在しないチームでの初回実行

チームに番号付きプロジェクトがまだない場合、最初のファイルがそれぞれカテゴリ(01 - ...、02 - ...)を作成します。これは想定内です。references/categories.md には、UI/ダッシュボード作業に適したカテゴリのスターターリストが含まれています。これは、すでに存在する必要のあるリストではなく、命名ガイドとして使用します。

ライブのカテゴリリストは、loadFolders() 実行後の window.__folders です。references/categories.md はスターターリスト兼命名ガイドです。これを読んで、新しいカテゴリの一貫性を保ち、次の空き番号を見つけてください。


ステップ 1 と 2 — 次のファイルを取得し、そのコンテンツを検査する

ドラフトリストを取得し、インデックス 0 を取得して、コンテンツ検査を開始します。

window.loadDrafts().then(n=>{
  window.__last="CLEARED"; window.__ir="";
  const d=window.__drafts[0]; window.__cur=d; window.__cn=d?d.name:null;
  if(d){ window.inspect(d.key).then(r=>window.__ir=r).catch(e=>window.__ir="ERR:"+e); }
  return "n="+n+(d?(" first="+String(d.name).replace(/[^A-Za-z0-9 ]/g,"")+" key="+d.key):" EMPTY");
})

n=0 EMPTY はドラフトフォルダが空であることを意味します。これで完了です。

window.inspect は各ページの最初のいくつかのフレームをウォークスルーし、短いテキスト文字列を収集します。実行後、約 8 秒待ってから、クリーンアップされた単語リストを読み取ります(以下の無視リストを参照 — このフィルターはテンプレートの定型文を除外します)。

new Promise(res=>setTimeout(()=>res(
  [...new Set((window.__last.match(/[A-Za-z]{4,}/g)||[]))]
    .filter(w=>!/http|www|figma|preview|envato|MirNFT|Explore|creators|rankings|Auctions|Solid|Melt|Flare|Mare|Fusion|Soul/i.test(w))
    .slice(0,40).join(" ")
), 8000))

遅延には、別の待機ツールではなく、上記の JS setTimeout プロミスを使用します。これにより、すべてがブラウザタブ内に収まります。

結果がまばらであるか、定型文が大半を占める場合、より深い全文ドキュメントウォーク(深さ 12)にエスカレーションします — scripts/deep_walk.js を参照してください。分類するにはコンテンツが薄すぎる場合、最後の手段としてファイルの古い名前にフォールバックします。

分類時に無視すべき定型文

多くのドラフトは、装飾的なサムネイルを共有する購入済みテンプレートです。メインの命名されたダッシュボードフレーム で分類し、以下は無視します。

  • NFT プレビューサムネイル(MirNFT / preview envato / Explore / Auctions / CryptoPunks / WonderPals / Azuki / Doodles / Decentraland / Sandbox など)
  • 音楽プレビューサムネイル、FastEat フードプレビュー
  • 非医療ファイル内に表示される、一般的な医療テンプレートのサイドバー(Message / Test / Payment / Appointment / Settings / Help / Medicine / Order / "Welcome Alexa June")

ステップ 3 — コンテンツから名前とカテゴリを決定する

名前は <Subject> - <Key features> Dashboard の形式で、英語で作成します。実際の実行例:

  • 暗号ウォレット + 取引所 + 分析 → Crypto Trading Platform - Wallet & Exchange Dashboard → カテゴリ 07 - Crypto
  • オンラインコース、学生、講師、分析 → Online Courses - Students & Performance Dashboard → 05 - LMS
  • メッセージ/グループ付きチャットアプリ → Chat App - Messages & Groups Dashboard → 36 - Chat & Messaging
  • カロリー/トレーニングトラッカー → Health Tracker - Calories & Training Dashboard → 14 - Medical & Health

カテゴリは、コンテンツのシグナルを references/categories.md の番号付きプロジェクトリストに照らし合わせて選択します。


ステップ 4 — 宛先プロジェクトを特定する(または作成する)

window.__folders でカテゴリ名を検索します。ほとんどのフォルダキーには末尾に Dashboard が付いています(例: 02 - Finance & Insurance Dashboard)。一部には付いていません(04 - UI Components、37 - Agency & Portfolio Website、47 - Pitch Deck & Presentation、48 - UX Case Study)。正確なキーを使用します。

一致するカテゴリプロジェクトが存在しない場合は作成します(これは想定内であり許可されています — 確認を求めて停止しないでください)。内部 API はプロジェクトを作成できないため、Figma UI を使用します。

  1. https://www.figma.com/files/team/{TEAM_ID}/all-projects に移動します。
  2. + Project(右上)をクリックします。座標は画面によって異なります。スクリーンショットを撮るか、find を使用して各コントロールを特定します。
  3. 待機し、名前フィールドをクリックし、新しい番号付き名前を入力します(references/categories.md の次の空き番号、他のものと同じスタイル、例: 49 - Crowdfunding & Fundraising Dashboard)。
  4. Continue をクリックします。
  5. ステップ 2 "Add people" で、誰も追加せずに Create project をクリックします。共有や権限を決して変更しないでください。
  6. ページが新しいプロジェクトにハードリロードされます → ヘルパーを再貼り付け、loadFolders() を再実行します。

その後、移動に進みます。


ステップ 5 — 名前変更と移動を 1 回の呼び出しで行う

window.moveFile(window.__cur.key, "<CATEGORY FOLDER KEY>", "<NEW NAME>").then(r=>"mv="+r)

mv=S200 は成功を意味します(名前変更と移動が同時に行われました)。それ以外の場合は、Cookie/CSRF を再読み込みし、フォルダキーが window.__folders に存在することを確認し、再試行します。

ステップ 1 にループバックします。


厳格なルール(これらはユーザーを保護します — 従ってください)

  • コンテンツが基準であり、古い名前は決して基準にしないでください。 名前を付ける前に常に検査します。
  • デフォルトで自律的 — ファイル間で許可プロンプトを表示しません。結果を報告するだけです。
  • 英語の名前、パターン <Subject> - <Key features> Dashboard。
  • カテゴリがない場合は作成し、シーケンスの次の番号を使用します。番号を再利用しないでください。
  • 何も削除しないでください — ファイルをゴミ箱に移動したり、削除によってドラフトを空にしたりしないでください。ファイルは移動のみ行います。
  • 共有や権限を決して変更しないでください — プロジェクトを作成するときは、人を追加せずに "Create project" をクリックします。
  • 一度に 1 つのファイル、常に再取得してインデックス 0 を取得します(リストは並び替えられます)。
  • プロジェクト作成のハードリロード後は、ヘルパーを再貼り付けます。
  • すべての Figma API 呼び出しには Chrome JS を使用します。bash/WebFetch は使用しないでください(プロキシによってブロックされます)。

機能しないもの(時間を無駄にしないでください)

  • PUT /v1/files/{key}(公開 REST)→ 404。内部 PUT /api/files/{key}(moveFile 内)を使用します。
  • 公開 REST にはドラフト一覧エンドポイントがありません → 内部 /api/folders/{id}/paginated_files(loadDrafts 内)を使用します。
  • API を介したプロジェクトの作成 → サポートされていません。上記の UI フローを使用します。
  • 別の待機ツール → ここでは信頼性が低いため、JS setTimeout プロミスを使用します。
  • 22 文字のファイルキーを 1 つの生の文字列として読み取ることは、base64 としてブロックされる可能性があります。ヘルパーは安全にキーを返します。

参考ファイル

  • references/categories.md — スターターの番号付きカテゴリリスト、末尾に Dashboard が付かないキー、および次の空き番号を見つける方法。
  • scripts/helpers.js — セッションごとに 1 回貼り付けるヘルパーブロック(findDraftsFolder / inspect / moveFile / loadFolders / loadDrafts)。CONFIG ブロックと CSRF 処理を含みます。
  • scripts/deep_walk.js — コンテンツがまばら/定型文が多いファイル用の深さ 12 の全文ドキュメントウォーク。

内部 API に関する注意

名前変更 + 移動とドラフト一覧は、文書化された公開 REST API ではなく、Figma の 内部 Web API(Figma Web アプリが呼び出すのと同じエンドポイント)を使用します。これは非公開であり、予告なく変更される可能性があります。以前は機能していた呼び出しが失敗し始めた場合、エンドポイントが変更された可能性があります。このスキルはご自身の判断で、Figma の利用規約に従って使用してください。

関連スキル