5 strategie per l'utilizzo dei simboli in Sketch: per team e progetti in crescita

I simboli sono la funzione più potente di Sketch.

I simboli hanno un potenziale - potenziale per il collegamento, la sincronizzazione, la condivisione, la fusione, il ridimensionamento, l'ottimizzazione, l'annidamento e, soprattutto, la semplice prototipazione. Se mi imbatto in uno strumento di prototipazione che non ha la funzionalità dei simboli, lo sconto quasi del tutto.

I simboli sono elementi di design flessibili collegati a una fonte modificabile, altrimenti nota come singola fonte di verità. In breve, sono magici.

Questa è la magia dei simboli. Va bene se tutti i pezzi non fanno clic insieme per te: daremo uno sguardo più approfondito ai sistemi di simboli.

I simboli di Sketch non devono sopravvivere a te, ma dovrebbero essere in grado di crescere come fanno i tuoi progetti. Dovrebbero anche poter essere condivisi comodamente con gli altri. Ecco tre strategie per l'utilizzo dei simboli Sketch in modi scalabili e intuitivi.

1. Costruisci i simboli nel modo giusto

Costruisci bene i simboli e invecchiano bene. Non è divertente dover ricostruire un simbolo perché non lo hai reso abbastanza flessibile la prima volta, soprattutto quando l'hai usato in una dozzina di posti. Ecco alcuni suggerimenti per aiutare te e il tuo team a creare simboli che non necessitano di costanti rinnovamenti.

Inizia con le basi

Inizia con i componenti di base che puoi. Tutto dovrebbe iniziare a livello atomico. Quando i tuoi timbri sono modulari, si adattano meglio e sono più facili da lavorare.

Simboli Nest

Puoi annidare simboli all'interno di altri simboli per rendere la prototipazione semplice e flessibile. L'annidamento avviene quando si inserisce un timbro in un timbro più grande. E con una funzione nota come sostituzioni, sarai in grado di scambiare e personalizzare le impressioni del timbro in una dozzina di posti diversi in una dozzina di modi diversi.

L'annidamento ti costringerà a pensare a livelli. I simboli di livello uno potrebbero essere icone e blocchi di testo, i simboli di livello due potrebbero essere pulsanti ed elenchi e simboli di livello tre potrebbero essere interi pannelli e pop-up. I bit, i pezzi e i livelli appariranno diversi a seconda della complessità del progetto, ma il punto di annidamento dei simboli è sempre lo stesso. Per sostituire elementi a livelli più alti.

Mentre un simbolo funziona come un timbro, un'istanza di un simbolo funziona come l'impressione di un timbro. E poiché i francobolli sono magici, le impressioni dallo stesso francobollo possono essere diverse. Queste variazioni sono chiamate sostituzioni. Se il tuo grande francobollo ha al suo interno un timbro dat, puoi usare le sostituzioni per fare un'impressione dire il 1 ° giugno e un'altra dire il 22 dicembre. Allo stesso modo con un timbro frase modificabile, un'impressione può dire RICEVUTA e un'altra può dire PAGATO. Anche con le sostituzioni, le impressioni sono ancora legate al timbro magico. Se cambi l'inchiostro del timbro datato in rosso, sia il 1 ° giugno che il 22 dicembre diventano rossi! ‍ ​​Magia.

Ecco le opzioni di override per un simbolo pulsante onnipotente. Con questo pulsante è possibile ignorare A) il simbolo dello stile del testo nidificato, B) il testo stesso e C) la forma del pulsante e D) lo stile di riempimento.

Ma quanto lontano dovrebbe arrivare l'annidamento? Quanti simboli all'interno dei simboli sono necessari per avere un sistema di progettazione intelligente? La risposta è relativa a ciascun progetto. Una buona regola empirica è avere semplici fonti di verità per i tuoi simboli, ma non avere opzioni schiaccianti o inutili. Ad esempio, per una potente libreria di design che verrà utilizzata per moltissimi progetti diversi, avrai bisogno di un simbolo di pulsante come fonte di verità, con simboli nidificati per stili di forma, riempimento colore, stato e testo. Se stai costruendo wireframe di base, non impazzire. Costruisci il simbolo del tuo pulsante con una o due sostituzioni di cui hai bisogno.

