Share
In questo rapido suggerimento ti mostrerò un modo davvero semplice per aggiungere padding e spaziatura ai tuoi disegni in Sketch.
Permettetemi di iniziare mostrandovi un problema che potreste aver affrontato molte volte lavorando con Sketch. Diciamo che vuoi creare un semplice pulsante; avresti iniziato con una forma rettangolare sulla tavola da disegno, dandogli un colore appropriato, quindi dovresti aggiungere del testo ad esso su un altro livello. Infine, allineeresti gli oggetti, raggruppali insieme e avresti finito.
Immaginiamo ora di voler creare un altro pulsante; simile, ma con testo differente. Probabilmente duplichi quello già fatto, quindi cambia il testo.
Supponendo che si desideri mantenere lo stesso riempimento laterale su ciascuno di essi, si modificheranno le larghezze dei rettangoli a seconda di come si desidera che vengano visualizzati. Una procedura manuale:
Questo potrebbe sembrare un compito semplice, ma se devi farlo ripetutamente può essere davvero molto tempo.
Quindi fammi introdurre Paddy; un plugin per Sketch che ti farà risparmiare tempo.
Inizia installando il plugin, quindi, con un testo selezionato nella tua tavola da disegno, vai a Plugin> Paddy> Inserisci padding per la selezione. Nella finestra di dialogo che si apre puoi impostare il padding come faresti con i CSS. Ad esempio, inserendo un valore di 10 20 ti darà 10px di padding in alto e in basso, con 20px a destra e a sinistra.
Paddy creerà automaticamente un rettangolo di backround, dimensionato esattamente come desiderato. Ma ecco la parte interessante: quando cambi il testo, il rettangolo di sfondo manterrà le misure di padding impostate in precedenza.
Modifica del nome del livello da Sfondo (10 20) dire, Sfondo (20 20) cambierà il padding per riflettere i nuovi valori.
Questo funziona anche quando si aggiunge la spaziatura tra gli oggetti. Immagina di avere due pulsanti e vogliamo aggiungere 50 px di spaziatura tra di loro. Selezioniamo entrambi i pulsanti, quindi vai a Plugin> Paddy> Spaziatura per la selezione e possiamo quindi inserire il valore che vogliamo. Noi useremmo v unità per definire la spaziatura verticale, o h unità per orizzontale.
In questo caso l'abbiamo usato 50v per distanziare i nostri due pulsanti esattamente a 50px l'uno dall'altro, verticalmente.
Come puoi vedere, i gruppi di pulsanti sono stati raggruppati in un altro gruppo, che contiene il valore di spaziatura. Se dovessimo aggiungere un altro pulsante all'interno di questo gruppo, anch'esso erediterebbe la stessa spaziatura. E se dovessimo modificare i valori del padding, o la lunghezza del testo all'interno di uno di questi pulsanti, l'intera cosa sarebbe ricalcolata e riposizionata per noi.
Paddy è un ottimo plugin; Ti consiglio di scaricarlo e dare un'occhiata ad alcune delle altre cose che può fare. Ti farà sicuramente risparmiare tempo!
Accentsconagua