openpencil/packages/docs/it/reference/figma-compatibility.md

Matrice funzionalità Figma

Confronto funzionalità per funzionalità delle capacità di Figma Design con lo stato di implementazione attuale di Open Pencil.

::: tip Legenda stati ✅ Supportato — la funzionalità è completa · 🟡 Parziale — il comportamento di base esiste, mancano alcune sotto-funzionalità · 🔲 Non ancora implementato :::

Copertura: 94 dei 158 elementi Figma affrontati — 76 ✅ completamente supportati, 18 🟡 parziali, 64 🔲 in sospeso. Ultimo aggiornamento: 2026-03-07.

Interfaccia e navigazione

Funzionalità	Stato	Note
Barra strumenti di design	✅	Barra inferiore (stile UI3): Selezione, Frame, Sezione, Rettangolo, Ellisse, Linea, Testo, Mano, Penna
Pannello livelli (barra laterale sinistra)	✅	Vista ad albero con espansione/compressione, riordinamento per trascinamento, toggle visibilità; larghezza ridimensionabile
Pannello pagine	✅	Aggiungere, eliminare, rinominare pagine; stato viewport per pagina
Pannello proprietà (barra laterale destra)	✅	Sezioni: Aspetto, Riempimento, Contorno, Effetti, Tipografia, Layout, Posizione; larghezza ridimensionabile
Zoom e panoramica	✅	Ctrl + scroll, pinch, ⌘+ / ⌘− / ⌘0, spazio+trascinamento, mouse centrale, strumento mano (H)
Righelli canvas	✅	Righelli superiore/sinistro con bande di selezione e badge di coordinate
Colore di sfondo del canvas	✅	Sfondo per pagina tramite pannello proprietà
Guide del canvas	🔲	Figma supporta guide trascinabili dai righelli
Menu azioni / palette comandi	🔲	Ricerca azioni rapide di Figma
Menu contestuale	✅	Clic destro con appunti, ordine-z, raggruppamento, componente, visibilità, blocco, sposta-a-pagina
Scorciatoie tastiera	🟡	Scorciatoie base + componenti + ordine-z + visibilità/blocco implementate; Scala, Freccia, Matita, ribaltamento, formattazione testo non ancora collegati
Cerca e sostituisci	🔲	Ricerca/sostituzione testo nel documento
Vista contorni livelli	🔲	Vista wireframe di tutti i livelli
Miniature personalizzate	🔲	Miniatura generata all'export, ma nessun selettore personalizzato
Impostazioni valore nudge	🔲	Default 1px/10px; Figma consente valori personalizzati
Menu app (modalità browser)	✅	Menu File, Modifica, Visualizza, Oggetto, Testo, Disponi; Tauri usa menu nativi
Strumenti IA	🟡	90+ strumenti via Anthropic, OpenAI, Google AI, OpenRouter + server MCP; nessuna immagine generata da IA o ricerca IA ancora

Livelli e forme