La Legge di Tesler, nota anche come La legge di conservazione della complessità, afferma che per ogni sistema esiste una certa complessità che non può essere ridotta.
(Leggi di UX)

Sfrutta gli stili di testo come simboli

Nella versione corrente di Sketch non puoi sovrascrivere uno stile di testo in un simbolo. Quando vuoi cambiare lo stile del testo nel tuo pulsante preferito da cta-red-bold a cta-blue-italic, fa male! Ma ci sono buone notizie. C'è una soluzione alternativa.

Stiamo progettando un'app di messaggistica, ad esempio. L'interfaccia utente richiede un cassetto in cui le conversazioni possano essere visualizzate in nero, rosso o grigio a seconda della disponibilità di un amico:

un. Crea un simbolo con testo rosso, un simbolo con testo nero e un simbolo con testo grigio. La tavola da disegno di ogni simbolo deve avere le stesse dimensioni.

b. Crea un simbolo per il cassetto delle conversazioni.

c. Nidificare i simboli del nome, dal passaggio 1, all'interno del simbolo del cassetto. Fallo tutte le volte che è necessario fino a quando non hai un elenco:

Puoi vedere i simboli

d. Ora, se porto il simbolo del cassetto nel mio prototipo a livello di pagina, posso sovrascrivere gli stili di testo nel pannello delle proprietà:

Una volta che il simbolo è posizionato su una pagina, le sue opzioni di sostituzione vengono visualizzate nel pannello di ispezione a destra.

Disporre i livelli

All'interno di simboli complessi, vedi: simboli nidificati, assicurati di disporre i livelli in modo intuitivo. Il pannello di sinistra della finestra è dove puoi trovare e organizzare i tuoi livelli. Metti gli elementi più in alto in alto e gli elementi più in basso in basso. Dai ai tuoi simboli nidificati nomi semplici come "Testo qui" e "Icona" anziché "Icona 10 Copia della copia 2."

L'ordine dei livelli determina la disposizione delle sostituzioni. Inoltre, quando assegni un nome alle caselle di testo e ai simboli, tieni presente che i loro nomi vengono visualizzati accanto alle opzioni di sostituzione.

Se sei intelligente, le tue opzioni di sostituzione saranno così semplici che chiunque potrebbe usarle. Un sogno per tanti team di progettazione.

Anche la criticità nell'organizzare i livelli li sta bloccando. A un livello bloccato non possono essere assegnate sostituzioni. Ad esempio, il simbolo della barra di navigazione potrebbe contenere una riga di testo che non deve essere modificata; blocca il livello con ⌘⇧L e verrà nascosto dalle opzioni di sostituzione. Sii un buon curatore portando via la personalizzazione dove non è necessaria.

Usa le opzioni dei simboli per ridimensionare facilmente

Il pannello di ispezione sulla destra presenta molti utili vincoli per la costruzione di simboli ridimensionabili. Usali. Dopotutto, vuoi che le tue impressioni sui francobolli appaiano bene su qualsiasi formato di carta.

I vincoli di ridimensionamento sono qui per aiutarti. Li troverai nel pannello di ispezione quando hai selezionato un oggetto o un simbolo.

Investi tempo nel comportamento di ridimensionamento intelligente di un simbolo - Collegamento fissato a gennaio 2018. Usa i vincoli di ridimensionamento per fissare gli elementi su uno o più lati del loro contenitore, correggere la larghezza di un elemento e / o l'altezza di un elemento. Alcune cose dovrebbero essere allungate, alcune cose dovrebbero rimanere nell'angolo; i vincoli di ridimensionamento indicano a un'istanza di simbolo come comportarsi quando cambiano le sue dimensioni.

https://www.sketchapp.com/images/pages/docs/03-layer-basics/video/after@2x.mp4 - Link risolto gennaio 2018

Nota n. 1: se si desidera mantenere un'imbottitura coerente durante il ridimensionamento di un simbolo, fissare gli oggetti su tutti e quattro i bordi. (Fonte video)

Nota n. 2: i simboli verranno ridimensionati meglio se li si progetta in modo condensato. Dopotutto, un simbolo è più facile da espandere che da comprimere.

