1. Pengantar
Terakhir Diperbarui: 08/04/22
Mulai Android 13, pengguna dapat menerapkan tema ikon peluncur adaptif mereka. Dengan fitur ini, ikon aplikasi di peluncur Android yang didukung diberi warna untuk mewarisi warna wallpaper yang dipilih pengguna dan tema lainnya.
Buat semua aset sistem yang diperlukan untuk aplikasi Android Anda dengan mudah, termasuk ikon warna adaptif baru.
Yang akan Anda pelajari
- Pemahaman tentang berbagai jenis ikon aplikasi dan tips untuk mendesainnya.
- Cara menggunakan template Figma peluncur Android.
- Cara menggunakan generator aset Android Studio.
- Cara melihat pratinjau ikon peluncur dengan emulator Android Studio.
Prasyarat
- Pengetahuan dasar tentang Figma
- Opsional: Karya seni ikon aplikasi (latar depan, latar belakang, dan monokromatik)
Yang Anda butuhkan
- A Akun Figma
- A File Figma Designlab
- Opsional: PC yang telah diinstal Android Studio
2. Memulai
Penyiapan
Untuk memulai, Anda harus mengakses file Figma ikon aplikasi Android.
Pertama, login ke Figma atau buat akun.
Menduplikasi file dari Figma Community
Buka file Android launcher template atau telusuri Migrating to Variable fonts di Figma Community. Klik Dapatkan Salinan di pojok kanan atas untuk menyalin file tersebut ke dalam file Anda.
Menggunakan template
Template ikon Android terdiri dari dua halaman:
- Halaman sampul secara singkat membahas konsep yang relevan dan cara menggunakan template.
- Halaman template mencakup semua yang Anda butuhkan untuk membuat aset yang diperlukan,yang dibagi menjadi tiga frame (Warna, Bentuk, Play Store).
Catatan: Di Panel Lapisan kiri, sebagian besar lapisan dan grup dikunci; lapisan dan grup ini harus tetap dikunci. (Anda akan dapat menempatkan ilustrasi dalam grup ilustrasi yang tidak dikunci.)
Namun, sebelum kita mulai membuat aset, mari kita lihat apa yang akan kita buat...
3. Ikon sistem Android
Ikon peluncur
Ikon peluncur, atau ikon aplikasi, berfungsi sebagai bagian penting dari pengalaman peluncuran aplikasi Anda. Ikon peluncur muncul di layar utama sebagai titik entri ke aplikasi Anda.
Bentuk adaptif
Ikon adaptif, atau AdaptiveIconDrawable, dapat ditampilkan secara berbeda bergantung pada kapabilitas perangkat masing-masing dan penerapan tema pengguna. Ikon adaptif biasanya digunakan peluncur pada layar utama, tetapi juga dapat digunakan di pintasan, aplikasi Setelan, dialog berbagi, dan layar ringkasan.
Ikon adaptif dapat menampilkan berbagai bentuk pada model perangkat yang berbeda. Misalnya, ikon dapat menampilkan bentuk lingkaran pada satu perangkat OEM, dan menampilkan persegi melingkar di perangkat lain. Setiap OEM perangkat harus menyediakan mask, yang digunakan oleh sistem untuk merender semua ikon adaptif dengan bentuk yang sama.
Kemampuan untuk beradaptasi dengan bentuk juga memungkinkan sistem menerapkan berbagai efek animasi dengan interaksi pengguna.
Warna adaptif
Ikon adaptif kini dapat menggunakan warna dinamis untuk memungkinkan ikon aplikasi bertema yang dipersonalisasi.
Jika pengguna telah mengaktifkan ikon aplikasi bertema (dengan kata lain, mengaktifkan tombol Ikon bertema di setelan sistem), dan peluncur mendukung fitur ini, sistem akan menggunakan pewarnaan wallpaper dan tema yang dipilih pengguna untuk menentukan warna tint.
Seperti ikon yang beradaptasi dengan bentuk, ikon warna adaptif terdiri dari latar depan dan latar belakang. Hanya aset ikon latar depan monokromatik yang perlu disediakan. Sistem akan menangani latar belakang dan mewarnai keduanya dengan skema warna yang diekstrak.
Anda juga dapat menggunakan ikon monokromatik yang sama untuk ikon notifikasi.
Lama
Ikon lama harus disertakan untuk mendukung perangkat yang menjalankan versi Android yang lebih lama atau tidak mendukung fitur Adaptif (Sebelum 8.0).
Tidak akan memiliki resource latar depan dan latar belakang, serta dapat memiliki bentuk bebas. Jika Anda menggunakan template yang disediakan, hasil akhir grafis bentuk adaptif akan diekspor dalam ukuran yang diperlukan untuk ikon lama Anda.
Ikon notifikasi
Notifikasi adalah pesan yang ditampilkan oleh Android di luar UI aplikasi Anda untuk memberikan pengingat, komunikasi dari orang lain, atau informasi aktual lainnya dari aplikasi Anda kepada pengguna. Sistem menampilkan notifikasi di berbagai lokasi dan format, seperti ikon di status bar, entri yang lebih mendetail di panel samping notifikasi, sebagai badge di ikon aplikasi, dan di perangkat wearable yang tersambung secara otomatis.
Poster toko
Anda dapat menggunakan gambar fitur, screenshot, deskripsi singkat, dan video untuk menyoroti dan mempromosikan aplikasi Anda di Google Play serta saluran promosi Google lainnya.
Ikon aplikasi ini tidak menggantikan ikon peluncur aplikasi, tetapi versinya harus memiliki fidelitas dan resolusi yang lebih tinggi.
Mirip dengan ikon peluncur, ilustrasi dapat mengisi seluruh ruang aset, atau Anda dapat mendesain dan memosisikan elemen ilustrasi seperti logo di petak keyline.
Anda harus menyediakan ikon aplikasi persegi berukuran 512x512 px untuk memublikasikan listingan Play Store. Jika Anda menggunakan template ikon aplikasi Android, ikon ini akan disediakan saat diekspor menggunakan karya seni Bentuk Adaptif.
4. Praktik terbaik desain
Ikon peluncur meluncurkan aplikasi Anda untuk pengguna. Sebagai entri ke aplikasi Anda, entri tersebut harus dapat dikenali dan dibaca. Berikut beberapa praktik terbaik untuk memastikan kualitas ini ada di ikon peluncur Anda.
Buat gambar sederhana. Hindari beberapa lapisan, banyak efek, dan teks. Detail ini akan hilang atau sulit dilihat dalam ukuran kecil. 
Hindari bentuk yang rumit. Hal ini mencakup logo. Gunakan logo yang disederhanakan, jika memungkinkan, atau pertimbangkan simbol yang dikaitkan pengguna dengan aplikasi Anda. Bentuk yang mudah dibaca dan berbeda membantu menciptakan kesatuan bagi pengguna untuk dengan mudah mengenali aplikasi Anda dari berbagai konteks (warna adaptif dan notifikasi). 
Gunakan petak. Manfaatkan petak atau keyline untuk memastikan ilustrasi latar depan akan berfungsi saat dipangkas, termasuk ilustrasi full bleed. 
Pertimbangkan kontras. Untuk ikon bentuk adaptif dan lama, pastikan latar depan dan latar belakang ikon memiliki kontras yang mudah dibaca. Hindari penggunaan bayangan drop yang berat, yang dapat disalahartikan sebagai bayangan sistem. 
Pertahankan ilustrasi dalam zona aman. Pertahankan aset latar depan dalam 72x72 px (kecuali jika Anda menggunakan gambar penuh). Pertahankan latar belakang pada 108x108 piksel. Catatan: Bingkai gambar template ikon lebih besar dari 72x72 px agar Anda dapat membuat gambar ikon. Aset akan diubah ukurannya agar sesuai dengan spesifikasi.
Format vektor. Coba gunakan karya seni dalam format vektor (seperti file SVG, AI, PDF, dan EPS) daripada format raster (seperti file PNG, JPG, dan GIF). Hal ini memastikan karya seni Anda kompatibel dengan fitur yang lebih baru dan lebih mudah diedit. 
5. Warna adaptif dan ikon notifikasi
Sekarang giliran Anda membuat ikon sistem Android Anda sendiri.
- Cari file Figma ikon aplikasi Android.
- Dalam file, temukan frame Adaptive color. Lihat panel lapisan kiri untuk menemukan Warna adaptif > Komponen > art > Area gambar ikon > Gambar ikon bertema < tambahkan ikon Anda. Jika Anda sudah menyiapkan ikon monokromatik, salin ikon tersebut di sini untuk menggantikan ikon bugdroid contoh, lalu lanjutkan ke langkah 6.
- Jika Anda tidak memiliki ikon monokromatik, mulailah dengan logo atau ikon yang terkait dengan aplikasi Anda. Pelajari tips desain untuk memperbarui ikon Anda. Pertama, menyederhanakan dan menghindari bentuk yang rumit. Misalnya, ilustrasi yang digunakan dalam aplikasi disederhanakan dengan bentuk daun yang tidak terlalu rumit. Detail bayangan dan garis disimulasikan dengan ruang kosong.
- Sekarang, perbarui ukuran menggunakan kisi-kisi keyline. Di sini, kita telah menyetel pengubahan ukuran ke Skala dan memastikan ilustrasi berada dalam zona aman latar depan. Template disiapkan dengan gambar 4x, dan otomatis diubah ukurannya untuk diekspor, sehingga Anda dapat mendesain ikon dalam skala yang lebih besar.
- File disiapkan untuk berfungsi dengan Material Theme Builder guna membantu melihat pratinjau warna dinamis. Hubungkan gaya warna ikon latar depan ke On-surface-variant.
- Sekarang, dengan membuka Material Theme Builder dari Panel Plugin, Anda dapat mengacak warna sumber atau menambahkan gambar untuk memperbarui warna menggunakan warna sumber yang diekstrak.
- Seperti apa tampilannya pada resolusi yang berbeda atau di layar utama? Template disiapkan agar gambar yang ditempatkan dalam frame gambar muncul dalam berbagai konteks pratinjau.
- Sistem menggunakan ikon monokromatik sebagai notifikasi dan menampilkannya seperti itu dalam pratinjau.
6. Ikon adaptif dan versi lama
Sekarang, kita akan membuat ikon adaptif dan ikon lama untuk memastikan dukungan luas terhadap ikon.
- Dalam file, temukan Shape frame. Lihat panel lapisan kiri untuk menemukan Latar belakang ikon < tambahkan ikon Anda*. Jika Anda sudah menyiapkan ikon, salin ikon tersebut ke sini untuk menggantikan ikon bugdroid contoh, lalu lanjutkan ke langkah 5.* Jika Anda tidak memiliki ikon, mulailah dengan logo atau ikon yang terkait dengan aplikasi Anda atau gunakan kembali ikon monokromatik.
- Perbarui ikon latar depan, dengan mempertimbangkan praktik terbaik ikon. Di sini, saya mengembalikan warna ilustrasi asli, tetapi tetap mempertahankan detail minimal.
- Sekarang, perbarui ukuran menggunakan kisi-kisi keyline. Di sini, kita telah menyetel pengubahan ukuran menjadi Skala dan memastikan bahwa ilustrasi berada dalam zona aman latar depan.
- Ikon aplikasi bentuk adaptif juga dapat memiliki latar belakang yang berbeda. Dengan begitu, lapisan ikon dapat dipangkas dengan aman dan memberikan efek gerakan halus pada interaksi. Anda juga dapat menggunakan dan menentukan latar belakang warna solid di Android Studio.
- Pratinjau diperbarui untuk menampilkan tampilan latar depan dan latar belakang bersama-sama, di layar utama, berbagai bentuk pangkasan, dan sebagai ikon lama.
Bentuk yang digunakan untuk memangkas dapat diperbarui dalam pratinjau layar utama dengan memilih ikon dan mengubah opsi varian bentuk. 
7. Mengekspor
Bagus, Anda telah memperbarui template dengan ikon aplikasi Anda. Mari kita ekspor untuk diterapkan.
- Pastikan tidak ada yang dipilih di kanvas.
- Buka menu Figma > File > Ekspor (Shift + Cmd + E).
- Di menu ekspor, konfirmasi ekspor. Tindakan ini akan mendownload aset dari template.
Apa yang ada dalam ekspor?
Aset yang diekspor memiliki semua file yang diperlukan untuk menerapkan ikon aplikasi Anda, sebagai berikut
- Figma mengekspor ikon latar depan monokromatik untuk warna adaptif sebagai file SVG, beserta latar depan dan latar belakang untuk ikon bentuk adaptif.
- Figma juga menyediakan ikon lama di berbagai direktori mipmap yang disusun berdasarkan resolusi.
Selesai! Ikon Anda siap dikirim ke tim pengembangan.
Atau, jika Anda ingin melihat pratinjau ikon dalam Android Studio dan mengonversi SVG tersebut ke format aset akhir, lanjutkan ke langkah berikutnya.
8. Menggunakan Image Asset Studio
Mulai menggunakan Android Studio
- Download dan instal Android Studio.
- Luncurkan Android Studio.
Android Studio akan meminta Anda memilih opsi untuk memulai project baru atau memilih project yang ada.
- Pilih project baru untuk saat ini. Layar berikut akan memandu Anda menyiapkan project baru.
- Pilih template apa pun dari template awal, karena kita hanya akan melihat ikon peluncuran.
- Setelah itu, beri nama project baru Anda, lalu pilih Selesai. Pembuatan project baru akan memerlukan waktu beberapa saat.
Menggunakan Image Asset Studio
Sekarang kita dapat menambahkan ikon Anda ke project menggunakan alat yang berguna, Asset Studio.
- Untuk mengakses alat ini, pilih File menu > New > Image Asset.
- Saat Image Asset Studio terbuka, tambahkan lapisan latar depan dengan memilih ikon folder di Path. Pilih file SVG yang diekspor sebagai drawable-anydpi/ic_launcher.svg
- Pilih tab Background Layer, lalu pilih lapisan latar belakang yang diekspor. Atau, pilih Jenis Aset: Warna, untuk memiliki latar belakang peluncur warna solid.
- Kembali ke lapisan latar depan dan periksa kembali apakah gambar berada di dalam zona aman. Ubah ukuran ikon menjadi yang paling cocok secara visual.
- Setelah selesai, klik Next. Anda akan ditanya tempat ikon harus ditempatkan dalam project Anda (biarkan default atau alihkan ke Main). Kemudian, klik Selesai. Anda dapat menemukan aset peluncur di bagian res > drawable. Mengklik dua kali akan membuka pratinjau vektor drawable akhir.
- Salin dan tempel aset lapisan monokrom secara manual ke res/drawable atau res/drawable-v24 atau impor lapisan monokrom secara manual dengan mengklik kanan folder res dan memilih New > Vector Asset.
- Di res/mipmap-anydpi-v26/ic_launcher.xml dan res/mipmap-anydpi-v26/ic_launcher_round.xml, tambahkan atau ubah android:monochrome="path/to/monochrome/asset yang ada untuk mengarah ke aset monokrom yang benar.
9. Pratinjau dan referensi
Pratinjau di Emulator
Kami melakukannya untuk menambahkannya ke project aplikasi, sehingga kami dapat melihat pratinjau di perangkat atau emulator sungguhan. Mari kita lihat tampilan ikon kita yang sebenarnya.
Anda akan memiliki penyiapan emulator secara default, tetapi jika tidak, Buat Perangkat Virtual Android. Klik tombol putar hijau. Tindakan ini akan membangun project dan membuka emulator.
Aset akhir
Bagus sekali, Anda telah dapat memeriksa tampilan ikon peluncur di perangkat menggunakan emulator dan menambahkannya ke project aplikasi. Dengan demikian, mereka telah dikonversi menjadi bentuk produksi akhir. Tapi di mana mereka?
Aset berada sebagai resource dengan aplikasi Android, dan dapat ditemukan dengan membuka panel Resource (biasanya di sisi kiri). Lihat detail aplikasi, lalu temukan folder Res Anda. Klik kanan untuk membuka menu, lalu pilih Open in Finder (di Mac). Tindakan ini akan membuka jendela Finder. Jika ingin, Anda dapat menghemat waktu pengembangan dan QA dengan mengonversi dan menguji aset aplikasi lainnya menggunakan proses serupa. Jika Anda telah mengonversi aset aplikasi lainnya, folder ini dapat dibagikan dengan pengembangan.
10. Selamat
Bagus sekali, Anda telah mempelajari ikon Sistem Android yang diperlukan untuk membangun aplikasi Android, mendesain ikon Anda sendiri, menjelajahi resource template ikon, dan mungkin melangkah lebih jauh dengan mempelajari Android Studio untuk melihat pratinjau dan mengonversi aset untuk produksi.
Jika ada pertanyaan, hubungi kami kapan saja melalui @MaterialDesign di Twitter.
Nantikan konten desain dan tutorial lainnya di youtube.com/MaterialDesign