Sketch versione 55: ecco le novità

Da circa un mese è stata rilasciata la versione 55 del nostro amato Sketch.

Sarò breve, le novità di questa versione sono fondamentalmente 2:

  • La nuova funzione Smart Distribute
  • La creazione di un livello da codice SVG

Vediamo velocemente di cosa stiamo parlando.

Smart Distribute

Forse una tra le funzioni di cui si sentiva più la mancanza, Smart Distribute permette di gestire la spaziatura tra gli elementi di di una riga o una colonna. Occhio, non sto parlando della vecchia Arrange > Distribute che distribuisce uniformemente gli elementi in base alla posizione del primo e dell’ultimo elemento.

Come funziona Smart Distribute?

Una volta selezionati più elementi, appariranno delle maniglie bianche tra essi. Trascinando queste maniglie, riuscirai ad avvicinare o allontanare gli elementi spaziandoli tra loro in maniera uniforme.

Smart Distribute di Sketch in azione
✨Basta trascinare una delle maniglie bianche!

Inoltre è possibile impostare la spaziatura inserendo un valore in pixel dall’Inspector.

Smart Distribuite nell'Inspector
Smart Distribute nell’Inspector

Purtroppo al momento la funzione è disponibile solo per righe o colonne specificando lo spazio verticale oppure orizzontale. Non è possibile impostare contemporaneamente i 2 valori per gestire delle griglie.

N.B.: questa funzione non fa altro che riposizionare gli elementi. Quindi, ad esempio, qualora dovessi eliminare un elemento, gli altri non si ridistribuiranno automaticamente secondo il valore impostato. Per gestire situazioni simili consiglio caldamente il plugin Anima che gestisce le spaziature in maniera dinamica (funzione Stack, una manna dal cielo per gestire righe, griglie e altro).

UPDATE: dalla versione 56 puoi utilizzare Smart Distribute per controllare la spaziatura nelle griglie. È possibile regolare facilmente la spaziatura verticale e orizzontale tra le righe e le colonne di livelli. La versione 57 invece integra anche una funzione per il riordinamento dei livelli nella griglia.

Copia incolla da codice SVG

Può capitare di dover copiare un’icona dal web e magari questa non è stata incorporata come un’immagine ma direttamente come codice SVG.

Non so a quanti sia capitato, a me diverse volte. Prima di questo aggiornamento bisognava trovare l’escamotage per salvare in qualche modo quel codice per importarlo in Sketch (ad esempio in un editor di testo e poi salvarlo con estensione .svg).

Copia–incolla da codice SVG a Sketch
🙌🏼Copia–incolla da codice SVG a Sketch

Con questa nuova implementazione invece basterà copiare il codice SVG, passare a Sketch e incollare il codice. Così facendo verrà generato un livello basato sul codice SVG incollato! 🧙‍♀️

Altre piccole migliorie

  • Migliorate le performance di azionamento delle griglie quando usiamo linee, frecce, livelli e nuovi simboli
  • Il copia–incolla di simboli e pagine tra documenti diversi è più veloce e affidabile
  • I livelli adesso si agganciano anche al testo ruotato

Conclusione

Dopo qualche settimana di utilizzo posso dire che la funzione Smart Distribute risulta molto comoda e fa risparmiare un po’ di tempo. I ragazzacci di Bohemian stanno continuando a lavorare strabene su Sketch 💪