2026-03-03 09:57:17 +00:00
# `open-pencil eval` — API Plugin compatible Figma pour le scripting headless
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
## Vue d'ensemble
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
`bun open-pencil eval <file> --code '<js>'` exécute du JavaScript sur un fichier `.fig` avec un objet global `figma` compatible Figma. Cela permet le scripting headless, les opérations par lots, l'exécution d'outils IA et les tests — le tout sans interface graphique.
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
L'objet `figma` reflète la surface de l'API Plugin de Figma aussi fidèlement que possible, de sorte que les connaissances existantes sur les plugins Figma et les extraits de code sont directement transférables.
2026-03-03 09:46:35 +00:00
```bash
2026-03-03 09:57:17 +00:00
# Créer un cadre, définir l'auto-layout, ajouter des enfants
2026-03-03 09:46:35 +00:00
bun open-pencil eval design.fig --code '
const frame = figma.createFrame()
frame.name = "Card"
frame.resize(300, 200)
frame.layoutMode = "VERTICAL"
frame.itemSpacing = 12
frame.fills = [{ type: "SOLID", color: { r: 1, g: 1, b: 1 } }]
return { id: frame.id, name: frame.name }
'
2026-03-03 09:57:17 +00:00
# Interroger les nœuds
2026-03-03 09:46:35 +00:00
bun open-pencil eval design.fig --code '
2026-03-03 09:57:17 +00:00
const buttons = figma.currentPage.findAll(n => n.name.includes("Button"))
return buttons.map(b => ({ id: b.id, name: b.name }))
2026-03-03 09:46:35 +00:00
'
2026-03-03 09:57:17 +00:00
# Écrire les modifications
2026-03-03 09:46:35 +00:00
bun open-pencil eval design.fig --code '...' --write
```
## Architecture
```
2026-03-03 09:57:17 +00:00
CLI: open-pencil eval < file > --code '...'
→ loadDocument(file) → SceneGraph
→ FigmaAPI(sceneGraph) → proxy `figma`
→ AsyncFunction('figma', code)(figmaProxy)
→ afficher résultat / sauvegarder avec --write
2026-03-03 09:46:35 +00:00
```
2026-03-03 09:57:17 +00:00
### Classes principales
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
| Classe | Emplacement | Rôle |
|--------|-------------|------|
| `FigmaAPI` | `packages/core/src/figma-api.ts` | Objet proxy implémentant les méthodes `figma.*` |
| `FigmaNode` | `packages/core/src/figma-api.ts` | Proxy enveloppant `SceneNode` avec accès propriétés style Figma |
| Commande `eval` | `packages/cli/src/commands/eval.ts` | Charge le document, crée l'API, exécute le code |
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
### Pourquoi dans `@open-pencil/core` ?
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
La classe `FigmaAPI` vit dans core car : les outils IA la réutilisent, les tests l'utilisent et elle n'a pas de dépendances DOM.
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
## Commande CLI
2026-03-03 09:46:35 +00:00
```
bun open-pencil eval < file > [options]
2026-03-03 09:57:17 +00:00
Arguments :
file Fichier .fig sur lequel opérer
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
Options :
--code, -c Code JavaScript à exécuter
--stdin Lire le code depuis stdin
--write, -w Écrire les modifications dans le fichier d'entrée
-o, --output Écrire dans un fichier différent
--json Sortie en JSON
--quiet, -q Supprimer la sortie
2026-03-03 09:46:35 +00:00
```
2026-03-03 09:57:17 +00:00
## Implémentation par phases
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
- **Phase 1 : Core** — création de nœuds, propriétés, opérations d'arbre, auto-layout, texte (~80% des scripts réels)
- **Phase 2 : Composants & Instances** — createComponent, createInstance, detachInstance
- **Phase 3 : Variables** — getLocalVariables, createVariable, setBoundVariable
- **Phase 4 : Styles & Avancé** — styles paint/texte/effets, opérations booléennes
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
[Référence API complète en anglais ](/eval-command )