() translation by (you can also view the original English article)
Dalam tips singkat ini, saya akan menunjukkan cara yang sangat mudah untuk menambahkan padding dan spasi ke dalam desain Anda di Sketch.
Saksikan Screencast-nya
Masalah Umum Desain UI dalam Sketch
Mari saya mulai dengan menunjukkan Anda masalah yang mungkin Anda hadapi berkali-kali ketika bekerja di Sketch. Katakanlah Anda ingin membuat tombol sederhana; Anda akan mulai dengan bentuk persegi panjang pada artboard, berikan warna yang sesuai, kemudian Anda akan menambahkan teks ke layer lain. Terakhir, Anda menyelaraskan (align) objek, mengelompokkannya bersama-sama, dan Anda selesai.
Sekarang bayangkan Anda ingin membuat tombol lain; serupa, tetapi dengan teks yang berbeda. Anda kemungkinan menduplikasi yang sudah dibuat sebelumnya, lalu mengubah teksnya.
Dengan asumsi Anda ingin menyimpan padding lateral yang sama pada masing-masingnya, Anda akan mengubah lebar persegi panjang tergantung pada bagaimana Anda ingin mereka terlihat. Proses manual:
Hal ini mungkin tampak seperti tugas yang sederhana, tetapi jika Anda harus melakukan ini berulang-ulang sebenarnya dapat sangat memakan waktu.
Solusinya adalah: Paddy
Jadi biarkan saya memperkenalkan Paddy; sebuah plugin untuk Sketch yang akan menghemat banyak waktu.
Pengaturan Padding
Mulailah dengan menginstal plugin ini, kemudian dengan beberapa teks yang dipilih pada artboard Anda menuju ke Plugins > Paddy > Enter padding for selection. Pada dialog yang muncul Anda dapat mengatur padding seperti yang Anda lakukan dalam CSS. Misalnya, memasukkan nilai 10 20 akan memberi Anda 10px padding di bagian atas dan bawah, dengan 20px ke kanan dan kiri.
Paddy akan secara otomatis membuat backround persegi panjang, berukuran persis seperti yang Anda inginkan. Tetapi inilah bagian yang keren: ketika Anda mengubah teks, backround persegi panjang akan mempertahankan pengukuran padding yang Anda tetapkan sebelumnya.
Misalnya mengedit nama layer dari Background (10 20) menjadi Background (20 20) akan mengubah padding untuk mencerminkan nilai barunya.
Mengatur Spacing
Cara ini juga bekerja saat menambahkan spacing antar objek. Bayangkan kita memiliki dua tombol dan kita ingin menambahkan jarak atau spacing 50px di antara keduanya. Kita pilih (select) kedua tombolnya, lalu menuju ke Plugins > Paddy >Spacing for selection dan kita dapat memasukkan nilai yang kita inginkan. kita akan menggunakan unit v untuk menentukan jarak vertikal, atau unit h untuk horizontal.
Dalam kasus ini, kita menggunakan 50v untuk memberi jarak dua tombol 50px, secara vertikal.
Seperti yang Anda lihat, grup tombol ini telah dibungkus dalam grup lain, yang menyimpan nilai spacing. Jika kita menambahkan tombol lain dalam grup ini, tombol tersebut juga akan mewarisi spacing yang sama. Dan jika kita mengubah nilai padding, atau panjang teks dalam salah satu tombol ini, semuanya akan dihitung ulang dan direposisi untuk kita.
Kesimpulan
Paddy adalah plugin yang hebat; Saya sarankan Anda mendownloadnya dan lihat beberapa hal lain yang bisa dilakukan. Paddy pasti akan menghemat waktu Anda!