I simboli contenenti immagini possono essere ridimensionati facilmente se impostati come riempimento. Invece di inserire un'immagine (Inserisci> Immagine), è necessario utilizzare un riempimento a motivo. Ciò significa innanzitutto creare la forma del contenitore (Inserisci> Forma), selezionando "Riempimento motivo" nella sezione di riempimento della finestra di ispezione, quindi scegliere l'immagine come motivo. Ammetto che potrebbe sembrare rotonda o controintuitiva, ma la tecnica di riempimento mantiene l'integrità dell'immagine quando viene ridimensionata, in definitiva per evitare distorsioni imbarazzanti.

Puoi specificare come vuoi che le immagini riempiano la forma: Riempi, Adatta, Allunga o Affianca.L'immagine a sinistra è un riempimento a motivo per una forma e l'immagine a destra è un'immagine standard. Li ho allungati verticalmente per mostrare come funziona il riempimento del motivo. Lezione n. 1: non allungare i cuccioli.

2. Organizza i tuoi simboli

Essere organizzati è fondamentale. Se la tua collezione di francobolli diventa grande, hai bisogno di un organizzatore da scrivania. Se la tua collezione di francobolli diventa più grande, dovresti procurarti dei cassetti. Vuoi che i tuoi francobolli siano così organizzati che quando sei in vacanza a Bali un tirocinante può sedersi alla tua scrivania e trovare il francobollo che sta cercando. Ecco alcuni consigli per questo.

Dai un nome ai tuoi simboli

Con i simboli di Sketch, c'è molto in un nome. Un nome non specifica solo cos'è un simbolo, ma specifica anche dove si trova un simbolo; un simbolo chiamato button / primary avrà la cartella button come genitore.

Assegna un nome e organizza i tuoi simboli in modo coerente. Più importante che avere grandi nomi per le tue icone è avere i loro nomi sensati tra gli altri simboli nella tua libreria. Preferibilmente, dai un nome ai tuoi simboli per funzione piuttosto che per segnali visivi. Un segnale visivo come "blu" è soggetto a modifiche, mentre una funzione come "stato premuto" rimarrà per il lungo raggio.

Usa le sostituzioni di stile

Il tuo sistema di icone potrebbe avere una dozzina di varianti di colore, contorno o bordo, un possibile incubo per qualsiasi libreria di simboli. 20 icone nere significa ordinare 20 simboli. 20 icone in 12 colori significa ordinare 240 enormi simboli.

Fortunatamente, da Sketch 52, è possibile utilizzare le sostituzioni di stile e apportare facilmente modifiche ai simboli. È un'alternativa molto più bella alle schifezze che dovevamo fare in Sketch 51.

Fortunatamente, Jon Moore di UX Power Tools spiega come farlo.

