Funzionalità

File .fig di Figma

Apri e salva file nativi di Figma direttamente. La pipeline di importazione/esportazione utilizza lo stesso codec binario Kiwi di Figma — 194 definizioni di schema, ~390 campi per nodo. Salva con ⌘S, Salva con nome con ⇧⌘S.

Copia e incolla con Figma — seleziona i nodi in Figma, ⌘C, passa a OpenPencil, ⌘V. Riempimenti, bordi, auto-layout, testo, effetti, raggi degli angoli e reti vettoriali vengono preservati. Funziona in entrambe le direzioni.

Disegno e Modifica

• Forme — Rettangolo (R), Ellisse (O), Linea (L), Poligono, Stella
• Strumento penna — reti vettoriali (non semplici tracciati), curve di Bézier con maniglie tangenti
• Testo — modifica nativa sul canvas con supporto IME, doppio clic per entrare in modalità di modifica
• Testo ricco — grassetto per carattere (⌘B), corsivo (⌘I), sottolineato (⌘U), barrato
• Auto-layout — flexbox tramite Yoga WASM: direzione, gap, padding, giustificazione, allineamento, dimensionamento figli. ⇧A per attivare/disattivare
• Componenti — crea (⌥⌘K), set di componenti (⇧⌘K), istanze con supporto override, sincronizzazione live
• Variabili — token di design con collezioni, modalità (Light/Dark), tipi colore/float/stringa/booleano, binding di variabili
• Sezioni — contenitori organizzativi con adozione automatica dei figli e etichette titolo

Pannello Proprietà

Schede Design | Code | AI sensibili al contesto:

• Aspetto — opacità, raggio degli angoli (uniforme o per angolo), visibilità
• Riempimento — solido, gradiente (lineare/radiale/angolare/diamante), immagine
• Bordo — colore, spessore, allineamento (interno/centro/esterno), spessori per lato, terminazione, giunzione, tratteggio
• Effetti — ombra esterna, ombra interna, sfocatura livello, sfocatura sfondo, sfocatura primo piano
• Tipografia — selettore font con scroll virtuale e ricerca, peso, dimensione, allineamento, pulsanti stile
• Layout — controlli auto-layout quando attivo
• Esportazione — scala, formato (PNG/JPG/WEBP/SVG), anteprima live

Rendering

Skia (CanvasKit WASM) — lo stesso motore di rendering di Figma:

• Riempimenti gradiente (lineare, radiale, angolare, diamante)
• Riempimenti immagine con modalità di scala
• Effetti con cache per nodo
• Dati arco (ellissi parziali, ciambelle)
• Culling del viewport e riutilizzo paint
• Guide di snap con allineamento sensibile alla rotazione
• Righelli sul canvas con badge di selezione
• Evidenziazione hover che segue la geometria reale

Annulla/Ripristina

Ogni operazione è annullabile — creazione, eliminazione, spostamenti, ridimensionamenti, modifiche proprietà, riparentamento, modifiche layout, operazioni su variabili. Usa un pattern a comandi inversi. ⌘Z / ⇧⌘Z.

Documenti Multi-Pagina

Aggiungi, elimina, rinomina pagine. Ogni pagina ha uno stato viewport indipendente. Doppio clic per rinominare inline.

Schede Multi-File

Apri più documenti in schede. ⌘T nuova scheda, ⌘W chiudi, ⌘O apri file.

Esportazione

• Immagine — PNG, JPG, WEBP a scala configurabile (0.5×–4×). Tramite pannello, menu contestuale o ⇧⌘E
• SVG — forme, testo con stili per segmento, gradienti, effetti, modalità di fusione
• Tailwind JSX — HTML con classi utility Tailwind v4, pronto per React o Vue
• Copia come — testo, SVG, PNG (⇧⌘C), o JSX tramite menu contestuale

CLI: open-pencil export design.fig -f jsx --style tailwind

Chat AI

Premi ⌘J per aprire l'assistente AI. 90+ strumenti che possono creare forme, impostare stili, gestire layout, lavorare con componenti e variabili, eseguire operazioni booleane, analizzare token di design ed esportare risorse. Connetti Anthropic, OpenAI, Google AI, OpenRouter o qualsiasi endpoint compatibile.

Le chiamate agli strumenti vengono mostrate come voci comprimibili. Verifica visiva — l'assistente renderizza il suo lavoro e lo confronta con la tua richiesta. Supporto completo per l'annullamento di tutte le mutazioni AI.

Vedi Chat AI per configurazione e dettagli sui provider.

Server MCP

Connetti Claude Code, Cursor, Windsurf o qualsiasi client MCP per leggere e scrivere file .fig in modalità headless. 90+ strumenti. Due trasporti: stdio e HTTP.

bun add -g @open-pencil/mcp

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

Consulta il riferimento strumenti MCP per l'elenco completo degli strumenti.

CLI

Ispeziona, esporta e analizza file .fig dal terminale:

open-pencil tree design.fig          # Albero dei nodi
open-pencil find design.fig --type TEXT  # Ricerca
open-pencil export design.fig -f png     # Render
open-pencil analyze colors design.fig    # Audit colori
open-pencil analyze clusters design.fig  # Pattern ripetuti
open-pencil eval design.fig -c "..."     # Figma Plugin API

Quando l'app desktop è in esecuzione, ometti il file per controllare l'editor live tramite RPC:

open-pencil tree                     # Documento live
open-pencil export -f png            # Screenshot del canvas

Tutti i comandi supportano --json. Installazione: bun add -g @open-pencil/cli

Collaborazione in Tempo Reale

P2P tramite WebRTC — nessun server necessario. Condividi un link e modifica insieme.

• Cursori live con frecce colorate e etichette nome
• Avatar di presenza
• Modalità segui — clicca su un partecipante per seguire il suo viewport
• Persistenza locale tramite IndexedDB
• ID stanza sicuri tramite crypto.getRandomValues()

Desktop e Web

Desktop — Tauri v2, ~7 MB. macOS (firmato e autenticato), Windows, Linux. Menu nativi, offline, salvataggio automatico.

Web — disponibile su app.openpencil.dev, installabile come PWA su mobile con interfaccia ottimizzata per il touch.

Homebrew:

brew install open-pencil/tap/open-pencil

Fallback Google Fonts

Quando un font non è disponibile localmente, OpenPencil lo scarica automaticamente da Google Fonts. Nessuna installazione manuale necessaria quando si aprono file .fig con font non familiari.