openpencil/packages/docs/it/guide/features.md

Funzionalità

Perché OpenPencil

Gli strumenti di design sono un problema di catena di fornitura. Quando il tuo strumento è proprietario, il fornitore controlla ciò che è possibile. OpenPencil è un'alternativa open-source: licenza MIT, compatibile con Figma, completamente locale e programmabile.

Import & export file .fig di Figma

Apri e salva file nativi Figma direttamente. L'import decodifica lo schema Kiwi completo a 194 definizioni inclusi i messaggi NodeChange con ~390 campi. L'export codifica il grafo della scena in binario Kiwi con compressione Zstd e generazione thumbnail. Salva (⌘S) e Salva con nome (⇧⌘S) usano dialoghi nativi dell'OS.

Copia e incolla con Figma

Seleziona nodi in Figma, ⌘C, passa a OpenPencil, ⌘V — appaiono con riempimenti, contorni, auto-layout, testo, raggi degli angoli, effetti e reti vettoriali preservati. Funziona anche al contrario.

L'incolla gestisce scenari complessi: i percorsi vettoriali vengono ridimensionati dalla normalizedSize di Figma, i figli delle istanze vengono popolati dal symbolData del componente, i set di componenti vengono rilevati e i symbolOverrides vengono applicati. I font vengono caricati automaticamente.

Reti vettoriali

Lo strumento penna usa il modello di rete vettoriale di Figma — non percorsi semplici. Click per punti angolari, click+trascinamento per curve di Bézier. Percorsi aperti e chiusi supportati.

Strumenti forma

La barra strumenti fornisce tutti gli strumenti forma base di Figma: Rettangolo (R), Ellisse (O), Linea (L), Poligono e Stella. Tutti supportano riempimento, contorno, evidenziazione al passaggio e contorno di selezione.

Auto-Layout

Yoga WASM fornisce il layout CSS flexbox. I frame supportano: direzione, gap, padding, justify, align e dimensionamento figli. Shift+A attiva/disattiva l'auto-layout.

Modifica testo inline

Modifica testo nativa nel canvas. Doppio click su un nodo testo per entrare in modalità modifica. Selettore font con scroll virtuale, filtro di ricerca e anteprima CSS. In Tauri, i font di sistema sono enumerati via il crate Rust font-kit.

Formattazione testo ricco

Formattazione per carattere: ⌘B grassetto, ⌘I corsivo, ⌘U sottolineato, o pulsanti B/I/U/S. Implementato via modello StyleRun. Preservato nell'import/export .fig.

Annulla/Ripristina

Ogni operazione è annullabile. Pattern di comando inverso. ⌘Z annulla, ⇧⌘Z ripristina.

Guide di snap

Snap ai bordi e al centro con linee guida rosse. Consapevole della rotazione.

Righelli canvas

Righelli in alto e a sinistra mostrano scale di coordinate con badge di coordinate alla selezione.

Selettore colore e tipi di riempimento

Selezione HSV con slider di tonalità, slider alfa, input hex e controllo opacità. Tipi: Solido, Gradiente (Lineare, Radiale, Angolare, Diamante) e Immagine.

Pannello livelli

Vista ad albero della gerarchia del documento. Pannelli ridimensionabili.

Pannello proprietà

Interfaccia a tab Design | Codice | IA. Il tab Design mostra sezioni contestuali: Aspetto, Riempimento, Contorno, Effetti, Tipografia, Layout, Posizione, Esportazione e Pagina.

Raggruppa/Separa

⌘G raggruppa. ⇧⌘G separa. I nodi vengono ordinati per posizione visiva.

Sezioni

Le sezioni (S) sono contenitori organizzativi di livello superiore sul canvas con pillole di titolo e inversione automatica del colore del testo.

Documenti multi-pagina

I documenti supportano più pagine. Ogni pagina mantiene uno stato viewport indipendente.

Evidenziazione al passaggio

I nodi si evidenziano con un contorno che segue la geometria reale.

Rendering avanzato (Tier 1)

Il renderer CanvasKit supporta le caratteristiche visive Tier 1 complete: riempimenti gradiente, riempimenti immagine, effetti, proprietà contorno, dati arco, culling viewport, riuso Paint e coalescenza RAF.

