2026-03-03 09:57:17 +00:00
# `open-pencil eval` — API Pluginów kompatybilne z Figmą do skryptowania headless
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
## Przegląd
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
`bun open-pencil eval <file> --code '<js>'` wykonuje JavaScript na pliku `.fig` z globalnym obiektem `figma` kompatybilnym z Figmą. Umożliwia to skryptowanie headless, operacje wsadowe, wykonywanie narzędzi AI i testy — wszystko bez GUI.
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
Obiekt `figma` odzwierciedla powierzchnię API Pluginów Figmy jak najdokładniej, więc istniejąca wiedza o pluginach Figmy i fragmenty kodu są bezpośrednio przenośne.
2026-03-03 09:46:35 +00:00
```bash
2026-03-03 09:57:17 +00:00
# Utworzenie ramki, ustawienie auto-layout, dodanie dzieci
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
# Zapytanie o węzły
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
# Zapis zmian
2026-03-03 09:46:35 +00:00
bun open-pencil eval design.fig --code '...' --write
```
2026-03-03 09:57:17 +00:00
## Architektura
2026-03-03 09:46:35 +00:00
```
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)
→ wydruk wyniku / zapis pliku z --write
2026-03-03 09:46:35 +00:00
```
2026-03-03 09:57:17 +00:00
### Główne klasy
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
| Klasa | Lokalizacja | Rola |
|-------|-------------|------|
| `FigmaAPI` | `packages/core/src/figma-api.ts` | Obiekt proxy implementujący metody `figma.*` |
| `FigmaNode` | `packages/core/src/figma-api.ts` | Proxy opakowujący `SceneNode` z dostępem do właściwości w stylu Figmy |
| Polecenie `eval` | `packages/cli/src/commands/eval.ts` | Ładuje dokument, tworzy API, wykonuje kod |
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
### Dlaczego w `@open-pencil/core`?
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
Klasa `FigmaAPI` żyje w core, ponieważ: narzędzia AI ją reużywają, testy mogą jej używać i nie ma zależności DOM.
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
## Polecenie CLI
2026-03-03 09:46:35 +00:00
```
2026-03-03 09:57:17 +00:00
bun open-pencil eval < file > [opcje]
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
Argumenty:
file Plik .fig do przetworzenia
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
Opcje:
--code, -c Kod JavaScript do wykonania
--stdin Odczyt kodu ze stdin
--write, -w Zapis zmian do pliku wejściowego
-o, --output Zapis do innego pliku
--json Wynik jako JSON
--quiet, -q Pomiń wydruk
2026-03-03 09:46:35 +00:00
```
2026-03-03 09:57:17 +00:00
## Implementacja fazowa
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
- **Faza 1: Core** — tworzenie węzłów, właściwości, operacje na drzewie, auto-layout, tekst (~80% realnych skryptów)
- **Faza 2: Komponenty i Instancje** — createComponent, createInstance, detachInstance
- **Faza 3: Zmienne** — getLocalVariables, createVariable, setBoundVariable
- **Faza 4: Style i Zaawansowane** — style paint/tekst/efekty, operacje boolowskie
2026-03-03 09:46:35 +00:00
2026-03-03 09:57:17 +00:00
[Pełna referencja API po angielsku ](/eval-command )