Figma Drafts Organizer (Autonome, API Interne)

Cette compétence capture une méthode éprouvée et fiable pour vider le dossier Drafts d'une équipe Figma en classant chaque fichier et en le déposant dans le projet de catégorie numéroté approprié. Elle utilise l'API interne de Figma via l'outil javascript_tool de Claude in Chrome — pas de clic sur les cartes de fichier, pas de boîte de dialogue Déplacer, pas de manipulation du champ de renommage. Cette approche basée sur la souris était lente et fragile ; l'API interne effectue le déplacement et le renommage en une seule requête et ne reste jamais bloquée.

L'idée centrale qui garantit de bons résultats : le contenu du fichier est la source de vérité, jamais son ancien nom. Les anciens noms de brouillons sont souvent erronés, génériques ou copiés. Ainsi, pour chaque fichier, nous lisons le texte réel dans ses frames, décidons d'un nom et d'une catégorie à partir de ce contenu, puis renommons et déplaçons.

Mode de fonctionnement

Par défaut, le mode est entièrement autonome : parcourir le dossier Drafts un fichier à la fois, dans l'ordre, renommer et déplacer chaque fichier immédiatement sans faire de pause pour approbation entre les fichiers. Signaler un résultat court par fichier. Ne s'arrêter pour demander à l'utilisateur que si quelque chose est vraiment ambigu d'une manière que vous ne pouvez pas résoudre à partir du contenu (rare) ou si un appel API échoue de manière répétée.

Si l'utilisateur demande explicitement un passage de prévisualisation/approbation, afficher un tableau comparatif (nom actuel → nom suggéré + catégorie) et attendre — mais c'est l'exception, pas le comportement par défaut.

Les cinq étapes (par fichier — réutilisez-les, n'en inventez pas de nouvelles)

Pour chaque fichier brouillon, faites exactement ces cinq choses, dans cet ordre :

Capturer la clé du fichier — depuis la liste des brouillons (index 0 de la liste récupérée à nouveau).
Inspecter le contenu réel — lire le texte réel dans les frames via l'API REST. Ne PAS faire confiance à l'ancien nom.
Déterminer un nouveau nom + une catégorie — tous deux dérivés du contenu. Modèle de nom : <Sujet> - <Fonctionnalités clés> Dashboard (en anglais, quelle que soit la langue du design).
Résoudre le projet de destination — trouver le projet de catégorie numéroté correspondant ; si aucun n'existe, en créer un (numéro suivant dans la séquence).
Renommer + déplacer — un seul PUT de l'API interne qui fait les deux. Attendre un HTTP 200.

Ensuite, récupérer à nouveau la liste des brouillons et répéter depuis l'étape 1 jusqu'à ce que le dossier Drafts soit vide. Récupérer à chaque itération car la liste se réorganise à mesure que les fichiers la quittent, donc prenez toujours l'index 0.

Configuration (une fois par session)

Assurez-vous qu'un onglet Chrome est ouvert sur la page Drafts de l'équipe, par ex. https://www.figma.com/files/team/{TEAM_ID}/drafts, et que vous avez son tabId. L'utilisateur doit être connecté à Figma dans ce profil Chrome.
Recueillez les valeurs de l'utilisateur. Demandez une fois si elles ne sont pas déjà connues :
- FIGMA_TOKEN — un jeton d'accès personnel Figma avec accès lecture seule aux fichiers (Figma → Paramètres → Sécurité → Jetons d'accès personnels → portée « File content: Read only »). Utilisé uniquement pour lire le contenu des fichiers.
- TEAM_ID — le nombre après /team/ dans l'URL de la page Drafts.
Placez-les dans le bloc CONFIG de scripts/helpers.js (ou définissez window.__FIGMA_TOKEN et window.__TEAM_ID avant de coller). N'écrivez jamais le jeton dans un fichier qui sera partagé ou commité.
Collez le bloc d'assistance une fois (voir scripts/helpers.js). Il définit findDraftsFolder, inspect, moveFile, loadFolders, loadDrafts sur window. Exécutez tout le JS via l'outil javascript_tool de Claude in Chrome sur l'onglet Figma.
Trouvez l'ID du dossier Drafts (la page Drafts doit avoir fini de charger) :
```
window.findDraftsFolder()   // → "drafts=<id>"
```
Si elle retourne NOT_FOUND, rechargez la page Drafts, attendez, recollez les assistances et réessayez.
Chargez les projets de catégorie afin que les renommages/déplacements puissent les trouver :
```
window.loadFolders()   // peuple window.__folders = { "<nom>": id, ... }
```