Componenti e istanze

Componenti riutilizzabili (⌥⌘K), set (⇧⌘K), istanze via menu contestuale, stacca (⌥⌘B). Sync in tempo reale e supporto override. Etichette viola con icona diamante.

Variabili

Token di design con collezioni e modalità. Dialogo TanStack Table. Supporta COLOR con UI completa, FLOAT/STRING/BOOLEAN definiti. Tutte le operazioni sono annullabili.

Esportazione immagini

PNG, JPG, WEBP con scala 0,5×–4×, anteprima live e ⇧⌘E.

Menu contestuale

Click destro per: Appunti, Ordine Z, Raggruppamento, Componenti (voci viola), Visibilità, Sposta a pagina.

Ordine Z, visibilità e blocco

] porta in primo piano, [ invia in fondo. ⇧⌘H visibilità. ⇧⌘L blocco.

App web e desktop

OpenPencil funziona nel browser su app.openpencil.dev. L'app desktop usa Tauri v2 (~5 MB). Funziona completamente offline.

Menu app (browser)

Barra dei menu con reka-ui: File, Modifica, Visualizza, Oggetto, Testo, Disponi. Scorciatoie adattate alla piattaforma. Nascosto in Tauri.

Salvataggio automatico

File salvati 3 secondi dopo l'ultima modifica. Debounce su sceneVersion. Disabilitato per documenti nuovi senza titolo.

Collaborazione P2P

Collaborazione peer-to-peer in tempo reale — nessun server richiesto. Basato su Trystero (WebRTC) + Yjs (CRDT).

• Zero costi di hosting — segnalazione via broker MQTT pubblici
• Traversal NAT — server Google STUN, Cloudflare STUN e Open Relay TURN
• Cursori in tempo reale — frecce colorate stile Figma con pillole di nome
• Presenza — avatar colorati
• Modalità segui — clicca sull'avatar di un peer per seguire il suo viewport
• Persistenza locale — y-indexeddb mantiene la stanza tra i ricaricamenti
• Stanze sicure — ID via crypto.getRandomValues()

Schede multi-file

Apri più documenti in schede. ⌘N/⌘T nuova scheda, ⌘W chiudi, ⌘O apri in nuova scheda. Ogni scheda mantiene il proprio stato documento.

Rendering effetti

Rendering completo degli effetti Figma: Ombra portata, Ombra interna, Sfocatura livello (Gaussiana), Sfocatura sfondo (effetto vetro/satinato), Sfocatura primo piano. Cache SkPicture per nodo per le prestazioni.

Proprietà multi-selezione

Seleziona più nodi e modifica le proprietà condivise. Valori comuni visualizzati normalmente, valori diversi mostrano "Mixed". Capovolgi H/V si applica a tutti i nodi.

ScrubInput

Tutte le entrate numeriche usano interazione trascina-per-regolare. Supporta suffissi (°, px, %).

Build CI/CD

GitHub Actions costruisce app Tauri sui tag di versione. macOS firmato e notarizzato. Note di release auto-popolate dal CHANGELOG.md.

@open-pencil/core e CLI

Il motore è estratto in packages/core/. Il CLI fornisce: info, tree, find, export, analyze, node, pages, variables, eval. Tutti supportano --json. Il comando eval esegue JavaScript con API Plugin Figma. Vedi Comando Eval.

Renderer JSX

Creazione programmabile via TreeNode builder. Props shorthand stile Tailwind.

Chat IA

Assistente IA integrato via ⌘J. 75 strumenti in schema.ts che coprono lettura, creazione, modifica, manipolazione nodi, CRUD variabili, strumenti vettoriali, controllo viewport e eval. Server MCP espone 78 strumenti totali (75 core + 3 gestione file) per strumenti di codifica IA esterni.

Pannello codice

Il tab Codice mostra il JSX della selezione con evidenziazione sintassi Prism.js e copia.

Qualità del codice

Rilevamento copia-incolla via jscpd — duplicazione ridotta dal 15,6% allo 0,62%. Pipeline di importazione ottimizzato da O(n²) a O(n).