Lo stile ha la precedenza in azione. (Preso in prestito dall'articolo di Jon)

Organizza i tuoi simboli visivamente, ovunque

La presentazione conta! Anche se hai un piccolo team di progettazione con aspettative relativamente basse, dovresti separare, raggruppare ed etichettare i simboli per renderli più facili da trovare per tutti.

Un posto per ogni simbolo e ogni simbolo al suo posto.

Metodo n. 1 per l'organizzazione dei simboli: ogni volta che si crea un simbolo, mantenere selezionata l'opzione Invia simbolo alla pagina "Simboli". Lascia che la Pagina dei simboli diventi confusa. Crea una nuova pagina con ⌘⇧N dove aggiungerai e organizzerai tutti i tuoi simboli.

Al designer Javier Cuello piace il metodo n. 1. A sinistra è la sua pagina dei simboli. A destra è la pagina in cui tiene insieme il suo atto. (Fonte immagine)

Metodo n. 2 per l'organizzazione dei simboli: organizza i tuoi simboli nella tua pagina dei simboli. È semplice! Scelgo di ordinare i miei simboli nella pagina Simboli, ed ecco un plugin che uso per aiutarmi a farlo rapidamente.

3. Condividi librerie di simboli

Ora che i tuoi francobolli sono ben realizzati, denominati in modo coerente e organizzati in modo intelligente, è tempo di condividerli. In un recente aggiornamento, Sketch ha aggiunto le librerie: una funzione per collegare, sincronizzare e condividere in modo intelligente i simboli di Sketch.

C'è comunque un problema se tu e un collega volete collegarvi alla stessa biblioteca: entrambi dovrete accedere allo stesso file nella stessa posizione. Puoi accedere allo stesso file tramite una cartella cloud condivisa o se hai un team come il mio che non lavora molto lontano dall'ufficio, imposta un'unità di rete condivisa.

Accedi alle tue preferenze, trovate utilizzando ⌘ o sotto "Schizzo" nel menu dell'applicazione per navigare verso le tue preferenze della libreria. Da lì puoi aggiungere una libreria da qualsiasi file di Sketch, purché contenga dei simboli. Le preferenze della libreria sono dove aggiungere il file condiviso. Se vuoi saperne di più sulle biblioteche, consulta la documentazione di Sketch.

Nota: uno scopo delle librerie di sketch è impedirti di modificare accidentalmente simboli condivisi con altri. Bene, Sketch vi presenterà un popover per confermare le modifiche ai simboli che tentate di fare; Sei sicuro di voler modificare il file sorgente? Oppure desideri scollegarlo e quindi modificare la libreria?

Se tu o un tuo compagno di squadra aggiorni una libreria condivisa, ti verrà data la possibilità di scegliere quali modifiche applicare ai file di Sketch collegati.

Mi sono imbattuto diverse volte nel plug-in Sketch di brand.ai ed è un'opzione di condivisione costosa che mi piace ignorare. È stato sviluppato come plug-in, prima che esistesse la funzionalità delle librerie di Sketch e progettato per risolvere lo stesso problema. Non è necessario raddoppiare. Inoltre, è stato recentemente acquisito da InVision e sarà integrato nel loro prossimo Design System Manager. Il DSM potrebbe essere una forte concorrenza per gli strumenti di prototipazione come Adobe XD, Framer e Sketch stesso. Fino ad allora, continua a condividere le tue librerie di Sketch. La tua squadra ti ringrazierà per questo.

4. Stabilire il controllo della versione

In un team di progettazione si corre il rischio di sovrascrivere i file o perdere traccia delle versioni dei file. Alcuni team risolvono questo problema usando GitHub per ramificare, unire e eseguire il commit di file Sketch. Poiché GitHub è una soluzione incentrata sugli sviluppatori, Elastic Projects ha creato Abstract, un plug-in di Sketch di terze parti che rende il controllo della versione più intuitivo per i progettisti.

Anche l'archiviazione cloud può aiutarti a controllare la versione. Dropbox mantiene ad esempio le istantanee di tutte le modifiche apportate a un documento entro 30 giorni. Al di là di questi 30 giorni, tuttavia, le modifiche non sono recuperabili se non si dispone di DropBox Business o Extended File Recovery. Esistono anche alcuni modi rotondi per controllare la versione con Google Drive.

5. Impara dai migliori

Il modo migliore per imparare un produttore di francobolli è imparare dai maestri di francobolli. Scavando nelle librerie di Sketch più popolari e / o complesse imparerai molti trucchi avanzati. In che modo il team Apple sovrappone i propri simboli? Come vengono annidati i simboli in un kit UI professionale? Ti consiglio di usare la tua barra di ricerca di Internet a portata di mano per cercare i file di Sketch top-secret come quello nelle Risorse di progettazione dell'interfaccia utente di iOS.

Forse stai pianificando di costruire qualcosa di complesso come un tavolo o un menu a discesa a più livelli. Whoah adesso! Rilassati, briccone! Cerca prima in giro. Controlla le risorse dell'app Sketch e vedi se qualcuno ha creato qualcosa di simile.

Prendere in prestito, prendere in prestito, prendere in prestito. E non dimenticare di provare le opzioni di sostituzione nei file che trovi.

Per chiudere, ecco alcuni file di schizzo di scelta pieni di simboli per scavare, separare e sperimentare:

  • Libreria di moduli di Davide Pisauri
  • Smart Button di Domenico Laricchia
  • Kit GUI di progettazione materiale Android 7.0 Nougat di Great Simple
  • Foglio adesivo design materiale di Google
  • Tavolo UI Kit di O / M Studio