Les assistances survivent à la navigation normale dans l'application (SPA), mais une page de création de projet effectue un rechargement complet et les EFFACE. Après avoir créé un nouveau projet, recollez le bloc d'assistance et réexécutez loadFolders() avant de continuer. Gardez le jeton, l'ID d'équipe et l'ID du dossier Drafts dans vos notes afin de pouvoir les restaurer après le rechargement.

Première exécution sur une équipe sans projets de catégorie

Si l'équipe n'a pas encore de projets numérotés, les premiers fichiers créeront chacun une catégorie (01 - ..., 02 - ...). C'est normal. references/categories.md contient une liste de démarrage des catégories qui fonctionne bien pour le travail UI/dashboard ; utilisez-la comme guide de nommage, pas comme une liste qui doit déjà exister.

La liste des catégories en direct est window.__folders après loadFolders(). references/categories.md est une liste de démarrage et un guide de nommage ; lisez-la pour maintenir la cohérence des nouvelles catégories et trouver le prochain numéro libre.

Étape 1–2 — Récupérer le fichier suivant et inspecter son contenu

Récupérez la liste des brouillons, prenez l'index 0, et lancez l'inspection du contenu :

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 signifie que le dossier Drafts est vide — vous avez terminé.

window.inspect parcourt les premières frames de chaque page et collecte de courtes chaînes de texte. Après l'avoir lancé, attendez ~8 secondes, puis lisez la liste de mots nettoyée (ce filtre supprime le texte passe-partout des modèles — voir la liste d'ignorés ci-dessous) :

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))

Utilisez la promesse setTimeout JS ci-dessus pour le délai plutôt qu'un outil d'attente séparé — cela garde tout dans l'onglet du navigateur.

Si le résultat est épars ou dominé par du texte passe-partout, passez à une exploration plus profonde du document complet (profondeur 12) — voir scripts/deep_walk.js. Si le contenu est encore trop mince pour être classifié, utilisez l'ancien nom du fichier en dernier recours.

Texte passe-partout à IGNORER lors de la classification

De nombreux brouillons sont des modèles achetés qui partagent des miniatures décoratives. Classez par la frame de tableau de bord nommée principale, pas par celles-ci :

Miniatures de prévisualisation NFT (MirNFT / preview envato / Explore / Auctions / CryptoPunks / WonderPals / Azuki / Doodles / Decentraland / Sandbox / etc.)
Miniatures de prévisualisation musicale, prévisualisations FastEat
La barre latérale générique du modèle médical (Message / Test / Payment / Appointment / Settings / Help / Medicine / Order / "Welcome Alexa June") lorsqu'elle apparaît dans un fichier non médical

Étape 3 — Décider du nom + catégorie à partir du contenu

Construisez le nom comme <Sujet> - <Fonctionnalités clés> Dashboard, en anglais. Exemples tirés d'exécutions réelles :

Crypto wallet + exchange + analytics → Crypto Trading Platform - Wallet & Exchange Dashboard → catégorie 07 - Crypto
Online courses, students, lecturer, analytics → Online Courses - Students & Performance Dashboard → 05 - LMS
Chat app with messages/groups → Chat App - Messages & Groups Dashboard → 36 - Chat & Messaging
Calorie/training tracker → Health Tracker - Calories & Training Dashboard → 14 - Medical & Health

Choisissez la catégorie en faisant correspondre les signaux du contenu avec la liste des projets numérotés dans references/categories.md.

Étape 4 — Résoudre (ou créer) le projet de destination

Cherchez le nom de la catégorie dans window.__folders. La plupart des clés de dossier portent un Dashboard final (par ex. 02 - Finance & Insurance Dashboard) ; quelques-unes non (04 - UI Components, 37 - Agency & Portfolio Website, 47 - Pitch Deck & Presentation, 48 - UX Case Study). Utilisez la clé exacte.

