Belajar Figma : Figma, tools yang mempermudah hidup UI Designer II

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

Dukungan Plugin Lanjutan Seperti halnya Smart Animate, fitur ini masih tergolong baru karena baru dirilis beberapa bulan lalu. Seperti namanya, kita bisa menggunakan plugin untuk mempercepat pembuatan desain aplikasi.

Figma menawarkan beberapa plugin yang menurut saya cukup milik saya! Sebut saja plugin Google Sheet Sync. Ini memungkinkan kami untuk menampilkan data di halaman Google dalam rencana gambar yang kami buat.

Misalkan kita memiliki data berikut:

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

Bagaimana? Masih kurang? Saya menambahkan plugin lain yang memudahkan perencanaan dengan peta, Pencipta Peta. Hal ini mudah digunakan. Mari kita tambahkan saja komponen persegi panjang baru dan kemudian jalankan plugin Map Maker sebagai berikut.

Sebenarnya kita bisa menggunakan puluhan bahkan ratusan plugin, hanya saja saya tidak akan menyebutkannya karena memakan banyak waktu. Musim diskon Boba telah berakhir.

Auto Layout

Mari kita beralih ke fitur yang memungkinkan kita untuk dengan mudah menata letak komponen desain. Susunan otomatis ini memudahkan kita untuk menata komponen, terutama yang berkaitan dengan ukuran dan posisi. Sebagai contoh, misalkan kita memiliki model seperti ini:

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

Dapat dilihat bahwa ketika mengubah teks, komponen di dekatnya juga harus disesuaikan baik dalam ukuran atau posisi. Ini hanya contoh kecil, bisa dibayangkan, ketika desain yang kami buat pindah ke tahap pengembangan, itu adalah pekerjaan rumah besar dalam pengembangan itu sendiri.

Kami sekarang dapat memanfaatkan fitur otomatisasi saat menangani kasus di atas di mana kami hanya fokus pada perubahan yang kami inginkan. Sebagai contoh, jika kita mengambil kasus kedua di atas, tampilannya seperti ini:

Apa yang hilang? Kita tidak perlu lagi repot dengan komponen terdekat.

Kerjasama

Terakhir namun tidak kalah pentingnya. Fitur kolaborasi ini dapat menyelesaikan masalah yang saya sebutkan di awal artikel. Fitur ini memungkinkan kita untuk berkolaborasi secara langsung, baik itu komentar, perubahan, dll. Kolaborasi itu mudah, kita tidak perlu melakukan pengaturan khusus. Cukup bagikan tautan proyek dan voila! kita bisa melakukannya sekarang.

Berikut adalah contoh sederhana dari kolaborasi saya:

Oke, apakah penting kita mendesain aplikasi? Kembali ke awal, desain aplikasi adalah sesuatu yang HARUS kita lakukan sebelum kita mulai mengembangkan aplikasi. Tetapi sama pentingnya bagaimana kita melakukannya dan alat apa yang kita gunakan setelahnya.

Saya membuat artikel ini tanpa persetujuan Figma, hehe (tapi semoga mendapat persetujuan xD), tapi sungguh, Figma adalah salah satu alat yang saya rekomendasikan untuk teman-teman yang ingin membuat atau baru belajar cara mendesain aplikasi.

Pada artikel ini saya tidak akan membahas tutorial khusus tentang cara menggunakan Figma, terutama cara membuat proyek baru. Mengapa? Karena Figma sangat mudah dipahami, cukup buka website Figma, teman-teman bisa langsung beradaptasi dengan tampilannya yang cantik.

Cukup untuk sampai ke sini, kan? Jika ada yang kurang jelas atau ada pertanyaan, tulis komentar pada kolom di bawah.