Simboli nidificati di schizzo: come renderli personalizzati?

immagine realizzata dal Lead Interface Designer di Mind Studios Arsentiy

Il design non è una professione: è il modo di pensare, vivere e respirare. Ed era sempre più complesso di quanto lo sia ora - nella "prima era di Sketch". Ma qualche anno fa è stato consegnato Sketch, e tutti i designer hanno fatto seguire il corso "vettoriale" nel loro lavoro. Cosa c'è di così bello in Sketch? Cosa sono quei simboli di schizzo? Oltre a come creare simboli personalizzati in Sketch, questi argomenti verranno evidenziati in questo articolo, dall'esperienza che otteniamo in Mind Studios.

È un furto.

Sketch è stata fondata 7 anni fa, nel lontano 2010, da un'azienda olandese Bohemian Coding, eppure siamo così grati a coloro che hanno realizzato questo spiritoso strumento. La prima gloria e i primi riconoscimenti non tardarono ad arrivare (anche se non aveva ancora la funzione di creazione di simboli) - nel 2012 Sketch ha vinto il suo primo premio, l'Apple Design Award. Da quel momento, e nel corso di 6 anni, ha continuato ad evolversi con ogni aggiornamento e plug-in in arrivo, e la versione più recente di 46.2 ha molti miglioramenti (come la condivisione di file di Sketch Cloud, l'allineamento del testo e gli argomenti della guida ricercabili, mostrando articoli dalla documentazione online dell'app Sketch, insieme alla libreria di simboli Sketch aggiornata).

[Fonte: Sketchapp]

Al giorno d'oggi, la quantità di utenti felici di SketchApp ha superato i 500k. Perché i designer si attengono all'app Sketch? Dopo aver realizzato il mio sondaggio e dopo aver letto una dozzina di recensioni sull'app Sketch, ho tratto alcuni fatti supportati dall'affermazione sulle migliori pratiche:

• Sketch è uno strumento basato su vettori al 100%, che rende molto più semplice adattare il tuo design a diverse dimensioni dello schermo retina/non retina.

• I progetti realizzati in Sketch sono i cosiddetti "frontend-friendly", il che significa che tutte le proprietà/entità/simboli in-design sono disponibili su CSS.

• Sketch ha un modo conveniente per esportare le risorse, con una funzione di "Esporta tutto", a differenza della fastidiosa esportazione di Photoshop.

• Sketch ha un'ampia varietà di plugin dandy tra cui scegliere che ti aiutano a integrare i dati nel tuo design.

• Schizzo consente di creare simboli di colore e modificarli in seguito

Le parole più legate a Sketch che ho avuto il piacere di incontrare sono state "flessibile", "facile" e "app 3 in 1", che dimostrano che la gran parte del mercato è già occupata da questa app basata su iOS .
Oltre ai fantastici plugin, ha anche molti strumenti ed elementi utili, uno dei quali sono i simboli : la creazione di nuovi personalizzati e l'opzione di modifica dei simboli.

Simbolismo nello schizzo.

