Due pagine di appuntamenti sembrano ordinate. Entrambe hanno un campo data e un pulsante Salva. Nella prima, una finestra di dialogo modifica l'appuntamento; nella seconda, si apre una pagina separata. Quale versione è migliore? Uno screenshot aiuta con colori e spaziature. Mostra solo in misura limitata se le persone comprendono il flusso.
Il 15 ottobre 2026 Figma ha aperto i Code Layers in versione beta. I prototipi supportati possono essere sviluppati ulteriormente con il codice e confrontati sul canvas di progettazione condiviso; il codice esistente può essere importato alle condizioni documentate. Dal punto di vista redazionale, l'aspetto interessante è lavorare insieme sul comportamento. Un prototipo diventa così oggetto di una decisione invece di mostrare soltanto il suo risultato attraente.
Prima lo stesso compito, poi interfacce diverse
Il nostro esempio è un evento di un'associazione. La persona deve modificare la data, leggere la condizione di partecipazione e poi salvare oppure annullare. Entrambe le versioni ricevono lo stesso titolo, la stessa data e la stessa nota più lunga. Se una versione mostrasse solo un breve titolo segnaposto, il confronto sarebbe già falsato.
La finestra di dialogo mantiene la panoramica degli appuntamenti sullo sfondo. Una pagina di modifica separata offre più spazio. Sono decisioni di design diverse, non giudizi di qualità. Diventa interessante nelle transizioni: dove si trova la persona dopo aver salvato? Che cosa succede ai dati che ha iniziato a inserire quando annulla? Quali informazioni restano visibili durante la modifica?
Un modello di stati rende il comportamento qualcosa di cui si può discutere
Descrivi prima il flusso senza sintassi di programmazione. L'appuntamento è visibile. Modifica apre un campo di inserimento. Un inserimento non valido porta a una spiegazione e i dati validi vengono mantenuti. Salva mostra lo stato confermato. Annulla riporta allo stato invariato. Questi sono requisiti per il nostro esempio, non una promessa sulle funzioni integrate di Figma.
View → Edit → Input
Input → valid → Save → Confirmation
Input → invalid → Hint + input kept
Input → Cancel → original viewCon questo piccolo modello ogni versione può essere esaminata in modo mirato. Forse la finestra di dialogo ha un aspetto eccellente ma perde il testo di aiuto quando si verifica un errore. Forse la pagina separata è meno elegante ma rende più comprensibile il percorso di ritorno. La valutazione riguarda allora il comportamento osservabile, non una preferenza generica per le finestre di dialogo.
Il feedback ha bisogno di un punto di riferimento condiviso
Un commento utile recita: «Dopo aver annullato, non riuscivo a capire se la mia nuova data fosse stata salvata». Indica il punto, l'azione e l'incertezza. «Non sembra abbastanza moderno», invece, non fornisce ancora una domanda su cui qualcuno possa lavorare. Quando bozze e commenti stanno sullo stesso canvas, il collegamento con la versione esaminata può essere preservato.
Per ogni modifica, annota quale incertezza dovrebbe eliminare. Ad esempio, modifica prima la conferma, invece di cambiare contemporaneamente carattere tipografico, colori e navigazione. In questo modo è più facile capire perché una seconda versione viene percepita in modo diverso. Non si tratta di uno studio di usabilità controllato, ma è una disciplina di lavoro sensata per la fase di progettazione.
La decisione è trasferibile; il codice non lo è automaticamente
Alla fine dovrebbe esserci una breve nota di consegna: la versione preferita, il compito che supporta, gli stati rilevanti e le domande ancora aperte. Una bozza interattiva con dati di esempio non è ancora una vera piattaforma di prenotazione. Accesso, dati memorizzati e permessi effettivi devono funzionare separatamente in un'applicazione.
Per una piccola aggiunta lato client a una pagina KENJTEC, la decisione può poi essere implementata con il tuo HTML, CSS e JavaScript. Il KENJTEC WebSiteBuilder ai offre a questo scopo una modalità sviluppatore, con un'anteprima isolata e un proprio passaggio di pubblicazione del codice. Il componente rilevante lo trasferisci tu; questo non significa un'importazione da Figma né l'hosting per qualsiasi applicazione a tua scelta.
Secondo lo stato documentato, i Code Layers restano in beta. Disponibilità, progetti di partenza supportati e condizioni andrebbero verificati di nuovo prima di qualsiasi guida pratica specifica. Il metodo, però, è valido indipendentemente dallo strumento: non limitarti a confrontare due schermate attraenti. Confronta due risposte tracciabili alla stessa domanda su come si usa qualcosa.
Fonti e stato
Ricerca e documentazione aggiornate al 25 ottobre 2026. Progettare insieme con i code layers sul canvas.
