Mengenal Zeplin. Tools asik untuk kolaborasi antara designer dengan developer

Sebagai front-end developer terkadang saya sulit sekali untuk mengimplementasikan desain aplikasi yang di provide oleh desainer karena terbatasnya informasi terkait assets yang di attach pada desain aplikasi tersebut.

Oleh karena itu pada kesempatan kali ini saya ingin memperkenalkan sebuah tools bernama Zeplin yang berfungsi sebagai tempat berkolaborasi mengenai desain aplikasi yang dibuat agar gap antara designer dan developer (khususnya front-end) tidaklah terlalu jauh.

Zeplin merupakan tools kolaborasi yang interaktif untuk developer dan designer dalam mengembangkan user interface aplikasi baik web ataupun mobile (android/ios). Bisa dilihat dokumentasi Zeplin disini .

Halaman Home Zeplin:

Zeplin free hanya untuk penggunaan 1 project. Untuk 3 project dikenai biaya 17 Dollar/bulan dan untuk 12 project dikenai biaya 26 Dollar/bulan. Zeplin dapat mengimport assets desain berbasis Photoshop atau Sketch (hanya tersedia di Mac), namun pada tutorial kali ini saya menggunakan Sketch. Let's Start :D

Sebelumnya saya telah memiliki 2 Account yang telah terdaftar pada Zeplin sebagai Designer dan Developer. Role Designer dapat melakukan upload file design aplikasi dan detail informasi assets tersebut dapat dilihat dalam bentuk desain assets aplikasi yang dibuat, contohnya CSS untuk website.

Setelah mendaftar, Zeplin meminta untuk menginstall Aplikasi Zeplin ke PC. Lakukan install dan login menggunakan PC kemudian buat project baru dan pilih platform project apa yang akan dibuat. Pada yang saya contohkan saya memilih aplikasi Web.

Berikut dibawah ini gambar detail project dan member pada project yang dibuat:

User 'panjialam' saya Rolenya pada saat login project sebagai Designer. Kemudian selanjutnya saya akan mengundang user lain (Developer) untuk join ke dalam project. Pilih invite kemudian ketik username dan pilih "invite" username yang tampil tersebut.

Nah saat ini saya telah menginvite alampanji yang berperan Developer. Developer nantinya dapat melihat hasil generate Desain dalam format script CSS/LESS/SASS dengan kata lain developer tidak perlu bekerja 2kali dengan memikirkan styling aplikasinya, Menarik bukan?

Memulai mendesain pada Sketch...

Seperti yang sudah saya bilang tadi Zeplin mendukung desain yang dapat di import pada Project dalam format photoshop dan sketch namun pada tutorial saya kali ini saya mencoba menggunakan sketch sebagai source desain yang diimport ke Zeplin. Sketch merupakan tools design UI yang hanya tersedia pada Mac. Sketch merupakan software berbayar dan kita dapat menggunakannya Free Trial selama 30 hari saja.

Oke untuk create design pada Sketch pilih File > New From Template dan Pilih Web Design seperti gambar berikut:

Kemudian buat desain web seperti contoh gambar berikut:

Kemudian selection desain tersebut dan pilih Plugins > Zeplin kemudian pilih Export Selected Artboard seperti gambar dibawah ini:

Pada langkah ini, Sketch akan mengexport desain yang sudah di selection kedalam file project Zeplin yang telah kita buat sebelumnya, jika success akan seperti gambar seperti ini:

Nah setelah sukses, kembali lagi pada file project Zeplin dan file desain Sketch tadi akan ada di project seperti gambar berikut:

Seperti yang sudah saya bilang tadi, sebagai Developer kita dapat melihat hasil generate styling dalam format CSS/LESS/SASS/Stylus dll. Pilih komponen dan stylingnya dapat dilihat seperti ini:

Dan styling CSS komponennya bisa kita copy dengan mengklik 'copy' seperti gambar berikut:

Sekian tutorial yang saya sampaikan, semoga dapat mempermudah pekerjaan Designer dan Developer yang HQQ (re: Hakiki). Terimakasih sampai bertemu pada blog selanjutnya :D