Les détails du design pour votre coding agent :
réaliser, comparer et suivre les changements.
English · Deutsch · Español · Français · 日本語 · 한국어 · Português · 简体中文 · 繁體中文
Démarrer · Démo · Pourquoi · Ce que reçoit l’agent · Pi · Limites · Documentation
figlens transforme les fichiers Figma sauvegardés en contexte de design exploitable par votre coding agent, pas seulement en capture d’écran à interpréter.
- **Réaliser à partir des détails source.** Lisez la mise en page, le texte, les styles, les variables ainsi que les annotations et le statut Ready for dev de Dev Mode ; exportez les icônes vectorielles en SVG et les images comme ressources. `bundle` rassemble les données, ressources et rendu de référence d’une frame ; `verify` signale les fichiers manquants, les vérifications de polices et les limites de la transmission. MCP `nodes` peut enregistrer un JSON de nœuds volumineux dans un fichier avec `out` plutôt que dans la réponse.
- **Comparer l’UI en cours d’exécution.** `compare-image` compare votre capture au rendu de figlens et nomme les calques sous les régions qui diffèrent. Examinez ces écarts et les avertissements de rendu ; ce n’est pas une garantie de fidélité au pixel près.
- **Suivre les changements du design.** `diff` compare les révisions sauvegardées ; `changes` et `watch` signalent les mises à jour des périmètres locaux suivis ; `freshness` indique quand une copie sauvegardée est plus ancienne que le fichier en ligne, et `pull` sauvegarde une nouvelle copie via votre propre connexion dans le navigateur. Sauvegardez un nouveau `.fig` depuis Figma pour récupérer les modifications : ce n’est pas une synchronisation en direct avec Figma. Les comptes nommés associent chaque design à des profils de navigateur et à des variables d’environnement de tokens API distincts ; les valeurs par défaut restent inchangées. `figlens sources init [DIR]`: Analyse les `.fig` locaux et crée `.figlens/sources.json` sans écraser un fichier existant ; les noms viennent de `meta.json` ou du nom de fichier. Remplir les URL vides avant pull.
**Le fonctionnement hors ligne comme base.** Dans Figma, **File > Save local copy**. Placez `design.fig` à côté de votre code. Ensuite, un lien Figma suffit : son id de nœud choisit le frame. Sans copie enregistrée, copiez les calques dans Figma (clic droit > Copy) et lancez `figlens clipboard screen.fig` ; une copie ne contient ni images ni contours vectoriels ([comment](docs/README-fr.md#copy-a-selection)). Un binaire natif le lit en local, sans app Figma ouverte, connexion au compte ni appel réseau vers Figma ; seules la vérification facultative `freshness` (avec un token API configuré ; par défaut : `FIGMA_TOKEN`) et `pull` (via votre connexion dans le navigateur) contactent Figma.
## Bien démarrer
**Pas encore de fichier de design ?** [Vérifiez votre installation avec le petit exemple public](examples/first-success/README.md) : vérifiez le binaire choisi, trouvez un frame et validez son bundle. Aucun modèle nécessaire.
Placez `design.fig` dans votre projet, puis choisissez **une** configuration. Chacune donne à votre agent les outils figlens et le même guide intégré pour la planification, l'implémentation et la préparation des images.
| Configuration | Pour | Le guide vient de |
|---|---|---|
| [Plugin](#setup-plugin) | Claude Code, Codex, Antigravity, Cursor, Kimi Code | le skill du plugin et l'outil `workflow` du serveur |
| [MCP](#setup-mcp) | Claude Code, Cursor, Codex, Gemini CLI et les autres clients MCP | l'outil `workflow` du serveur |
| [Pi](#setup-pi) | Pi 1.3.0+ | le paquet, qui inclut le skill |
| [OpenCode V2](#setup-opencode) | OpenCode V2 2.2.0 | le skill fourni dans le paquet |
| [OMP](#setup-omp) | OMP 18.13.2 | le skill fourni dans le paquet |
| [Herdr](herdr/README.md) | un panneau à côté de vos agents dans Herdr 0.1.12+ : trouver un écran, le confier, suivre l’avancement de chaque écran sur un tableau | la configuration de l’agent qui le reçoit |
| [CLI](#setup-cli) | les agents qui n'exécutent que des commandes shell, les scripts et la CI, ou vous | `figlens workflow `, ou le [skill](#setup-skill) facultatif |
**Ordinaire vs avancé.** L'usage ordinaire ne demande aucune configuration : `figlens search design.fig "query"` lit le `.fig` et ne crée rien. Un index local optionnel n'est créé que sur votre demande (`figlens index prepare design.fig --scope 0:0`), puis réutilisé entre redémarrages et hôtes. Voir [Recherche ordinaire et index local optionnel](docs/README-fr.md#local-index). Optionnel et expérimental : `--mode semantic` ou `hybrid` classe par le sens avec un modèle local que vous installez vous-même ; voir [Recherche sémantique optionnelle](docs/README-fr.md#semantic-search).
### Plugin
Une seule installation ajoute le skill figlens et le serveur MCP à votre agent (Node.js 18+). Le serveur est figé sur la version du plugin (`npx -y @runkids/figlens@ mcp`). Mettez le plugin à jour pour passer à une nouvelle version.
| Hôte | Installation |
|---|---|
| Claude Code | `claude plugin marketplace add runkids/figlens`, `claude plugin install figlens@figlens` |
| Codex | `codex plugin marketplace add runkids/figlens`, `codex plugin add figlens@figlens` |
| Antigravity | `agy plugin install https://github.com/runkids/figlens/tree/main` |
| Cursor | `git clone --depth 1 https://github.com/runkids/figlens ~/.cursor/plugins/local/figlens`, puis rechargez la fenêtre |
| Kimi Code | `/plugins install https://github.com/runkids/figlens/tree/main` dans une session, puis `/reload` |
[skillshare](https://github.com/runkids/skillshare) installe le même plugin sur plusieurs hôtes à la fois : `skillshare plugin add https://github.com/runkids/figlens.git --target claude --target codex --target cursor -g` ; mettez-le à jour ensuite avec `skillshare plugin update figlens -g`.
Redémarrez l'hôte ou ouvrez une nouvelle session, puis vérifiez que les outils figlens sont listés. L'installation d'un plugin copie le dépôt : environ 7 Mo, plus l'historique Git (environ 60 Mo) dans Codex. Antigravity ne charge que les 24 premiers Ko du skill ; l'outil `workflow` du serveur fournit le guide complet. Muse n'est pas encore pris en charge. [Tableau des hôtes et ce qui a été vérifié](wiki/host-plugins.md)
### MCP
**Claude Code** (Node.js 18+, macOS/Linux) :
```sh
claude mcp add --transport stdio --scope local figlens -- npx -y @runkids/figlens mcp
```
**Codex CLI** (Node.js 18+, macOS/Linux) :
```sh
codex mcp add figlens -- npx -y @runkids/figlens mcp
```
**Tout client MCP :**
```json
{
"mcpServers": {
"figlens": {
"command": "npx",
"args": ["-y", "@runkids/figlens", "mcp"]
}
}
}
```
Sans Node.js, installez le binaire autonome ([CLI](#setup-cli)) et utilisez `"command": "figlens", "args": ["mcp"]`. Ouvrez une nouvelle session et vérifiez que les outils figlens apparaissent (`/mcp` dans Claude Code). Aucune installation séparée du skill n'est nécessaire. Ajoutez `--root ` après `mcp` pour limiter les dossiers que figlens peut lire et écrire.
#### Arguments de démarrage MCP
Ajoutez ces options après `mcp` dans les `args` du client. Ce sont les seules options de démarrage MCP ; les deux sont facultatives et répétables.
| Option | Rôle |
|---|---|
| `--root DIR` | Autorise la lecture des designs et les exports dans `DIR` et ses sous-dossiers. Sans cette option, figlens n’ajoute aucune restriction de chemin ; les permissions système restent applicables. Il ne se limite pas au projet courant et ne parcourt pas l’ordinateur. |
| `--storage-root DIR` | Autorise un stockage d’index personnalisé explicitement demandé dans `DIR` et ses sous-dossiers. Ne sélectionne ni ne modifie le stockage par défaut. |
Utilisez des chemins absolus vers des répertoires existants. Chaque option et chemin est un élément distinct du tableau ; répétez l’option pour plusieurs dossiers. `--root` est une limite de chemin, pas un accès administrateur, et ne restreint que figlens MCP, pas les autres outils de l’agent.
Exemple avec deux racines de design/sortie et deux racines de stockage autorisées :
```json
{
"mcpServers": {
"figlens": {
"command": "npx",
"args": [
"-y", "@runkids/figlens", "mcp",
"--root", "/absolute/designs",
"--root", "/absolute/project",
"--storage-root", "/absolute/storage-a",
"--storage-root", "/absolute/storage-b"
]
}
}
}
```
`figlens mcp --storage` n’existe pas. Choisissez l’emplacement réel avec l’argument `storage` de l’outil `index` (chemin absolu sous une racine autorisée), ou via CLI : `figlens index prepare design.fig --storage /absolute/storage-a`. Après `prepare`, figlens mémorise l’emplacement du workspace et le réutilise entre redémarrages et hôtes sans répéter `storage` ni `--storage-root`. Sans emplacement personnalisé, les répertoires par défaut de l’utilisateur s’appliquent, sans option de stockage.
Pour ne pas figer ces chemins dans une configuration versionnée, ou pour partager les designs entre worktrees Git, consultez [roots dans une configuration versionnée](wiki/mcp.md#roots-in-a-checked-in-config).
Plusieurs racines de stockage élargissent seulement les emplacements autorisés : chaque `storage` en choisit un seul. Elles ne distribuent, ne synchronisent et ne sauvegardent pas les index. Indiquer une autre racine ne déplace pas une base existante ; figlens refuse l’emplacement en conflit.
### Pi
Un seul paquet fournit la CLI, MCP, le viewer, les commandes `/figlens` et le skill :
```sh
pi install npm:@runkids/figlens
```
[Guide de l'extension Pi](docs/README-fr.md#pi)
### OpenCode V2
Installez le paquet dans OpenCode V2 :
```sh
opencode plugin add @runkids/figlens
```
Redémarrez le client, puis exécutez `/figlens help`. [OpenCode V2](opencode/README.md)
### OMP
Installez le même paquet dans OMP :
```sh
omp plugin install @runkids/figlens
```
Redémarrez le client, puis exécutez `/figlens help`. [OMP](omp/README.md)
### CLI
Lancez-le via npm, ou installez le binaire autonome :
```sh
npx @runkids/figlens --help # Node.js 18+, sans installation
curl -fsSL https://raw.githubusercontent.com/runkids/figlens/main/scripts/install.sh | sh # macOS, Linux
brew install runkids/tap/figlens # Homebrew
irm https://raw.githubusercontent.com/runkids/figlens/main/scripts/install.ps1 | iex # Windows PowerShell
```
`npx` exécute le binaire de la version du paquet qu'il résout. Les installations par script se mettent à jour avec `figlens update`, celles de Homebrew avec `brew upgrade figlens`. Les binaires couvrent macOS (Apple silicon, Intel), Linux (arm64, x86_64) et Windows (x86_64).
Un agent qui utilise la CLI lit son guide avec `figlens workflow build` (ainsi que `audit`, `images`, `search`, `plan`, `planning-details` et `yolo`, réservé à une demande explicite), toujours aligné sur la version du binaire, ou via le [skill](#setup-skill).
[Référence de la CLI](docs/README-fr.md#commands)
Différents comptes Figma : `figlens pull --login --account work` et le champ facultatif `"account": "work"` dans la correspondance des sources. Aucune migration des sessions par défaut existantes. [Comptes Figma : navigateur et tokens API](docs/README-fr.md#figma-accounts).
`figlens sources init [DIR]`: Analyse les `.fig` locaux et crée `.figlens/sources.json` sans écraser un fichier existant ; les noms viennent de `meta.json` ou du nom de fichier. Remplir les URL vides avant pull.
### Skill pour agents (facultatif)
Le skill enseigne à un agent le même déroulé que le guide intégré : trouver le frame, lire le bundle par petits morceaux, planifier le périmètre et comparer l'UI en cours d'exécution avec le design. Il ne contient que des instructions : associez-le à la CLI ou à MCP. Les configurations MCP et Pi n'en ont pas besoin.
**Recommandé : [skillshare](https://github.com/runkids/skillshare).** Installez le skill une fois et synchronisez-le avec chaque agent que vous utilisez :
```sh
skillshare install github.com/runkids/figlens/skills/figlens
skillshare sync
```
Le même outil peut aussi configurer la connexion MCP de figlens pour ces agents :
```sh
skillshare mcp add figlens --global --target claude --target codex --target cursor --no-tui -- npx -y @runkids/figlens mcp
skillshare sync mcp --global
```
Autres façons d'installer le skill :
```sh
npx skills add runkids/figlens --skill figlens # Skills CLI
```
Ou copiez `skills/figlens/` depuis ce dépôt ou une archive de release dans le répertoire de skills de votre agent (Claude Code : `~/.claude/skills/`). Un skill installé se met à jour séparément du binaire ; `figlens workflow` correspond toujours au binaire.
Demandez ensuite un écran :
```text
Build the task board from ./design.fig in this project.
Find the matching frame, use this project's components and image workflow,
then compare the running UI with the design and fix confirmed differences.
Report missing assets and any checks you could not run.
```
L’agent trouve la frame, regroupe les données de design, les assets et une image de référence, puis construit l’écran avec votre stack. Le workflow partagé guide les vérifications des polices et des ressources ; les éléments manquants sont signalés pendant que l’implémentation de la mise en page continue avec des alternatives documentées. Demandez les fichiers modifiés et une comparaison dans le navigateur.
## Démo : Pi construit un écran React à partir d’un .fig
[](https://github.com/runkids/figlens/blob/v0.10.1/assets/taskflow-demo.mp4)
Le GIF en boucle lit la vidéo montée à une vitesse trois fois supérieure. Cliquez pour voir la vidéo complète de 78 secondes.
**[Vidéo de 78 secondes](https://github.com/runkids/figlens/blob/v0.10.1/assets/taskflow-demo.mp4).** Pi lance `/figlens plan`, lit une frame de dashboard dans un `.fig` local, la construit avec React et Tailwind CSS, puis vérifie et corrige l’UI en cours d’exécution. Time-lapse monté, pas un benchmark ni une promesse de fidélité au pixel près. Design : [Task Flow par Eymen Eid](https://www.figma.com/community/file/1224268866120711793) · [notes d’enregistrement](wiki/accuracy.md#taskflow-react-and-tailwind-demo).
**[Du .fig au HTML/CSS modifiable](examples/task-list/README.md) :** dans une étude contrôlée sur une liste de tâches, les six essais basés sur figlens ont conservé les 19 occurrences de texte visible comme véritable texte DOM et les quatre icônes. L’extraction CLI et MCP a également réussi avec le réseau Docker désactivé. L’étude présente la configuration, les mesures et les comparaisons d’images indépendantes.
## Pourquoi figlens plutôt que le MCP Figma officiel ?
Utilisez **figlens** quand le design doit voyager sous forme de fichier : agents distants, CI, travail hors ligne, passation entre agents, lectures répétées illimitées. Utilisez le **MCP Figma officiel** quand l’agent doit voir le design en direct, sans étape d’export.
La lecture d’un `.fig` se fait hors ligne. L’installation et la mise à jour de figlens, les entrées `gs://`, la vérification facultative `freshness` et `pull`, votre fournisseur de modèle et les dépendances de votre projet nécessitent toujours un réseau.
[Comparaison complète](docs/README-fr.md#why)
## Ce que reçoit l’agent
Une frame, un zip. Une structure pour construire, des assets à utiliser, une image pour vérifier.
[Contenu du bundle et exemples](docs/README-fr.md#bundle) · [Quelle est la proximité avec Figma ?](docs/README-fr.md#accuracy)
## Documentation
- [Extension Pi](docs/README-fr.md#pi)
- [Parcourir un design sans Figma](docs/README-fr.md#viewer)
- [Serveur MCP et skill pour agent](docs/README-fr.md#mcp-and-skill)
- [Référence de la CLI](docs/README-fr.md#commands)
## Limites
- **Des snapshots, pas une synchronisation en direct.** Exportez un nouveau `.fig` quand le design change. figlens ne peut pas télécharger un design depuis une URL Figma.
- **Format non documenté.** figlens décode le schéma embarqué dans le fichier ; les nouveaux exports Figma peuvent nécessiter une mise à jour de figlens.
- **Polices et texte :** les fichiers de polices ne sont pas inclus ; un texte avec override peut conserver la mise en page enregistrée par Figma. Utilisez des polices autorisées du projet et comparez le résultat.
- **Couverture :** les [améliorations du rendu](https://github.com/runkids/figlens/issues/36) et la [sémantique de transmission](https://github.com/runkids/figlens/issues/37) sont suivies dans les issues. Consultez la [couverture sémantique actuelle](wiki/semantics.md).
- **Vérifiez la sortie.** Lisez les `warnings` du bundle, `missing-assets.json` et les variables non résolues dans `context.md`, puis comparez l’implémentation au design.
- Les limites de rendu visibles connues figurent dans `_figlens.renderDiagnostics` des nœuds, les résumés bornés de `inspect` et les `warnings` du bundle et d’`export` ; `missing-assets.json` ne contient que les échecs de ressources. L’absence d’avertissements ne garantit pas la fidélité des pixels.
## Aidez figlens à grandir
Si figlens a transformé un design en code pour vous, [mettez une étoile au repo](https://github.com/runkids/figlens) pour que d’autres le trouvent. Un fichier qu’il ne sait pas lire ? [Ouvrez une issue](https://github.com/runkids/figlens/issues) avec la commande et le résultat attendu.
Le développement fait tourner Rust uniquement dans Docker : `docker compose run --rm dev cargo test`. Voir [AGENTS.md](AGENTS.md) et le [wiki](wiki/README.md).
## Licence
[MIT](LICENSE). figlens est un projet indépendant, non affilié à Figma, ni approuvé ou sponsorisé par Figma. Le format `.fig` n’est pas documenté et peut changer ; n’utilisez que des fichiers et des assets que vous avez le droit d’utiliser et de partager.