Kolaborasi antara Designer dan Developer jadi mudah, gunakan Zeplin
Beberapa minggu terakhir saya sedang menikmati belajar membuat mockup aplikasi dan membuat desain web, sampai beberapa hari yang lalu tiba-tiba teringat sebuah plugin di Photoshop (atau juga Sketch ) bernama Zeplin yang waktu itu pernah dibicarakan dan dijelaskan secara selewat oleh salah satu senior saya di Kampus di sebuah acara screening sebuah film bertema desain.
“Wah boleh juga nih dicoba” ucap saya ketika teringat plugin itu.
Tapi Sebelumnya, apa itu Zeplin ?
Zeplin adalah sebuah tools untuk kolaborasi antara developer dan designer.
Saya langsung search menggunakan Google dengan keyword Zeplin. kemudian langsung mencari cara bagaimana menginstall plugin tersebut ke photoshop yang ada di laptop saya. proses installnya sangat mudah sekali.
hanya perlu download saja installer nya di zeplin.io.
Setelah plugin nya terinstall saya langsung buka panel zeplin di photoshop melalui windows > extension > zeplin
Aplikasi Zeplin juga seketika terinstall di perangkat saya, dan begini tampilan pertama dari Zeplin.
Di postingan ini saya akan memberitahu kamu bagaimana cara menggunakan Zeplin dan apa saja yang ada di dalamnya. OK Let’s go!
Di tampilan awal terdapat sebuah video tutorial singkat yang akan memberi tutorial mengenai penggunaan aplikasi Zeplin, dan juga button untuk membuat project di Zeplin. Dengan menyaksikan video tutorial tersebut, akan membantu sekali untuk menghindari kebingungan ketika pertama kali mengunakan aplikasi ini.
Jadi, setelah itu mari langsung membuat project di Zeplin. Pada Halaman selanjutnya terdapat pilihan untuk memilih project type. di Zeplin disediakan empat tipe project type yang dapat kamu pilih.
Tipe Project yang dipilih adalah sebagai berikut:
- iOS dengan dimensi dalam ukuran pt / point
- Android dengan dimensi dalam ukuran dp/sp
- Web dengan dimensi dalam ukuran px
- MacOS dengan dimensi dalam ukuran pt
Saya akan memilih project Android dan mari mengexport artboard ke zeplin.
Eksport Artboard dan Asset ke Zeplin
Untuk mengeksport artboard ke Zeplin, di dalam file photoshop kamu yang sudah terdapat artboard-artboard yang sudah dibuat. Pilih artboard yang akan dieksport, untuk melakukan eksport ke Zeplin sangat mudah sekali hanya dengan cara pilih satu atau lebih artboard yang akan dipilih untuk di eksport. Sedangkan untuk mengeksport asset ke zeplin caranya dengan memilih layer yang akan di eksport lalu pilih ‘Mark as asset’ kemudian layer yang ditandai ditambahkan ‘e-’ di depan layer tersebut supaya tereksport ke Zeplin.
Setelah itu tekan tombol ‘Export selected artboards to Zeplin’ dan Artboard tersebut akan dieksport ke zeplin. Sebelum dieksport kamu harus pilih ke project mana Artboard kamu akan di dieksport.
Jika kamu ingin menimpa atau melakukan replace pada screen yang namanya sama kamu bisa checklist di bagian ‘Replace screens with the same name’. dan bila sudah selesai pilih project yang akan dituju lalu tekan import.
ups.. Belum selesai sampai disitu, kamu harus pilih terlebih dahulu screen density yang akan digunakan. setelah itu lalu tekan choose.
dan Artboard kamu sudah hadir di Zeplin. yeay!
Dashboard
Di Dashboard ini semua informasi yang dibutuhkan ada disini. Disebelah kiri terdapat artboard yang sudah di import dari Photoshop. di sebelah kanan terdapat banyak informasi mendetail seperti nama project, type, density, project link dimana kamu bisa share link tersebut sehingga orang lain dapat melihat project kamu dengan mengklik link tersebut. Terdapat juga beberapa fitur lain seperti intergrasi ke slack, lalu share Scene agar orang-orang bisa melihat design dan styleguide yang terdapat pada project kamu, lalu yang paling penting adalah invite member, karena Zeplin adalah salah satu tools untuk berkolaborasi jadi mengundang orang-orang seperti anggota tim kamu dapat berdampak baik contohnya seperti memberi feedback atas hasil pekerjaanmu.
Styleguide
Setelah melihat-lihat di Dashboard, terdapat juga Styleguide yang berisi color pallete dan font book yang berguna untuk membantu developer mandapatkan informasi seperti font dan warna yang digunakan. di styleguide ini text style dan color yang digunakan dapat di export dalam format xml untuk memudahkan developer
Mengunduh Asset langsung dari Zeplin
Bagi para developer, untuk mengunduh asset seperti icon mudah sekali. Caranya dengan klik asset yang diinginkan lalu pilih format yang akan diunduh seperti jpg / png. File asset yang diunduh berisi beberapa jenis ukuran asset untuk berbagai screen density.
Memberi komentar pada screen
dan agar kolaborasi semakin menarik, di Zeplin kamu dapat memberikan komentar terhadap setiap detail yang ada. fitur ini berguna untuk saling memberi feedback untuk hasil yang lebih baik.
mudah dan menarik bukan ? bagi saya pribadi, Zeplin sangat membantu saya untuk memudahkan pekerjaan dan Zeplin ini gratis lho! tapi hanya terbatas untuk satu project. jika ingin lebih dari satu project bisa berlangganan dan pilih plan yang cocok dengan kamu.
