Maximize your design collaboration with Figma + Zeplin

Achmad Firdaus Adinegoro
temancatat
Published in
3 min readMay 2, 2018

Mata kuliah yang saya ambil terkait pengembangan aplikasi perangkat lunak di Fakultas saya sudah mencapai sprint 3, tetapi permintaan untuk refining desain antarmuka dari aplikasi masih terus berlanjut hingga saat ini. Ketika di masa-masa awal kelompok kami hanya menggunakan Adobe Illustrator + Google Drive untuk melakukan kolaborasi desain, mulai dari sprint 2, salah satu scrum team kelompok kami menyarankan untuk menggunakan Zeplin (dan Figma) untuk keperluan kolaborasi desain ke depannya.

Zeplin

Jadi apa itu Zeplin? Zeplin merupakan sebuah aplikasi kolaborasi desain untuk tim pengembangan aplikasi perangkat lunak yang tersedia baik di web maupun di aplikasi (walaupun untuk melakukan import desain harus menggunakan aplikasi).

Aplikasi Zeplin

Keuntungan dari Zeplin adalah selain kita dapat melakukan kolaborasi dengan cepat. Dalam artian melakukan import-export dengan mudah, melakukan komentar terhadap komponen desain, dan juga memastikan bahwa desain dapat diakses oleh semua anggota tim. Zeplin juga menyimpan informasi ukuran-ukuran dari aplikasi sehingga dapat dijadikan referensi dalam membuat layout XML di android.

Ukuran

Figma

Figma merupakan salah satu alat untuk membuat desain prototipe untuk berbagai macam platform. Beberapa fitur yang dimiliki adalah component reference, sehingga beberapa komponen yang direfer ke suatu komponen utama dapat berubah otomatis ketika komponen utama diubah, kompabilitas ke dalam berbagai ukuran seperti dp, px, dll., selain itu menurut saya figma merupakan alat yang lumayan intuitif untuk digunakan. Tentunya, alasan lain digunakannya figma dalam proses pengembangan aplikasi Teman Catat adalah karena hasil desain dapat diintegrasikan dengan Zeplin.

Figma

Figma — Zeplin Integration

Caranya cukup mudah, pilih desain yang diinginkan untuk diexport, tekan export di sudut kanan atas (atau tekan CTRL+SHIFT+E).

Pilih Tab Zeplin, kemudian tekan tombol Export.

Zeplin > Export

Pastikan aplikasi Zeplin sudah terinstall, nanti akan terbuka link popup untuk kemudian terhubung dengan aplikasi. Klik Import.

Laman di Zeplin

Tunggu beberapa saat dan voila, desain dari Figma sudah berada di Zeplin untuk direview!

Walaupun ada beberapa issues dimana ukuran di Figma tidak sama dengan yang ada di zeplin, tetapi keseluruhan aplikasi berjalan dengan sangat baik. Selamat mencoba!

--

--