Sketch 3: 10 Trucchi Insoliti per Designers

Scopri come progettare interfacce utente più velocemente attraverso alcune features nascoste.

Qualche giorno fa i ragazzi di Bohemian Coding hanno rilasciato la versione 3.3 di Sketch sul Mac App Store, introducendo diverse novità degne di nota capaci di migliorare l’esperienza d’uso dell’applicazione.

Voglio condividere con voi 10 trucchi per Sketch 3 che ad oggi hanno migliorato il mio flusso di lavoro riducendo gli sprechi di tempo.

Occupandomi di Visual Design, Sketch 3 è diventato il compagno insostituibile per la progettazione di interfacce web, mobile e wearable da più di 2 anni.

“Sketch è stato studiato per creare
esclusivamente interfacce utente.”

Gran parte del tempo impiegato nella costruzione di un mockup è spesa di frequente nel disegno, nel posizionamento e nell’allineamento dei componenti dell’interfaccia. Come ho già descritto nel mio articolo precedente, Sketch 3 è stato studiato per progettare esclusivamente interfacce utente, di qualsiasi genere, fornendo degli strumenti appositi per lo scopo. Vediamo adesso dieci funzionalità insolite di Sketch 3 come da titolo.

1. Parametri Oggetto Intelligenti

I campi di testo associati alle proprietà di un oggetto (larghezza, altezza, posizionamento) supportano ogni tipo di operazione aritmetica e valori in percentuale, questi ultimi calcolati rispetto al genitore dell’oggetto sia esso un Artboard o Gruppo.

Es. - Seleziona un oggetto e inserisci nel campo di testo relativo alla X il valore 40%, premi Invio per confermare.

2. Trasformazioni Relative

Nel caso del ridimensionamento di un oggetto, adesso è possibile stabilire il punto di origine della trasformazione, che di default è in alto per l’altezza e a sinistra per la larghezza.

• Inserisci il suffisso M o C dopo il valore Larghezza dell’oggetto per applicare la trasformazione a partire dal centro, inserisci invece il suffisso R per partire da destra.
• Inserisci il suffisso M o C dopo il valore Altezza dell’oggetto per applicare la trasformazione a partire dal centro, inserisci invece il suffisso B per partire dal basso.

Es. Seleziona un oggetto e inserisci nel campo di testo relativo alla Larghezza il valore 100R, premi Invio per confermare.

3. Perfeziona i Dettagli con la Tastiera

Ecco un trucco che ti farà risparmiare davvero molto tempo. Attraverso i tasti direzionali è possibile muovere e ridimensionare un oggetto selezionato sul canvas con una precisione nell’ordine del decimo di pixel!

Posizione e Spostamento
1 px = ← ↑ → ↓
10 px = ← ↑ → ↓ + Shift
0,1 px = ← ↑ → ↓ + Alt

Larghezza e Altezza
1 px = ← ↑ → ↓ + Cmd
10 px = ← ↑ → ↓ + Cmd + Shift
0,1 px = ← ↑ → ↓ + Cmd + Alt

Bonus Tip
Premi Alt + Tab sulla tastiera per posizionare il cursore sul campo X dell’oggetto, così facendo potrai modificarlo immediatamente, spostandoti da una proprietà all’altra sempre con il tasto Tab.

4. Duplicazione in Serie

Così come in Photoshop o Illustrator, anche Sketch dispone di una funzione di duplicazione rapida che ti tornerà utile per duplicare più oggetti in serie, come nel caso di liste ed elenchi.

1. Duplica l’oggetto trascinandolo con il mouse tenendo premuto ⌥.
2. Rilascia il tasto ⌥.
3. Premi la combinazione ⌘+D per duplicare il livello.

5. Gestire gli Stati dei Simboli

Sebbene abbiano ancora qualche limitazione, i Simboli di Sketch ti consentiranno riutilizzare più efficacemente i componenti dell’interfaccia. C’è di più! È possibile organizzare simboli e stili di testo in sottogruppi si pensi ad esempio ad un bottone a cui assegnare uno stile grafico per lo stato hover e active. Per fare ciò ti basta inserire / dopo il nome del simbolo e successivamente digitare il nome dello stato. La stessa metodica funziona anche con gli stili di testo.

Es. “bottone / hover” e “bottone / active”

6. Ottimizzare le Immagini

Il peso di un file .sketch sarà quasi sempre intorno ai 20mb o meno. Questo valore indicativo aumenta considerevolemente se all’interno del progetto sono presenti immagini bitmap. Queste ultime infatti vengono inglobate all’interno del file sorgente, comportando un aumento del peso del file e alle volte un peggioramento complessivo delle prestazioni di Sketch.

Un modo per ridurre le dimensioni di un file Sketch è quello di applicare ad ogni immagine la funzione — Flatten Selection to Bitmap — accessibile dal menu Layer.

È possibile gestire il comportamento di tale funzione attraverso le preferenze di Sketch selezionando la modalità @1x o @2x.

7. Opzioni di Esportazione Personalizzate

Il mini-pannello esportazione presente in Sketch è qualcosa di eccezionale! In meno di attimo è possibile esportare gli oggetti a dimensioni multiple ottimizzate per ogni tipologia di dispositivo. È possibile inserire dei valori totalmente personalizzati sulla base delle esigenze di progettazione. L’importante è rispettare il pattern testuale che Sketch ci suggerisce a partire dai predefiniti. Per tua comodità lo riporto qui di seguito:

• nx — Esporta scalando l’oggetto di un fattore n intero o decimale
• nw — Esporta l’oggetto con una larghezza intera n
• nh — Esporta l’oggetto con un’altezza intera n

8. Esportazione Fulminea

Oltre alla classica modalità di esportazione, Sketch ti consente di esportare velocemente uno o più oggetti in png trascinandoli dalla Palette Livelli alla Scrivania del Mac, Safari o qualsiasi altra app.

9. Accesso Rapido ai Gruppi

Quando crei un gruppo contenente più oggetti, selezionalo e attiva il segno di spunta sull’opzione Click-through when selecting nell’Inspector, per accedere agli oggetti contenuti nel gruppo sul Canvas, senza il bisogno di aprire il gruppo, risparmiando così diversi click.

10. Scorciatoie da Tastiera Personalizzate

Ogni voce del menu di Sketch può essere associata ad un comando rapido da tastiera! Vai su Preferenze->Tastiera->Scorciatoie->Scorciatoie Applicazioni e aggiungi Sketch alla lista cliccando su +. Inserisci il nome della voce Menu esattamente come riportato su Sketch e assegna la combinazione di tasti che preferisci.

Se ti è piaciuto questo articolo su Sketch 3
apprezzerai anche:

- Progettare Interfacce su Sketch
- Doppio Click su Sketch

Fammi sapere se vuoi imparare altro su Sketch 3! Mettiamoci in contatto attraverso Twitter o Dribbble!