Cara Membuat Border Satu Sisi di Sketch dan Adobe XD

() translation by (you can also view the original English article)

Dalam tips singkat berikut ini saya ingin menunjukkan kepada Anda trik yang rapi untuk membuat border satu sisi (one-side border) di Sketch dan Adobe XD.

Jika Anda sebelumnya telah menggunakan salah satu dari aplikasi tersebut Anda akan tahu bahwa membuat border sebenarnya cukup sederhana. Masalahnya adalah border yang ditambahkan ke seluruh tepi luar objek - aplikasi tersebut tidak memungkinkan untuk menambahkan satu border hanya di satu sisi saja.

Namun demikian, dapat dimungkinkan untuk mencapai apa yang kita inginkan dengan menggunakan drop shadow. Mari bahas.

Tonton Screencast

Membuat Border Satu Sisi dengan Mudah

Mari mulai dengan persegi sederhana di kanvas kita, dalam hal ini menggunakan Adobe XD. Persegi memiliki fill color, dan border:

Jika kita ingin border tersebut muncul hanya di tepi bawahnya saja, kita dapat menghapus Bordernya (dengan menghapus centang pengaturan border di sidebar properties) lalu memilih Shadow.

Kita akan memberikan shadow sebuah nilai sepanjang Y offset (yang akan membuat bayangan ke bawah) pastikan X offset terbaca 0, dan menghapus nilai B (ini adalah blur). Berikan warna shadow yang sesuai (#707070 dalam kasus kita) dan pastikan opacity diatur ke 100%.

one-sided borders in Adobe XD — Border satu sisi di Adobe XD

Sekarang kita sudah berhasil melakukannya - teknik sederhana untuk membuat border satu sisi. Border seperti ini adalah cara yang sangat efektif (tetapi halus) untuk menambahkan dimensi pada desain UI Anda. Cobalah di dialog box atau form input.

Border Lebih dari Satu Sisi

Di Sketch juga dimungkinkan untuk menambahkan beberapa shadow, dan karena itu disebut border lebih dari satu sisi (multiple one-side border). Klik ikon + di sebelah pengaturan shadow untuk pengaturan yang lainnya. Dalam contoh di bawah ini Anda dapat melihat border yang lebih besar di sepanjang tepi bawah, dengan border tipis di bagian atas:

Multiple one-sided borders in Sketch — Border Lebih dari Satu Sisi di Sketch

Salah satu kelemahan teknik ini adalah bagaimana bagian sudut ditampilkan seperti memiliki dua border yang saling berdekatan. Ada gap yang mencolok.

Dalam hal ini CSS tidak akan merender bagian sudut ini, dan hal ini tidak benar-benar dapat dipecahkan dengan cara yang sempurna di Sketch kecuali Anda menggunakan plugin berikut:

Plugin Sketch Single Border

Untuk kontrol yang lebih besar (dan untuk memecahkan masalah yang disebutkan sebelumnya) Anda dapat menggunakan plugin Sketch yang disebut single-border.

Catatan: Plugin pihak ketiga belum tersedia untuk Adobe XD, meskipun Anda dapat mengharapkan bahwa hal seperti ini juga bisa dikembangkan di XD kemudian hari.

Setelah terinstal, pilih objek dan buka Plugins > Single Border > Single Border. Pada pop-up yang muncul Anda dapat menentukan dengan tepat seperti apa tampilan border Anda:

Kesimpulan

Seperti itulah; sebuah trik sederhana untuk meningkatkan desain UI Anda di Sketch dan Adobe XD. Jika Anda tahu ada trik serupa lainnya, silakan beri tahu kami di bagian komentar!