In questa lezione conclusiva, parleremo di come procedere all'esportazione degli asset utili agli sviluppatori, che dovranno ricomporre l'interfaccia grafica creata in Sketch. Questo significa, nella pratica, ritagliare e salvare tutti quegli elementi che andranno poi ricuciti in codice HTML: per raggiungere questo obiettivo, impareremo a salvare Livelli e Slices.
Il primo passo da compiere sarà decidere quali elementi della grafica andranno scorporati e salvati singolarmente: di solito, tutti gli elementi che possono cambiare aspetto fanno parte di questa categoria. Un esempio è rappresentato dai bottoni, ovvero tutti gli oggetti della grafica che possono essere cliccati.
Riprendiamo il file grafico dell'interfaccia del negozio di piante, creato nell'ultima lezione, e proviamo a evidenziare con più chiarezza questi asset. In Figura 1 sono stati selezionati tutti gli elementi che hanno diversi stati, ovvero scatenano un evento quando vengono cliccati: per questi, sarà necessario creare un'immagine diversa proprio per ognuno di questi stati.
Una volta individuati questi elementi, bisognerà esportarli. Per comprendere meglio il metodo, ci concentreremo su un solo elemento, ad esempio il pulsante etichettato come "BUY". Raggruppiamo lo sfondo rettangolare del bottone con la scritta e impostiamo la funzione di esportazione
Come possiamo vedere, una volta che questo gruppo è stato preparato per l'esportazione, nel pannello livelli apparirà un'icona a forma di lama o taglierina
Per comodità, Sketch mette a disposizione un sistema di filtraggio pannello Livelli
Quando siamo pronti a esportare i nostri slice, basterà selezionare il tasto Export
Nell'elenco delle slice disponibili, possiamo vedere il nostro bottone: selezioniamo solo questo oggetto e quindi clicchiamo il tasto Export. Questo tipo di esportazione metterà tutte le immagini in un'unica cartella
In Figura 6 viene evidenziato come, a fronte dell'aver nominato precisamente il livello del nostro oggetto, corrisponda la creazione da parte di Sketch di una sottocartella