Funzionalità	Stato	Note
Strumenti forma (Rettangolo, Ellisse, Linea, Poligono, Stella)	✅	Tutti i tipi di forma base; lati poligono e raggio interno stella configurabili
Frame	✅	Ritaglio contenuto, sistema di coordinate indipendente
Gruppi	✅	⌘G per raggruppare, ⇧⌘G per separare
Sezioni	✅	Pillole titolo, auto-adozione nodi sovrapposti, testo adattivo alla luminanza
Strumento arco (archi, semicerchi, anelli)	✅	arcData con angolo inizio/fine e raggio interno
Strumento matita (mano libera)	🔲	Strumento di disegno a mano libera di Figma
Maschere	🔲	Maschere di forma per ritagliare livelli
Tipi di livello e gerarchia	✅	17 tipi di nodo, Map piatta + albero genitore-figlio
Selezionare livelli	✅	Clic, shift-clic, selezione a marquee
Allineamento e posizione	✅	Posizione, rotazione, dimensioni nel pannello
Copiare e incollare oggetti	✅	Appunti standard + formato binario Kiwi di Figma
Scalare livelli proporzionalmente	🟡	Shift-ridimensiona mantiene proporzioni; nessuno strumento Scale dedicato (K)
Bloccare e sbloccare livelli	✅	⇧⌘L alterna blocco
Toggle visibilità livello	✅	Icona occhio nel pannello + scorciatoia ⇧⌘H
Rinominare livelli	✅	Doppio clic per rinomina inline; Invio/Esc/clic per confermare
Porta in primo piano / Invia in fondo	✅	Scorciatoie ] e [; anche nel menu contestuale
Sposta a pagina	✅	Spostare nodi tra pagine tramite menu contestuale
Vincoli (ridimensionamento responsivo)	🔲	Fissare bordi/centro per comportamento resize genitore
Selezione intelligente (distribuire/allineare)	🔲	Spaziare e allineare uniformemente
Guide di layout (colonne, righe, griglia)	🔲	Guide colonna/riga/griglia sui frame
Misurare distanze tra livelli	🔲	Alt-hover per mostrare distanze
Modificare oggetti in blocco	✅	Pannello multi-selezione: valori condivisi normali, valori diversi mostrano "Mixed"
Identificare oggetti corrispondenti	🔲	Trovare livelli simili
Copiare/incollare proprietà	🔲	Copiare riempimento/contorno/effetti tra livelli
Relazioni genitore-figlio	✅	Gerarchia completa con parentIndex, ri-parentamento per trascinamento

Strumenti vettoriali

Funzionalità	Stato	Note
Reti vettoriali	✅	Modello compatibile Figma, non percorsi semplici
Strumento penna	✅	Punti angolari, curve di Bézier, percorsi aperti/chiusi
Modificare livelli vettoriali	🟡	Creazione funziona; modifica avanzata vertici limitata
Operazioni booleane (Unione, Sottrazione, Intersezione, Esclusione)	🔲	Combinare forme con operazioni booleane
Appiattire livelli	🔲	Unire percorsi vettoriali
Convertire contorni in percorsi	🔲	Comando Outline Stroke
Convertire testo in percorsi	🔲	Appiattire testo in contorni vettoriali
Strumento shape builder	🔲	Strumento booleano interattivo
Offset percorso	🔲	Inset/outset di un percorso vettoriale
Semplificare percorso	🔲	Ridurre numero punti vettoriali

Testo e tipografia

Funzionalità	Stato	Note
Strumento testo e modifica inline	✅	Modifica nativa sul canvas, textarea phantom, style run (⌘B / I / U, pulsante S)
Rendering testo (Paragraph API)	✅	CanvasKit Paragraph per shaping, interruzione riga, metriche
Caricamento font (font di sistema)	✅	Inter default, font-kit in Tauri con cache OnceLock, queryLocalFonts nel browser
Famiglia e peso font	✅	FontPicker con scroll virtuale, ricerca, anteprima CSS
Dimensione font e altezza riga	✅	Modificabile nella sezione tipografia
Allineamento testo	🟡	Allineamento base; Figma ha allineamento verticale e modi auto-larghezza/altezza
Stili di testo	🟡	Grassetto/corsivo/sottolineato/barrato per selezione; nessun preset riutilizzabile ancora
Modi ridimensionamento testo	🔲	Modi auto-larghezza, auto-altezza, dimensione-fissa di Figma
Liste puntate e numerate	🔲	Formattazione liste nel testo
Link nel testo	🔲	Iperlink nel contenuto testo
Emoji e simboli intelligenti	🔲	Rendering emoji e caratteri speciali
Funzionalità OpenType	🔲	Legature, alternative stilistiche, cifre tabulari
Font variabili	🔲	Assi font regolabili (peso, larghezza, inclinazione)
Supporto testo CJK	🔲	Rendering testo cinese, giapponese, coreano
Supporto testo RTL	🔲	Layout testo da destra a sinistra
Font icone	🔲	Gestione speciale per glifi font icone

Colore, gradienti e immagini

Funzionalità	Stato	Note
Selettore colore (HSV)	✅	Quadrato HSV, slider tonalità, slider alfa, input hex
Riempimenti solidi	✅	Colore hex con opacità
Gradiente lineare	✅	Stop gradiente, maniglie di trasformazione
Gradiente radiale	✅	Rendering via shader CanvasKit
Gradiente angolare	✅	Supporto gradiente sweep/conico
Gradiente diamante	✅	Gradiente diamante a quattro punti
Riempimenti immagine	✅	Decodificati da dati blob con modi scala (fill, fit, crop, tile)
Riempimenti pattern	🔲	Riempimenti immagine/pattern ripetitivi
Modi fusione	🔲	Modi fusione livello e riempimento (multiply, screen, overlay, ecc.)
Aggiungere immagini e video	🟡	Riempimenti immagine renderizzati; nessun import drag-and-drop né supporto video
Regolazione proprietà immagine	🔲	Esposizione, contrasto, saturazione, ecc.
Ritagliare un'immagine	🔲	Ritaglio interattivo immagini
Strumento contagocce	🔲	Campionare colori dal canvas
Modifica colore in selezione mista	🔲	Regolare colori in selezione eterogenea
Modelli colore (RGB, HSL, HSB, Hex)	🟡	HSV + Hex nel selettore; nessun toggle modo HSL o RGB

Effetti e proprietà

Funzionalità	Stato	Note
Ombra portata	✅	Offset, raggio sfocatura, colore via filtri CanvasKit
Ombra interna	✅	Effetto ombra inset
Sfocatura livello	✅	Sfocatura gaussiana sul livello
Sfocatura sfondo	✅	Sfocare contenuto dietro il livello
Sfocatura primo piano	✅	Sfocatura in primo piano
Spessore contorno	✅	Configurabile nel pannello proprietà
Estremità contorno (round, square, arrow)	✅	NONE, ROUND, SQUARE, ARROW_LINES, ARROW_EQUILATERAL
Giunzione contorno (miter, bevel, round)	✅	Tutti e tre i tipi di giunzione
Pattern tratteggio	✅	Pattern contorno dash-on/dash-off
Raggio angolo	✅	Raggio uniforme e per angolo con toggle indipendente
Smussatura angolo (stile iOS)	🔲	Arrotondamento continuo degli angoli di Figma
Riempimenti/contorni multipli per livello	🔲	Figma consente di impilare riempimenti e contorni

Auto Layout

Funzionalità	Stato	Note
Flusso orizzontale e verticale	✅	Motore flexbox Yoga WASM
Toggle auto layout (⇧A)	✅	Toggle su frame o avvolgi selezione
Gap (spaziatura tra figli)	✅	Configurabile nel pannello proprietà
Padding (uniforme e per lato)	✅	Tutti e quattro i lati indipendentemente
Justify content	✅	Start, center, end, space-between
Align items	✅	Start, center, end, stretch
Dimensionamento figli (fisso, riempimento, adatta)	✅	Modi dimensionamento per figlio
Wrap	✅	Flex wrap per layout multi-riga
Flusso auto layout griglia	✅	CSS Grid tramite fork Yoga — track colonne/righe, gap, span
Flussi combinati (annidati)	✅	Frame auto-layout annidati con direzioni diverse
Riordinare trascinando in auto layout	✅	Indicatore visivo di inserimento
Larghezza/altezza min e max	🔲	Figma supporta vincoli min/max

Componenti e sistemi di design

Funzionalità	Stato	Note
Creare componenti	🟡	⌥⌘K crea da frame/gruppo; nessuna UI proprietà componente ancora
Set di componenti	🟡	⇧⌘K combina componenti; bordo tratteggiato viola; nessuna modifica proprietà variante
Istanze di componenti	🟡	Creare istanza dal menu contestuale; sync in tempo reale; nessuna UI modifica override
Varianti	🔲	Cambio variante e selezione per proprietà
Proprietà componente	🔲	Proprietà booleane, testo, scambio istanza
Propagazione override	✅	Modifiche al componente principale propagate; override preservati
Variabili (colore, numero, stringa, booleano)	🟡	COLOR con UI completa; FLOAT/STRING/BOOLEAN definiti senza UI di modifica
Collezioni e modi variabili	🟡	Collezioni, modi, cambio activeMode funzionano; nessuna UI tematizzazione
Stili (colore, testo, effetto, layout)	🔲	Preset stile riutilizzabili nominati
Librerie (pubblicare, condividere, aggiornare)	🔲	Librerie condivise componenti/stili
Staccare istanza	✅	⌥⌘B converte istanza in frame
Vai al componente principale	✅	Navigare al componente sorgente, cross-page

Prototipazione

Funzionalità	Stato	Note
Connessioni prototipo	🔲	Pianificato per Fase 6
Trigger (clic, hover, trascinamento, ecc.)	🔲	Pianificato per Fase 6
Azioni (navigare, overlay, scroll, ecc.)	🔲	Pianificato per Fase 6
Animazioni e transizioni	🔲	Pianificato per Fase 6
Smart animate	🔲	Auto-animare livelli corrispondenti
Overlay	🔲	Prototipazione modale/popover
Comportamento scroll e overflow	🔲	Frame scrollabili nei prototipi
Flussi prototipo	🔲	Punti di partenza nominati
Variabili nei prototipi	🔲	Logica condizionale con variabili
Easing e animazioni spring	🔲	Curve di animazione personalizzate
Presentare e riprodurre prototipi	🔲	Visualizzatore prototipo a schermo intero

Import e export

Funzionalità	Stato	Note
Import file .fig	✅	Codec Kiwi completo: 194 definizioni, ~390 campi per NodeChange
Export file .fig	✅	Codifica Kiwi + compressione Zstd + generazione miniatura
Salva / Salva con nome	✅	⌘S / ⇧⌘S; dialoghi nativi (Tauri), File System Access API (Chrome/Edge), download fallback (Safari)
Appunti Figma (incolla)	✅	Decodificare binario Kiwi dagli appunti Figma
Appunti Figma (copia)	✅	Codificare binario Kiwi leggibile da Figma
Import file Sketch	🔲	Parsing file .sketch
Export immagine/SVG	🟡	PNG/JPG/WEBP con selettore scala e anteprima; WEBP/SVG export ✅; PDF export 🔲
Cronologia versioni	🔲	Sfogliare e ripristinare versioni precedenti
Copiare asset tra strumenti	🟡	Appunti Figma funzionano; Copia come testo/SVG/PNG/JSX

API plugin e scripting

Funzionalità	Stato	Note
Comando eval con Figma Plugin API	✅	Esecuzione headless JavaScript con oggetto globale figma compatibile

Collaborazione e modalità sviluppatore

Funzionalità	Stato	Note
Commenti (fissare, thread, risolvere)	🔲	Pianificato per Fase 6
Multiplayer in tempo reale	✅	P2P via Trystero + Yjs CRDT, cursori, modalità segui; senza server
Chat al cursore	🔲	Bolle chat inline al cursore
Branching e merging	🔲	Branch di versione per file di design
Modalità sviluppatore (ispezione)	🟡	Tab Codice mostra JSX; nessuna proprietà CSS né spec di handoff
Code Connect	🔲	Collegare componenti design al codice
Frammenti di codice	🟡	Export JSX con evidenziazione e copia; nessun frammento CSS/Swift/Kotlin
Figma for VS Code	🔲	Integrazione plugin editor
Server MCP	✅	@open-pencil/mcp con trasporti stdio + HTTP e oltre 90 strumenti, incluse le operazioni sui file
Strumenti CLI	✅	CLI headless: info, tree, find, export, analyze, node, pages, variables, eval; server MCP

Figma Draw

Funzionalità	Stato	Note
Strumenti illustrazione	🔲	Strumenti di disegno specializzati di Figma Draw
Trasformazioni pattern	🔲	Creare pattern ripetitivi con trasformazioni