Si aucun projet de catégorie correspondant n'existe, créez-en un (c'est prévu et autorisé — ne vous arrêtez pas pour demander). L'API interne ne peut pas créer de projets, utilisez donc l'interface Figma :

Naviguez vers https://www.figma.com/files/team/{TEAM_ID}/all-projects.
Cliquez sur + Project (en haut à droite). Les coordonnées varient selon l'écran — prenez une capture d'écran ou utilisez find pour localiser chaque contrôle.
Attendez, cliquez sur le champ Nom, tapez le nouveau nom numéroté (prochain numéro libre depuis references/categories.md, même style que les autres, par ex. 49 - Crowdfunding & Fundraising Dashboard).
Cliquez sur Continue.
À l'étape 2 "Add people", cliquez sur Create project SANS ajouter personne — ne modifiez jamais le partage/les autorisations.
La page se recharge complètement dans le nouveau projet → recollez les assistances et réexécutez loadFolders().

Puis passez au déplacement.

Étape 5 — Renommer + déplacer en un seul appel

window.moveFile(window.__cur.key, "<CLÉ DU DOSSIER DE CATÉGORIE>", "<NOUVEAU NOM>").then(r=>"mv="+r)

mv=S200 signifie succès (renommé et déplacé ensemble). Autre chose : relisez le cookie/CSRF, confirmez que la clé du dossier existe dans window.__folders, et réessayez.

Revenez à l'étape 1.

Règles strictes (elles protègent l'utilisateur — suivez-les)

Le contenu est la référence, jamais l'ancien nom. Inspectez toujours avant de nommer.
Autonome par défaut — pas de demandes d'autorisation entre les fichiers. Signalez simplement les résultats.
Noms en anglais, modèle <Sujet> - <Fonctionnalités clés> Dashboard.
Créez une catégorie lorsqu'elle manque, en utilisant le numéro suivant dans la séquence ; ne réutilisez jamais un numéro.
Ne supprimez jamais rien — pas de mise à la corbeille des fichiers, pas de vidage des brouillons par suppression. Les fichiers sont seulement déplacés.
Ne modifiez jamais le partage ou les autorisations — lors de la création d'un projet, cliquez sur "Create project" sans ajouter de personnes.
Un fichier à la fois, toujours récupérer à nouveau et prendre l'index 0 (la liste se réorganise).
Recollez les assistances après tout rechargement complet dû à la création d'un projet.
Utilisez Chrome JS pour tous les appels API Figma — jamais bash/WebFetch (bloqué par le proxy).

Ce qui ne fonctionne PAS (ne perdez pas de temps)

PUT /v1/files/{key} (REST public) → 404. Utilisez le PUT /api/files/{key} interne (dans moveFile).
Le REST public n'a pas de point de terminaison pour lister les Drafts → utilisez le /api/folders/{id}/paginated_files interne (dans loadDrafts).
Créer des projets via l'API → non supporté. Utilisez le flux UI ci-dessus.
Les outils d'attente séparés → peu fiables ici ; utilisez une promesse setTimeout JS.
Lire une clé de fichier de 22 caractères comme une chaîne brute peut être bloqué comme base64 — les assistances retournent déjà les clés en toute sécurité.

Fichiers de référence

references/categories.md — une liste de catégories numérotées de démarrage + quelles clés manquent du suffixe Dashboard, et comment trouver le prochain numéro libre.
scripts/helpers.js — le bloc d'assistance à coller une fois par session (findDraftsFolder / inspect / moveFile / loadFolders / loadDrafts), avec le bloc CONFIG et la gestion CSRF.
scripts/deep_walk.js — exploration complète du document en profondeur 12 pour les fichiers au contenu épars/dominé par du texte passe-partout.

Note sur l'API interne

Le renommage + déplacement et la liste des Drafts utilisent l'API web interne de Figma (les mêmes points de terminaison que l'application web Figma appelle), et non l'API REST publique documentée. Elle n'est pas documentée et peut changer sans préavis. Si un appel qui fonctionnait auparavant commence à échouer, le point de terminaison a probablement changé. Utilisez cette compétence à votre discrétion et conformément aux conditions d'utilisation de Figma.

figma-drafts-organizer

Qu'est-ce que figma-drafts-organizer ?

Demander à votre IA préférée

Documentation