Qualsiasi elemento di navigazione (un'icona, un campo di testo, widget, ecc.) è un elemento di controllo o un elemento di interazione. Inoltre, in Sketch ogni elemento può essere impostato in modo flessibile. E ogni elemento ha override simboli di schizzo, che possono essere di due tipi: quello padre e quello figlio; se tutti i simboli annidati vengono messi insieme, il simbolo genitore eredita tutte le caratteristiche che hanno quelli figli. Grazie a questa funzione ora puoi creare simboli nidificati e simboli personalizzati dell'app Sketch (come in Material Design), i componenti dell'interfaccia, ad esempio icone, simboli di pulsanti.

Un pulsante sarebbe un ottimo esempio di simboli personalizzati di Sketch, poiché ha un numero di parametri che possono essere modificati contemporaneamente, dallo stile del testo fino allo stato del pulsante. Durante la creazione di simboli annidati possiamo giocare con i pulsanti, con le loro forme, colori, stati (on/off), a seconda delle esigenze che siamo disposti a soddisfare. Creiamo un file di schizzo separato dal quadrato uno.

Se scavi più a fondo, ogni simbolo è una combinazione di alcuni altri simboli nidificati e contando sul grado dei simboli incorporati presenti puoi vedere i parametri di un elemento. Ad esempio, un simbolo di testo potrebbe essere attivo o disattivato, di colore diverso, e così via con parametri diversi. Tutto ciò contribuisce a un termine generale di struttura dei pulsanti.

Leggi qui sui design-killer

Mattone su mattone.

Inoltre, possiamo aggiungere un'icona e un simbolo (ne usi uno per caricare le icone). Ogni icona è un numero di simboli organizzati automaticamente, situati in una determinata cartella; questo ci aiuta a estrarre le icone di cui abbiamo bisogno per ogni stile specifico. Poiché hanno un certo grado di incorporamento del nome, possiamo semplicemente chiamarlo ed estrarre tutte le icone allegate, così come il contenitore del pulsante.

Un contenitore in-button è un simbolo con 3 parametri: stato, forma e colore. Rappresenta un insieme pieno di stati, forme e colori del pulsante; riempimento del pulsante (stato e colore), quindi, in generale, modella il pulsante. Il contenitore è anche impossibile senza un livello maschera che incornici tutti quegli elementi.

La maschera a forma di pulsante è una forma vettoriale e quando applichiamo la maschera per il nostro elemento, viene creato un altro contenitore, con la stessa forma, colore e stato del primo.

Il paradosso della nidificazione.

“I simboli Nested Sketch potrebbero essere definiti uno strumento controverso; semplificano e complicano la vita del tuo designer allo stesso tempo.”

Una volta inserito un simbolo dalla libreria di sostituzioni di simboli nidificati, si aggiungono alcune informazioni (stato, colore, forma, riempimento) e lo si salva così com'è ora. Le possibilità sono infinite: puoi continuare a creare simboli icona quanti ne consente la tua creatività. Ci sono così tante sostituzioni di simboli nidificati di Sketch, così tanti gradi che il tuo pulsante potrebbe letteralmente ricordare un albero di Natale tutto vestito.

Le sostituzioni nidificate in Sketch potrebbero essere definite uno strumento controverso; semplificano e complicano la vita del tuo designer allo stesso tempo. Le complicazioni iniziano quando crei un componente multi-optional, poiché arrivi a seguire la logica e la precisa struttura dei simboli nidificati. Non tutti i simboli dello schizzo saranno richiesti su ciascuno dei progetti su cui lavorerai, quindi a volte devi essere pignolo.

Una volta che impari a creare, strutturare e aggiornare un simbolo in Sketch, ti semplifica la vita. Una volta creato un elemento flessibile, puoi creare e aggiornare rapidamente i simboli per ogni progetto imminente, eliminando la necessità di chiamare la pagina delle sostituzioni. Il tempo è d'oro come si suol dire, e l'opzione dei simboli nidificati personalizzati richiede decisamente meno tempo di quanto lo sarà la ricreazione di ogni elemento da zero!

Simboli personalizzati possono essere utilizzati sia per il web che per il mobile, a seconda delle esigenze e della propria volontà. Se il prodotto è destinato a rimanere su un solo sistema operativo, allora il tuo simbolismo di Sketch potrebbe essere focalizzato su alcuni tipi specifici; e poiché ci concentriamo sulla guida di stile specifica, quindi, risparmiamo molto tempo prezioso.

Parola finale

Eccolo, il tutorial per la creazione di simboli nidificati di Sketch. Nonostante sia solo un'applicazione MacOS, Sketch ha già conquistato l'amore di molte persone in tutto il mondo. Come mai? Perché è agile, è semplice e ha una mira precisa; non mira ad acquisire tutta la base di designer in tutto il mondo, è rivolto agli specialisti UI/UX. Inoltre, con i bonbon che ha da offrire (simboli nidificati, override, forme e forme ecc.) l'esperienza dell'applicazione diminuisce notevolmente. Tuttavia, un nuovo aggiornamento è già in arrivo (dal momento che l'ultimo ha visto il mondo più di un mese fa), per rendere la vita dei nostri designer migliore e più piacevole!

Scritto da Vlad Tyzun ed Elina Bessarabova.