1. Pengantar
Terakhir Diperbarui: 21/09/21
Aplikasi dapat menggunakan berbagai warna dari skema dasar, warna dinamis yang dibuat pengguna, atau warna merek.
Bersiaplah untuk mempelajari fitur warna dinamis baru yang diperkenalkan dengan Material You. Dalam lab ini, Anda akan membuat palet warna dinamis untuk mempelajari cara kerja sistem warna, konsep pendorong yang membuat palet warna yang mudah diakses, dan metode untuk membantu memvisualisasikan aplikasi Anda dengan warna dinamis menggunakan alat desain terbaru.
Yang akan Anda pelajari
- Yang baru di warna Material Design
- Cara menerapkan warna yang dibuat pengguna ke aplikasi Anda
- Alat untuk membantu
Prasyarat
Untuk lab ini, kita akan membangun beberapa konsep desain dasar.
- Pengetahuan tentang konsep desain dasar: palet warna
- Pengetahuan tentang peran dan skema warna Android saat ini
- Pengetahuan tentang Figma
Yang Anda butuhkan
2. Memulai
Penyiapan
Untuk memulai, Anda harus mengakses file Figma Designlab. Semua yang Anda perlukan untuk mengikuti lab tersedia di file Figma. Anda dapat mendownload dan mengimpor file atau menduplikasinya dari Figma Community.
Pertama, login ke Figma atau buat akun.
Menduplikasi file dari Figma Community
Buka file Visualizing dynamic color in your app with Material Design atau telusuri Visualizing dynamic color in your app with Material Design di Figma Community. Klik Duplicate di pojok kanan atas untuk menyalin file tersebut ke dalam file Anda.
Tata Letak File
Periksa file. Anda akan melihat file tersebut berfungsi mandiri, yang dimulai dengan pendahuluan. Setiap bagian dibagi menjadi deretan artboard yang saling ditautkan, yang berisi beberapa konsep inti untuk bagian terkait dan diikuti dengan latihan. Bagian-bagian dan latihannya saling melengkapi sehingga harus diselesaikan secara berurutan.
Codelab ini akan memandu Anda memahami konsep dan latihan tersebut secara lebih mendetail. Sebaiknya Anda membaca codelab ini untuk mempelajari lebih lanjut fitur Material You yang baru.
Dimulai dengan artboard Pengantar, terdapat tombol yang menautkan artboard secara berurutan. Akses link tersebut dengan mengklik tombol.
Menginstal plugin Figma
Codelab ini sangat bergantung pada Plugin Figma baru untuk membuat token dan skema warna dinamis. Instal Plugin Figma langsung dari halaman Figma Community atau telusuri "Material Theme Builder" di Figma Community.
3. Konsep warna
Apa itu Warna dinamis?
Material You membayangkan ulang warna sebagai pengalaman yang lebih individual. Melalui ekstraksi warna dinamis, rentang kemungkinan pengalaman warna menjadi jauh lebih luas.
Warna dinamis adalah bagian penting dari Material You, tempat algoritma memperoleh warna kustom dari wallpaper pengguna untuk diterapkan ke aplikasi dan UI sistemnya.
Luminans
Warna dinamis dibuat agar berfungsi di semua konteks yang tidak dapat diprediksi. Untuk mengelola rasio kontras dalam berbagai konteks tampilan, tingkat luminans merupakan atribut penting agar warna berhasil digabungkan sehingga tim produk tidak harus menguji setiap kombinasi warna tertentu.
Elemen dengan nilai luminans serupa tidak akan memiliki kontras yang sesuai untuk kejelasan teks, sedangkan elemen dengan nilai luminans yang berbeda akan lebih mudah dibedakan.
Palet tonal
Palet tonal adalah terjemahan satu hue (warna yang diekstrak secara dinamis) ke dalam spektrum tone terkait. Terjemahan warna ke dalam tiga belas warna memungkinkan sekelompok rentang warna, yang disebut palet warna, diterapkan dalam konteks yang berbeda, mulai dari elemen individual di dalam komponen hingga seluruh tema aplikasi.
Warna yang diterjemahkan ke dalam rentang tone.
4. Mengekstrak warna
Menyemai hingga menyusun skema
Mari kita lihat cara kerja warna dinamis dengan Material Theme Builder.
- Buka Material Theme Builder. Dengan dinamis dipilih, masukkan gambar atau pilih salah satu dari browser file. Perhatikan bahwa warna utama akan diperbarui berdasarkan gambar.
- Nilai warna diekstrak dari wallpaper dan diberi "jenis" yang menentukan bagaimana warna akan berhubungan dengan warna lain dalam skema. "Warna utama" ini (di sebelah kanan) telah diperbarui untuk mencerminkan nilai tersebut.
- Kemudian, warna tersebut diterjemahkan ke dalam palet tone berbasis luminans, yang menghasilkan lima rentang warna dengan tone dari terang hingga gelap. Palet tonal diberi label seperti itu dalam output warna.
- Dari lima rentang tonal, tone tertentu (berdasarkan luminansi) dimasukkan ke dalam peran bawaan yang membentuk skema. Warna dipetakan ke skema melalui token desain.
Peran warna tersier yang dibuat dari rentang tonal tersier dan dipetakan ke komponen.
5. Tema dan token
Token desain memungkinkan fleksibilitas dan konsistensi di seluruh produk dengan memungkinkan desainer, misalnya, menetapkan peran warna elemen dalam UI, bukan nilai yang ditetapkan. Token berfungsi sebagai jembatan antara peran yang ditetapkan pada elemen dan nilai warna yang dipilih untuk peran. Mendesain untuk peran warna, bukan warna tertentu, lebih mendasar dengan diperkenalkannya warna dinamis.
Tema berisi token Desain Material untuk warna dan huruf, sehingga memastikan desain dan kode memiliki satu sumber kebenaran untuk merepresentasikan dasar, bersama dengan palet yang dibuat pengguna dan nilai kustom.
Di Figma, plugin menghasilkan token ini sebagai gaya, yang berarti jika menggunakan gaya yang dihasilkan, Anda akan menggunakan token MD.
Warna dalam palet tonal dipetakan ke skema terang atau gelap melalui token desain.
Sistem pemetaan menetapkan nada untuk setiap elemen dalam komponen.
Menyiapkan token
Untuk menerapkan warna dinamis ke desain, kita perlu menyetel maket ke token dalam tema material yang ada.
- Mari kita tetapkan semua token (gaya Figma) dalam tata letak di sebelah kanan untuk menggunakan tema ini dengan memilih frame tata letak dan mengklik swap. Anda akan melihat pembaruan awalan gaya dalam warna pilihan.
Mengklik ganti untuk memperbarui tema terhubung yang digunakan dalam desain yang dipilih.
- Sekarang, masukkan gambar atau pilih salah satu dari penjelajah file. Nilai mockup akan menggunakan warna dinamis yang diekstrak dari gambar.
- Klik tombol acak. Tindakan ini akan mengacak warna awal yang akan diekstrapolasi, bukan diekstrak dari gambar. Ini adalah cara lain untuk melihat dengan cepat pengaruh warna dinamis terhadap tiruan desain Anda.
Mengklik tombol acak untuk mengacak warna awal.
Membuka plugin tanpa tema akan menampilkan layar penyiapan untuk memulai. ‘Mulai' akan menghasilkan dasar ‘material-theme' default sebagai grup gaya figma untuk dihubungkan ke mockup Anda atau digunakan dengan kit Desain Material.
6. Menerapkan ke UI
Tata letak yang disediakan dibuat dengan Kit Desain Material yang menggunakan token Desain Material, tetapi ada beberapa elemen kustom yang tidak dipetakan.
- Pilih kartu artikel. Di pengisian, tetapkan gaya (ikon empat titik) ke material-theme/surface. (Anda juga dapat menelusuri permukaan).
- Dengan proses yang serupa, pilih jenis di kartu dan tetapkan ke di permukaan dan kotak centang ke utama.
Gaya Figma yang digunakan dalam kartu desain.
Selanjutnya, kita akan membuat tiruan tambahan untuk melakukan iterasi pada skema lainnya.
Membuat tema dan melakukan iterasi
Kita telah sepenuhnya menghubungkan mockup untuk memvisualisasikan warna dinamis, tetapi kita juga dapat membuat beberapa tema dan menukarnya ke mockup terpisah untuk memvisualisasikan berbagai warna dinamis sekaligus.
- Di modal plugin, klik dropdown dan pilih ‘Tambahkan tema baru.'
- Buat nama tema yang unik, lalu klik 'Buat tema.' Tindakan ini juga akan menghasilkan diagram warna baru untuk setiap tema yang dibuat.
Menambahkan tema baru melalui menu dropdown.
- Tambahkan gambar atau acak warna awal.
- Di modal plugin, pilih mockup (komponen UI Aplikasi), lalu klik ganti. Tindakan ini akan memperbarui nilai gaya ke tema saat ini yang ditampilkan di dropdown.
- Duplikasikan (CMD + D) mockup.
Mengklik ganti untuk memperbarui tema terhubung yang digunakan dalam desain yang dipilih.
- Ulangi langkah 1–5.
Sekarang Anda memiliki beberapa desain dengan iterasi warna dinamis yang berbeda.
7. Selamat
Selamat telah mempelajari dan menerapkan warna dinamis. Material Theme Builder hadir untuk membantu mempermudah penggunaan warna dalam Desain Material dengan memvisualisasikan warna dinamis, membuat tema kustom, dan mengekspor ke kode.
Jika ada pertanyaan, silakan hubungi kami kapan saja menggunakan @MaterialDesign di Twitter.
Nantikan konten desain dan tutorial lainnya di youtube.com/MaterialDesign