In questa lezione parleremo di una modalità di lavoro molto utile per lavorare sulle interfacce Web, nonché sulla struttura wireframe di un sito: i simboli.
Sketch offre la possibilità di trasformare in simboli tutti gli oggetti che utilizziamo sul nostro foglio di lavoro. Quando un oggetto viene trasformato in simbolo, diventa un'unica istanza attraverso tutto il documento. In questo modo, se l'oggetto è stato inserito più volte all'interno del documento stesso, basterà modificare quell'unica istanza per ottenere un istantaneo cambiamento per tutte le ripetizioni disponibili.
Il procedimento e le funzionalità potrebbero apparire più chiare grazie a un esempio. In Figura 1 viene mostrata l'interfaccia di una pagina web, più precisamente di un blog in modalità mobile.
Come possiamo notare, si tratta di un'intestazione con la barra di stato mobile, sotto la quale troviamo la barra di navigazione, il logo del sito e l'icona del menu. I contenuti di questa pagina riassumono alcuni ipotetici post e sono composti da un'immagine, sulla quale è possibile individuare l'avatar dell’utente, il suo nome e i dati temporali della pubblicazione.
Trattandosi di un'interfaccia schematica, anche detta wireframe, è stato possibile copiare lo stesso contenuto più volte. Senza i simboli, avremmo dovuto copiare e duplicare ogni elemento della grafica o, ancora, ricostruire ogni pagina da capo. Una modalità comunque valida, ma ovviamente dalle maggiori richieste di tempo. Se osserviamo il pannello Livelli in Figura 2, possiamo notare come alcune icone siano azzurre mentre altre viola: queste ultime individuano i simboli.
Ma come è possibile verificare quali siano gli oggetti precedentemente trasformati in simboli? Selezionando la voce Symbols del menu Insert, troviamo l'opzione Organize Symbols: si aprirà una finestra di dialogo con la lista di tutti i nostri simboli, come mostrato in Figura 3.
Per capire come vengano creati gli oggetti-simbolo, torniamo indietro di qualche passaggio nella costruzione della nostra interfaccia. Prendiamo, ad esempio, il testo sotto al post denominato Time Stamp: è quel testo che descrive quando è stato pubblicato il contenuto e quante volte è stato visualizzato, come evidenziato in Figura 4.
Per trasformare questo oggetto in un simbolo, dobbiamo selezionare il tasto Create Symbol, posizionato sulla barra superiore. Una volta eseguita la trasformazione notiamo, come illustrato in Figura 5, come il livello abbia cambiato colore. A destra, nel pannello Inspector, comparirà inoltre un campo modificabile dove inserire il nome del simbolo appena creato.
A questo punto, ogni volta che vorremo inserire questo simbolo, basterà richiamarlo dalla voce Symbol di Insert, come spiegato in Figura 6.
È naturalmente anche possibile slegare un oggetto dalla sua istanza per modificarlo singolarmente. È quanto si dimostra in Figura 7: per cambiare il testo all'interno del simbolo, abbiamo dovuto separarlo dalla sua istanza, altrimenti tutti gli oggetti del documento collegati avrebbero subito la stessa modifica.
