Figma Make editor visuale: proprietà e annotazioni
Figma Make editor visuale diventa più preciso: dal 30 luglio 2026 il prodotto integra un pannello delle proprietà e annotazioni contestuali per intervenire sui prototipi e sul codice senza affidare ogni modifica a un prompt generico. Per designer, team di prodotto e sviluppatori la novità riduce la distanza tra intenzione grafica, istruzione all’agente e risultato implementato.
Secondo l’annuncio ufficiale di Figma, le due funzioni sono in distribuzione su tutti i piani e posti di Figma Make. Non sono però equivalenti: il pannello serve alle modifiche visuali determinate, mentre le annotazioni descrivono comportamenti e relazioni che richiedono più contesto.
Come funziona il nuovo Figma Make editor visuale
Selezionando un elemento è possibile regolare direttamente spaziatura, tipografia, layout, opacità, bordi, ordine e altre proprietà. L’interfaccia mostra anche l’albero DOM, trattandolo come un pannello livelli applicato al codice. Le modifiche vengono prima raccolte nel campo del prompt: il team può rivederle, scartarle oppure applicarle in un secondo momento.
Questo passaggio è importante perché separa l’esplorazione dalla modifica effettiva. Figma dichiara inoltre che gli interventi visuali, avendo un bersaglio preciso, usano meno token rispetto alla descrizione testuale dello stesso cambiamento. Il consumo dei crediti avviene quando le modifiche vengono applicate e il file viene aggiornato.
Pannello proprietà o annotazioni: quale scegliere
Il pannello delle proprietà è adatto quando il risultato può essere espresso come valore o regola visuale: aumentare il padding, cambiare il peso del carattere, riordinare elementi o aggiornare tutte le istanze di uno stesso componente. In questi casi il controllo diretto è più verificabile di una richiesta formulata soltanto a parole.
Le annotazioni servono invece quando la modifica coinvolge una logica. Il designer può indicare uno o più elementi sul canvas e chiedere, per esempio, un effetto al passaggio del mouse, un’animazione temporizzata o l’apertura di una navigazione. L’agente riceve così posizione e intenzione nello stesso contesto, evitando riferimenti ambigui come “il secondo pulsante a destra”.
- Usa le proprietà per misure, colori, tipografia, posizione e stile.
- Usa le annotazioni per interazioni, stati, transizioni e comportamenti.
- Usa il prompt generale per obiettivi più ampi che richiedono una proposta.
Cosa cambia nel passaggio dal design al codice
Il valore non sta soltanto nella velocità. Un flusso design-to-code diventa utile quando conserva token, componenti e decisioni, consentendo al team tecnico di controllare le modifiche. Figma precisa che il pannello utilizza i token di colore e tipografia presenti nella base di codice; il collegamento con i componenti di Figma Design tramite Code Connect è indicato come evoluzione successiva.
La direzione era già emersa con il supporto al codice locale in Figma Make: modifiche visuali, rami Git, commit e pull request inseriscono l’esplorazione del designer dentro un processo revisionabile. Anche le release note di Figma mostrano la stessa convergenza, con schermate derivate dal codice che mantengono variabili e auto layout invece di rientrare nel canvas come elementi scollegati.
Come testare Figma Make editor visuale in team
Prima di usare la funzione su un progetto importante conviene organizzare una prova limitata. Un test utile può seguire questa sequenza:
- scegliere un componente reale ma non critico, con stati e token già definiti;
- eseguire una modifica visuale tramite pannello proprietà;
- aggiungere un’annotazione per un comportamento interattivo;
- controllare differenze nel codice, riuso dei token e resa responsive;
- far revisionare il risultato a designer e sviluppatore prima del merge.
Le metriche più utili sono il tempo necessario, il numero di correzioni manuali, la coerenza con il design system e la leggibilità del codice prodotto. Non basta che la schermata “sembri giusta”: deve restare governabile, accessibile e manutenibile.
Limiti da considerare prima dell’adozione
Il pannello proprietà funziona soltanto con i nuovi design creati in Make; i file precedenti continuano a usare il vecchio strumento di modifica. Inoltre, la disponibilità della funzione non elimina la necessità di controllare responsive design, semantica HTML, accessibilità, dipendenze e qualità del repository.
La novità aggiorna il quadro già descritto nell’articolo su Figma Config 2025 e governance del prototipo: l’AI rende più fluido il passaggio tra canvas e codice, ma richiede regole più chiare su responsabilità, revisione e rilascio.
La scelta operativa è semplice: utilizzare l’editor visuale per rendere esplicite le decisioni, non per saltare i controlli. Se vuoi definire un flusso coerente tra identità visiva, UI, prototipazione e sviluppo, puoi contattarmi per una valutazione del progetto.