Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Lavorare con i simboli

Le modalità per trasformare un oggetto in un simbolo, affinché possa essere facilmente trasformato in Sketch per tutte le ripetizioni nel documento.
Le modalità per trasformare un oggetto in un simbolo, affinché possa essere facilmente trasformato in Sketch per tutte le ripetizioni nel documento.
Link copiato negli appunti

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.

Figura 1. UI di un blog in modalità mobile (click per ingrandire)

UI 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.

Figura 2. Individuare i simboli nel pannello Livelli (click per ingrandire)

Individuare i simboli nel pannello Livelli

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.

Figura 3. Organizzare i simboli (click per ingrandire)

Organizzare i simboli

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.

Figura 4. Selezione dell'oggetto da trasformare in simbolo (click per ingrandire)

Selezione dell'oggetto da trasformare in simbolo

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.

Figura 5. Creazione di un simbolo (click per ingrandire)

Creazione di un simbolo

A questo punto, ogni volta che vorremo inserire questo simbolo, basterà richiamarlo dalla voce Symbol di Insert, come spiegato in Figura 6.

Figura 6. Inserire un simbolo sul foglio (click per ingrandire)

Inserire un simbolo sul foglio

È 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.

Figura 7. Separare un oggetto dalla sua istanza simbolo (click per ingrandire)

Separare un oggetto dalla sua istanza simbolo


Ti consigliamo anche