Panduan ini menjelaskan cara membuat tampilan jam, menambahkan elemen berbasis waktu, dan menyertakan dukungan untuk foto yang dipilih pengguna, termasuk galeri multi-foto. Untuk mengetahui fitur tambahan, lihat panduan lanjutan.
Membuat tampilan jam
Untuk membuat tampilan jam, gambar bingkai di Figma, lalu konfigurasikan sebagai berikut:
Tetapkan ukurannya menjadi 450 unit lebar dan 450 unit tinggi:
Gambar 1: Panel tata letak frame Figma, yang menampilkan tampilan jam 450x450 Ukuran lain juga bisa digunakan, tetapi 450x450 direkomendasikan untuk tampilan jam Wear OS dan diperlukan untuk diekspor ke Watch Face Studio.
Untuk tampilan jam yang hemat baterai, setel warna pengisi bingkai menjadi hitam:
Gambar 2: Panel pengisian frame yang menampilkan warna pengisi hitam Tetapkan nama frame menjadi nama yang Anda inginkan untuk tampilan jam. Tampilan ini muncul di smartwatch pengguna Anda.
Setelah membuat dan mengonfigurasi bingkai, buka plugin Watch Face Designer, lalu pilih bingkai yang baru saja Anda buat. Pratinjau langsung akan muncul di jendela Watch Face Designer.
Menambahkan elemen ke tampilan jam
Tambahkan beberapa elemen ke tampilan jam agar pengguna dapat melihat waktu.
Waktu analog
Gambar persegi panjang, yang berfungsi sebagai jarum detik di smartwatch Anda.
Pastikan bahwa, saat menampilkan awal menit baru, persegi panjang berpusat secara horizontal dan tepi bawahnya berada di tengah tampilan jam, seperti halnya jarum jam sungguhan. Secara default, Figma mengaktifkan Paskan ke Geometri, yang menampilkan panduan merah untuk membantu Anda menyelaraskan persegi panjang ini:
Selanjutnya, beri tahu Watch Face Designer bahwa lapisan ini bukan hanya untuk dekorasi. Pilih persegi panjang yang Anda gambar di langkah sebelumnya, lalu buka jendela Watch Face Designer dan ubah Perilaku dari "Statis" menjadi "Jarum detik".
Perhatikan bagaimana jarum jam mulai bergerak sekali setiap detik, mensimulasikan detak jam. Anda dapat menyesuaikan cara rotasinya jika mau, dan Anda dapat membuat jarum menit dan jarum jam dengan cara yang sama seperti yang Anda lakukan untuk membuat jam ini.
Untuk mengetahui saran tentang sub-dial, lihat panduan penggunaan lanjutan.
Waktu digital
Kita juga dapat menampilkan waktu menggunakan format digital. Untuk melakukannya, buat lapisan teks di Figma. Untuk saat ini, masukkan Hh:Mm:Ss sebagai konten teks
lapisan.
Di jendela Watch Face Designer, ubah Perilaku teks dari "Statis" menjadi "Waktu digital". Pratinjau menunjukkan tampilannya di perangkat nyata:
Untuk mempelajari kumpulan karakter yang tersedia yang dapat Anda gunakan, ikuti panduan template yang ditampilkan di sidebar jendela Watch Face Designer. Misalnya, a menunjukkan apakah waktu saat ini adalah "AM" atau "PM", yang dapat Anda gunakan dengan "format jam" untuk menampilkan waktu 12 jam.
Anda dapat memilih font apa pun di Figma, termasuk font yang tidak tersedia di Wear OS, dan font tersebut akan otomatis diekspor dan dipaketkan ke dalam tampilan jam Anda. Perlu diingat bahwa setiap font memiliki persyaratan lisensinya sendiri untuk redistribusi.
Melihat pratinjau waktu yang berbeda
Untuk melihat tampilan jam Anda pada waktu yang berbeda-beda, Anda dapat menyesuaikan waktu pratinjau dengan menarik penggeser di bagian bawah jendela Watch Face Designer:
Setelah selesai melihat pratinjau waktu yang berbeda, Anda dapat mereset waktu ke waktu saat ini dengan memilih tombol Reset di sudut kiri bawah:
Menyertakan foto yang disediakan pengguna
Tampilan jam Anda dapat menyertakan slot untuk foto kustom. Hal ini memungkinkan pengguna menambahkan foto pribadi sebagai latar belakang, sambil tetap menampilkan waktu dan elemen lain yang telah Anda sertakan dalam desain Anda.
Untuk mendukung foto kustom, tambahkan lapisan ke tampilan jam, dan tetapkan Perilaku ke "Foto yang disediakan pengguna". Untuk contoh ini, kita menggunakan contoh foto bunga sebagai gambar default untuk lapisan ini. Gambar ini digunakan sebagai pengganti sebelum pengguna menetapkan fotonya sendiri, atau saat pengguna memilih untuk tidak menggunakan salah satu fotonya.
Mendukung pemilihan beberapa foto
Tampilan jam Anda dapat mendukung pemilihan beberapa foto. Watch Face Designer menyebutnya sebagai galeri:
Jika Pemilihan foto disetel ke "Galeri", pengguna dapat memilih beberapa foto untuk slot ini, dan smartwatch akan menampilkannya secara bergantian di berbagai titik, bergantung pada pilihan Anda di bagian "Ubah foto:"
- Jika "Saat diketuk" dipilih, foto akan berubah saat pengguna mengetuk lapisan Anda.
- Jika "Saat angkat pergelangan tangan" dipilih, tampilan akan berubah setiap kali pengguna mengangkat pergelangan tangan. Saat ini, hal ini tidak dapat disesuaikan menggunakan Watch Face
Designer. Pelajari lebih lanjut cara Format Tampilan Jam memberikan dukungan yang lebih canggih menggunakan atribut
changeAfterEvery.
Pelajari lebih lanjut
Untuk melihat pratinjau tampilan jam di perangkat fisik, lihat panduan ekspor.
Untuk opsi dan fitur lainnya, lihat panduan penggunaan lanjutan.