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

141 lines
6.6 KiB
Markdown
Raw Normal View History

# 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 <kbd></kbd><kbd>S</kbd>, Salva con nome con <kbd></kbd><kbd></kbd><kbd>S</kbd>.
**Copia e incolla con Figma** — seleziona i nodi in Figma, <kbd></kbd><kbd>C</kbd>, passa a OpenPencil, <kbd></kbd><kbd>V</kbd>. Riempimenti, bordi, auto-layout, testo, effetti, raggi degli angoli e reti vettoriali vengono preservati. Funziona in entrambe le direzioni.
## Disegno e Modifica
- **Forme** — Rettangolo (<kbd>R</kbd>), Ellisse (<kbd>O</kbd>), Linea (<kbd>L</kbd>), 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 (<kbd></kbd><kbd>B</kbd>), corsivo (<kbd></kbd><kbd>I</kbd>), sottolineato (<kbd></kbd><kbd>U</kbd>), barrato
- **Auto-layout** — flexbox tramite Yoga WASM: direzione, gap, padding, giustificazione, allineamento, dimensionamento figli. <kbd></kbd><kbd>A</kbd> per attivare/disattivare
- **Componenti** — crea (<kbd></kbd><kbd></kbd><kbd>K</kbd>), set di componenti (<kbd></kbd><kbd></kbd><kbd>K</kbd>), 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. <kbd></kbd><kbd>Z</kbd> / <kbd></kbd><kbd></kbd><kbd>Z</kbd>.
## 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. <kbd></kbd><kbd>T</kbd> nuova scheda, <kbd></kbd><kbd>W</kbd> chiudi, <kbd></kbd><kbd>O</kbd> apri file.
## Esportazione
- **Immagine** — PNG, JPG, WEBP a scala configurabile (0.5×4×). Tramite pannello, menu contestuale o <kbd></kbd><kbd></kbd><kbd>E</kbd>
- **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 (<kbd></kbd><kbd></kbd><kbd>C</kbd>), o JSX tramite menu contestuale
CLI: `openpencil export design.fig -f jsx --style tailwind`
## Chat AI
2026-03-09 14:43:11 +00:00
Premi <kbd></kbd><kbd>J</kbd> 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.
2026-03-09 14:43:11 +00:00
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](/programmable/ai-chat) per configurazione e dettagli sui provider.
## Server MCP
2026-03-09 14:43:11 +00:00
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.
```sh
npm install -g @open-pencil/mcp
```
```json
{
"mcpServers": {
"open-pencil": {
"command": "openpencil-mcp"
}
}
}
```
Consulta il [riferimento strumenti MCP](/programmable/mcp-server) per l'elenco completo degli strumenti.
## CLI
Ispeziona, esporta e analizza file `.fig` dal terminale:
```sh
openpencil tree design.fig # Albero dei nodi
openpencil find design.fig --type TEXT # Ricerca
openpencil export design.fig -f png # Render
openpencil analyze colors design.fig # Audit colori
openpencil analyze clusters design.fig # Pattern ripetuti
openpencil eval design.fig -c "..." # Figma Plugin API
```
Quando l'app desktop è in esecuzione, ometti il file per controllare l'editor live tramite RPC:
```sh
openpencil tree # Documento live
openpencil export -f png # Screenshot del canvas
```
Tutti i comandi supportano `--json`. Installazione: `npm install -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](https://app.openpencil.dev), installabile come PWA su mobile con interfaccia ottimizzata per il touch.
**Homebrew:**
```sh
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.