Halo,

Sebelum masuk ke pembahasan, siapa yang pernah ngalamin redesign aplikasi karena tak adanya komunikasi antara tim? Ini memang biasa terjadi kalau tak ada komunikasi visual antar tim designer dan pengembangan tentang  rancangan desain aplikasi.

Bisa dibayangkan, sebelum diterapkan kita perlu menghubungi tim designer terlebih dahulu untuk melakukan verifikasi konsep yang dibuat apakah sudah final atau belum. Ini akan sangat membuang waktu, bukan? Apalagi ketika kita dikejar deadline yang kian dekat.

Tapi, kita tidak perlu lagi khawatir dengan hal-hal seperti itu. Di era yang serba digital seperti saat ini, masalah tersebut dapat cepat diatasi, secepat pesan boba yang lagi diskon 40%.

Namun demikian, redesign aplikasi masih bisa terjadi karena beberapa faktor selain yang sudah disebutkan di atas. Contoh, yang menentukan sebuah aplikasi dapat diterima dengan baik oleh pengguna adalah bagaimana aplikasi tersebut dapat menyuguhkan desain menawan di mana setiap komponen yang berada di dalamnya dapat berjalan dengan baik sesuai dengan ekspektasi pengguna.

Tak mau kan, akun developer play store kita dipenuhi komentar “Bintang satu dulu, kalo udah beres baru kasih bintang lima.” Ketika hal seperti itu terjadi, redesign bisa saja dilakukan.

Berkenalan dengan Figma

Nah, untuk meminimalisir semua kemungkinan yang akan terjadi terutama masalah seperti di atas, buatlah terlebih dahulu  rancangan desain dari aplikasi yang ingin dikembangkan. Caranya cukup mudah. Gunakan tools yang tersebar cukup banyak di internet baik itu yang gratis maupun berbayar. Salah satunya adalah Gravit Design. Aplikasi pertama yang saya gunakan sebelum berjumpa dengan tools berbasis web adalah  Figma.

Figma bisa menghemat waktu untuk melakukan verifikasi desain karena kita bisa berkolaborasi seperti memberi komentar, saran, bahkan mengubah rancangan desain yang ada dalam waktu yang bersamaan. Keren bukan? Itulah salah satu alasan saya berpindah hati.

Sebenarnya ada banyak aplikasi keren lainnya yang serupa, sebut saja Adobe XD, Sketch dan Zeplin. Lalu kenapa Saya memilih Figma? Selain bisa digunakan secara gratis (saat ini), Figma dapat dijalankan dengan baik oleh pengguna Linux karena berbasis web. Berbeda dengan beberapa aplikasi lainnya yang harus diinstall terlebih dahulu.

Berikut adalah salah satu contoh rancangan desain yang saya buat menggunakan Figma:

Figma sendiri menawarkan beberapa fitur yang menurut saya cukup membantu dalam pembuatan rancangan desain aplikasi. Contohnya, fitur plugin. Apa fungsinya? Mari kita bahas lebih dalam fitur-fitur yang ditawarkan.

Prototyping

Kita mulai dari prototyping. Fitur yang memudahkan kita untuk menguji rancangan screen yang sudah kita buat di mana kita bisa menjalankannya layaknya sebuah aplikasi. Fitur ini menurut Saya cukup berguna ketika ingin membuat beberapa rancangan tampilan yang saling terhubung. Contohnya seperti rancangan di bawah ini:

Di mana kita bisa menjalankannya seperti berikut:

Cara menggunakannya mudah. Cukup pilih frame atau komponen yang ingin di klik, masuk ke dalam tab prototype kemudian tentukan frame tujuan seperti berikut:

Mudah bukan?

Smart Animate

Lanjut, fitur yang mampu membuat saya lupa sejenak penat. Fitur ini masih terbilang baru karena baru saja dirilis beberapa bulan yang lalu. Fungsinya, fitur ini bisa kita gunakan untuk menambahkan animasi ketika transisi perpindahan tampilan seperti berikut:

Secara default terdapat animasi yang bisa kita gunakan untuk transisi perpindahan. Tapi, Smart Animate ini spesifik ke setiap komponen yang berada di dalam sebuah tampilan. Cara menggunakannya pun cukup mudah. Tinggal masuk pada tab prototype, kemudian untuk animasi pilih Smart Animate. Contohnya seperti di bawah ini:

Yang perlu diketahui, komponen yang ingin dianimasikan harus memiliki nama yang sama untuk setiap tampilan. Contohnya seperti di bawah ini:

Dukungan Plugin

Lanjut, sama seperti Smart Animate, fitur ini masih terbilang baru karena baru dirilis beberapa bulan yang lalu. Seperti namanya, kita bisa menggunakan plugin untuk mempercepat proses pembuatan rancangan desain aplikasi.

Figma menyediakan beberapa plugin yang menurut saya cukup Wow! Sebut saja plugin Google Sheet Sync. Dengannya, kita bisa menampilkan data yang berada pada Google Sheet, ke dalam sebuah rancangan desain yang sedang kita buat.

Misal kita mempunyai data seperti di bawah ini:

Kita bisa menampilkannya dengan cara seperti berikut menggunakan Google Sheet Sync:

Gimana? Masih kurang? Saya tambah lagi satu plugin yang memudahkan Saya membuat rancangan yang di dalamnya terdapat sebuah map, Map Maker. Cara menggunakannya mudah. Kita cukup menambahkan komponen rectangle baru, kemudian jalankan plugin Map Maker seperti berikut:

Sebenarnya ada puluhan bahkan ratusan plugin yang bisa kita gunakan, cuma gak saya sebutkan karena akan memakan banyak waktu. Keburu diskon Boba berakhir.

Auto Layout

Kita lanjut ke fitur yang memudahkan kita untuk mengatur komponen yang berada di dalam sebuah rancangan desain. Dengan Auto Layout ini kita akan lebih mudah untuk mengatur komponen terutama yang berhubungan dengan ukuran dan posisi. Contoh, misal kita mempunyai sebuah rancangan seperti berikut:

Kemudian kita ingin mengubah teks yang berada pada rancangan tersebut menjadi seperti berikut:

Bisa dilihat, ketika kita mengubah teks, kita juga harus menyesuaikan komponen yang berada di dekatnya baik itu ukuran ataupun posisinya. Ini baru contoh kecil saja, bisa dibayangkan jika rancangan yang kita bikin sudah masuk tahap pengembangan, hal ini akan menjadi PR besar dalam pengembangan itu sendiri.

Nah, ketika kita berhadapan dengan kasus seperti di atas, kita bisa memanfaatkan fitur Auto Layout di mana kita cukup fokus pada perubahan yang diinginkan. Contohnya, jika kita ambil lagi kasus seperti di atas, maka akan seperti berikut:

Kurang apa coba? Kita tidak perlu lagi pusing dengan komponen yang berada di dekatnya.

Kolaborasi

At last but not least. Fitur kolaborasi ini dapat menyelesaikan masalah yang saya sebutkan di awal artikel, fitur ini memungkinkan kita untuk berkolaborasi langsung baik itu memberikan komentar, melakukan perubahan dan lain sebagainya. Untuk melakukan kolaborasi pun mudah, kita tidak perlu melakukan konfigurasi spesifik. Cukup dengan membagikan tautan proyek dan voila! kita bisa langsung melakukannya.

Berikut contoh sederhana dari kolaborasi yang saya buat: