Menyesuaikan warna Material

1. Pengantar

Terakhir Diperbarui: 18/04/22

Aplikasi dapat menggunakan berbagai warna dari skema dasar, warna dinamis yang dibuat pengguna, atau warna merek.

Lab warna Material You sebelumnya membahas cara memvisualisasikan warna dinamis dalam mockup desain, tetapi Anda juga dapat menggunakan penerapan tema Material untuk menyesuaikan aplikasi dengan warna merek Anda. Dengan memanfaatkan sistem warna baru dengan warna merek Anda, Anda akan membuat skema warna yang mudah diakses dan dapat memiliki fitur yang lebih dinamis.

Yang akan Anda pelajari

Cara membuat tema kustom dengan builder tema Material.
Menerapkan tema kustom ke maket desain.
Kemungkinan untuk menggabungkan warna dinamis dan kustom.

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
Opsional: Memvisualisasikan warna dinamis dalam codelab aplikasi Anda

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 Customizing Material 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

File yang Anda pelajari berisi sejumlah materi khusus yang dimulai dengan pengantar. Setiap bagian dibagi menjadi deretan artboard yang saling ditautkan, yang berisi beberapa konsep inti untuk bagian terkait dan diikuti dengan latihan. Setiap bagian dan latihan yang menyertainya bersifat saling melengkapi dan harus diselesaikan secara berurutan.

Codelab ini memandu Anda memahami konsep dan latihan tersebut secara lebih mendetail. Baca materi tersebut sambil mengikuti codelab untuk mempelajari lebih lanjut fitur Material You yang baru.

Dimulai dengan artboard Pengantar, terdapat tombol yang menautkan artboard secara berurutan. Untuk mengakses link, klik tombol tersebut.

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. Skema warna Material

Pertama, ringkasan tentang cara penggunaan warna dalam Material dan cara kerja sistem warna baru.

Warna digunakan untuk mengekspresikan gaya dan menyampaikan makna, baik makna tersebut bersifat pribadi bagi pengguna, branding, atau makna semantik. Sistem warna menangani variabilitas skema warna yang berubah secara dinamis dan muncul seiring perubahan input pengguna. Logika hubungan tonal dan perubahan hue serta chroma memberikan dasar untuk penerapan warna yang fleksibel.

Ruang warna menyediakan cara untuk membuat skema warna terang dan gelap yang mudah diakses yang diekstrak dari warna sumber dengan membuat 5 warna utama dan kemudian palet tone, dengan langkah-langkah tone tertentu yang dipilih.

Teknik perubahan warna ini tidak hanya menyediakan skema warna yang mudah diakses, tetapi juga menyediakan metode untuk membuat skema bermerek yang mudah diakses dan kohesif dengan skema warna yang dibuat pengguna.

Skema warna dibuat dari 5 warna utama menjadi palet tonal untuk membuat skema yang mudah diakses

Tema bermerek

M3 mendukung penerapan sistematis parameter kustom untuk membantu menentukan dan mempertahankan gaya yang mengomunikasikan merek Anda.

Skema kustom adalah skema warna yang tidak berasal dari wallpaper perangkat pengguna, tetapi dari pembuat aplikasi. Sistem warna M3 dan skema kustom adalah dasar untuk mengaktifkan warna dinamis di aplikasi.

Skema kustom akan menjembatani kesenjangan antara M2 dan M3 untuk memudahkan migrasi dengan menyiapkan token yang diperlukan (slot warna) dan menciptakan pengalaman yang lebih bermerek.

Menambahkan warna merek ke Material Theme Builder

4. Skema warna: Warna aksen

Fondasi skema warna merupakan kumpulan lima warna utama yang masing-masing terkait dengan palet tonal terpisah dengan 13 tone. Nuansa spesifik dari setiap palet tonal ditetapkan ke peran warna di seluruh UI. Mari kita mulai dengan membuka plugin Material Theme Builder dan menyiapkan warna aksen pertama: Primary.

Jika hanya memasukkan warna primer, warna tersebut akan digunakan sebagai sumber untuk membuat seluruh skema warna.

Di modal plugin, klik Kustom. Tindakan ini akan mengalihkan tema ke tema kustom. Untuk lab ini, kita akan menggunakan tema material yang sudah dibuat, tetapi tema baru juga dapat dibuat jika Anda mau. Pelajari lebih lanjut di memvisualisasikan warna dinamis.
Selanjutnya, kita akan menetapkan Warna primer utama. Warna primer dapat berupa warna merek utama Anda, atau warna aksen primer yang paling banyak digunakan. Warna utama lainnya akan diisi berdasarkan warna primer. Artinya, Anda tidak perlu menambahkan warna tambahan jika tidak membutuhkannya.

5. Membangun tema lainnya

Warna primer digunakan untuk membuat tema, tetapi Anda dapat memiliki warna aksen untuk mendukung warna merek utama.

Di modal plugin, tambahkan warna sekunder dengan mengklik kotak Warna sekunder. Peran sekunder digunakan untuk komponen yang kurang menonjol di UI, sekaligus memperluas peluang ekspresi warna. Warna sekunder akan diperbarui dalam skema warna dan UI Aplikasi.
Lakukan hal yang sama untuk Tersier. Peran tersier digunakan untuk aksen kontras yang dapat digunakan untuk menyeimbangkan warna primer dan sekunder atau membawa perhatian yang lebih tinggi pada elemen. Peran warna tersier diserahkan kepada pembuat untuk digunakan sesuai pertimbangan mereka dan dimaksudkan untuk mendukung ekspresi warna yang lebih luas dalam produk.
Sekarang netral, peran netral digunakan untuk permukaan dan latar belakang, serta teks dan ikon dengan penekanan tinggi.

Sediakan warna sekunder, tersier, dan netral untuk menyesuaikan skema warna Anda sepenuhnya.

Warna merek Anda kini akan disertakan dalam skema warna inti yang diubah agar sesuai dengan ruang warna M3, sepenuhnya dapat diakses, serta dapat diekspor dan diterapkan dalam kode sebagai tema.

6. Menerapkan tema Anda

Peran & Token

Setiap warna aksen (primer, sekunder, dan tersier) disediakan dalam kelompok empat warna kompatibel dengan warna berbeda untuk penyandingan, penentuan penekanan, dan ekspresi visual. Grup ini terdiri dari warna aksen, warna on, penampung, dan warna on penampung.

Peran netral digunakan untuk permukaan dan latar belakang, serta teks dan ikon dengan penekanan tinggi.

Token desain merepresentasikan keputusan desain kecil yang berulang dan membentuk gaya visual sistem desain. Token menggantikan nilai statis, seperti kode heksadesimal untuk warna, dengan nama yang cukup jelas. Token desain menghubungkan pilihan gaya secara bermakna yang jika tidak akan kekurangan hubungan yang jelas.

Plugin Figma membuat token dan memasukkan warna sumber Anda sendiri dalam bentuk gaya Figma untuk terhubung dengan maket, panduan gaya merek, dan bahkan sistem desain yang ada.

Token desain menciptakan bahasa umum antara peran warna dan penerapan.

Hierarki warna

Ketika menerapkan peran warna pada mockup Anda, pertimbangkan urutan nilai penting, atau hierarki, pada elemen Anda. Konsep ini tidak hanya akan membantu menetapkan warna merek pada perannya masing-masing, tetapi juga memetakannya dalam UI. Biasanya, warna yang lebih jenuh atau pekat akan menarik perhatian pengguna terlebih dahulu. Itulah sebabnya peran warna Primer memetakan komponen yang lebih berfokus pada pesan ajakan (CTA). Meskipun Material Theme Builder menggunakan sistem warna M3 untuk menghasilkan warna yang sesuai, memberikan warna sekunder atau tersier dengan saturasi yang lebih tinggi akan menghasilkan warna yang lebih terang daripada Warna Primer. Pertimbangkan urutan yang Anda inginkan saat pengguna berinteraksi dengan UI dan konten untuk membantu menetapkan peran warna. Tidak semua komponen harus menggunakan warna Primer.

Warna solid yang tersaturasi paling menarik perhatian.

7. Beralih ke tema

Untuk menerapkan tema kustom yang Anda buat ke desain, kita perlu menyetel mockup ke token dalam material-theme yang ada.

Komponen Material dilengkapi dengan peran yang telah dipetakan sebelumnya dan akan berfungsi dengan Material Theme Builder secara otomatis.

Tukar ke tema dari modal Material Theme Builder.

Mari kita tetapkan semua token (gaya Figma) dalam tata letak di sebelah kanan untuk menggunakan tema ini dengan memilih frame tata letak dan mengklik ganti. Anda akan melihat pembaruan awalan gaya dalam warna pilihan.
Tidak semua hal diperbarui? Komponen kustom, seperti kartu tips perawatan tanaman, harus menerapkan gaya Figma terlebih dahulu. Pilih penampung tips perawatan, dengan penampung yang dipilih, klik ikon 4 titik untuk menetapkan gaya, pilih penampung tersier. Lakukan hal yang sama dengan konten kartu tips perawatan, kecuali tetapkan on-tertiary container. Label kecil dalam daftar juga merupakan komponen kustom, tetapi kita akan membahasnya nanti.
Komponen Desain Material menggunakan pemetaan default, tetapi Anda dapat bereksperimen dengan penetapan gaya agar sesuai dengan UI. Luangkan waktu untuk bereksperimen dengan berbagai hierarki warna dan ekspresi merek.

(Hanya tema yang disertakan dalam file ekspor untuk kode.) Jika bekerja sama dengan engineer, bagikan tiruan untuk mengomunikasikan pemetaan token, karena hal ini tidak akan disertakan dalam ekspor)

Membuka plugin tanpa tema akan menampilkan layar penyiapan untuk memulai. ‘Mulai' akan menghasilkan dasar pengukuran default ‘material-theme' sebagai grup gaya Figma untuk dihubungkan ke mockup Anda atau digunakan dengan kit Desain Material.

8. Melampaui skema inti

Sekarang Anda memiliki tema warna bermerek yang dipetakan ke komponen dan mockup desain, tetapi Anda mungkin memiliki warna tambahan yang perlu disertakan. Di sinilah skema yang diperluas berperan untuk memungkinkan penambahan warna kustom.

Warna ini dapat berupa warna semantik, warna khusus merek, atau bahkan warna khusus produk, yang perlu diberi peran dan diubah melalui algoritma warna atau tetap seperti yang dimasukkan.

Skema warna yang diperluas juga memperkenalkan kemungkinan menggabungkan warna dinamis (yang dihasilkan pengguna) dengan warna merek Anda. Mengizinkan skema inti memiliki pengaruh pengguna yang dipersonalisasi, sementara warna merek ditetapkan dalam skema yang diperluas. Artinya, elemen UI dapat lebih personal bagi pengguna Anda dan warna merek Anda dapat memiliki momen yang lebih berdampak dan presisi dalam aplikasi.

Skema inti dapat diperluas untuk menyertakan warna kustom.

9. Memperluas & menyesuaikan

Memperluas skema dengan warna kustom memungkinkan penambahan warna seperti warna semantik atau warna branding tambahan.

Skema kustom dengan warna kustom yang ditambahkan.

Di modal plugin, di bagian warna utama, klik Tambahkan Warna.
Tema saat ini akan diperbarui dengan baris Custom0 baru. Perbarui warna ini dengan mengklik kotak warna, lalu pilih warna baru.
Warna tambahan ini dapat ditemukan sebagai gaya dalam gaya hanya baca sebagai Custom0. Palet dan skema tonal keduanya ada. Mari petakan beberapa label daftar dengan warna baru dengan memilih latar belakang label dan menetapkan salah satu peran warna yang ditambahkan (penampung on-custom0).

Menetapkan warna kustom dalam warna yang dipilih.

Material Theme Builder otomatis menghasilkan warna sebagai Custom#. Untuk mengganti nama warna kustom yang ditambahkan, luaskan grup gaya tema di panel gaya (grup ini akan muncul saat tidak ada yang dipilih). Kemudian, cari Custom0 dalam subgrup sumber. Mengganti nama sumber di sini akan mengganti nama warna dalam modal plugin.

Gaya warna kustom dapat ditemukan di panel gaya.

Menghapus warna yang ditambahkan dapat dilakukan dengan cara yang serupa, yaitu mengklik kanan dan menghapus gaya. Warna yang ditambahkan akan dihapus saat plugin dibuka lagi. Penggantian nama dan penghapusan mungkin tidak tercermin dalam diagram warna.

10. Selamat

Kerja bagus dalam mempelajari cara membuat tema warna kustom menggunakan Material Theme Builder, menerapkannya ke mockup desain, dan menambahkan skema warna. Sistem warna Material 3 yang baru menghadirkan warna yang mudah diakses, fleksibel, dan kohesif ke dalam desain. Kami tidak sabar ingin melihat cara Anda menggunakannya.

Jika ada pertanyaan, silakan hubungi kami kapan saja menggunakan @MaterialDesign di Twitter.

Nantikan konten desain dan tutorial lainnya di youtube.com/MaterialDesign