Bacaan: Latihan: Merancang komponen interaktif

Gambaran Umum

Anda telah merangkum prinsip-prinsip UX dan UI dan membuat wireframe aplikasi Anda. Dalam latihan ini, Anda akan melangkah lebih jauh dengan menemukan cara menggunakan tata letak otomatis di Figma untuk membuat komponen interaktif seperti tombol. Tata letak otomatis dapat ditambahkan ke dalam frame untuk membuat komponen dinamis yang merespons ukuran objek turunannya. Misalnya, sebuah tombol yang membesar seiring dengan panjang labelnya.

Skenario

Anda dapat menggunakan kembali tombol komponen interaktif yang akan Anda buat dengan menggunakan tata letak otomatis dalam latihan ini dalam solusi Anda untuk aplikasi pesan antar makanan Little Lemon.

Petunjuk

Langkah 1: Buat tombol dasar menggunakan tata letak otomatis

• Buka file Figma baru dan pilih alat teks untuk membuat layer teks.
• Sekarang beri label dengan mengetik Tombol.

• Dengan layer yang dipilih, gunakan pintasan shift + A untuk menambahkan tata letak otomatis. Ini akan menempatkan label ke dalam bingkai tata letak otomatis.

• Tambahkan isian menggunakan warna #F4CE14 (kuning), yang merupakan salah satu warna merek Little Lemon.

Catatan: Anda sekarang telah membuat bingkai tata letak otomatis yang berfungsi sebagai dasar untuk tombol. Ketika Anda mengubah label, tombol akan secara dinamis mengubah ukuran agar sesuai, seperti pada contoh di bawah ini:

• Ubah radius sudut menjadi 8.

Catatan: Nilai maksimum untuk radius sudut adalah 50% dari tinggi elemen.

Langkah 2: Membuat komponen

Pilih bingkai dan teks, lalu buat komponen. Atau, gunakan pintasan keyboard, Ctrl + Alt + K pada Windows atau Cmd + Alt + K pada Mac.

Langkah 3: Tambahkan varian

Varian memungkinkan Anda untuk mengelompokkan versi visual yang berbeda dari komponen Anda ke dalam satu wadah. Varian adalah kombinasi komponen yang dapat Anda kelompokkan sebagai satu set komponen. Varian ditambahkan untuk meningkatkan realitas desain melalui gerakan alami. Anda dapat menambahkan varian ke komponen setelah Anda membuatnya.

Pertimbangkan dua skenario saat mendesain tombol perangkat seluler: tidak disentuh dan diklik.

• Gunakan tombol yang tidak disentuh sebagai tombol default.
• Sekarang, lakukan langkah berikut untuk menambahkan varian:
  • Pilih komponen dan tambahkan varian pada menu sebelah kanan dengan mengeklik ikon plus.
  • Beri nama varian Anda.
  • Beri gaya pada varian dengan mengubah warna isian dan atau teks.

Langkah 4: Membuat komponen interaktif

• Buka bagian Prototipe .
• Pilih tombol atas dan seret ikon Plus ke tombol bawah.
• Pilih Aktifkan klik pada panel Detail interaksi.
• Ubah animasi menjadi Smart animate dan atur waktu ke 600 ms.
• Ulangi langkah-langkah ini dengan tombol bawah.

Langkah 5: Gunakan komponen

Setelah membuat komponen, Anda dapat langsung menggunakannya, jadi:

• Buat sebuah bingkai.
• Kemudian, seret komponen (di bagian Komponen lokalpada halamanAset) ke bingkai.

Langkah 6: Melihat komponen interaktif

Buka mode Present di sudut kanan atas dan uji tombol Anda.

Kesimpulan

Dalam latihan ini, Anda telah mempelajari cara menggunakan tata letak otomatis untuk membuat komponen interaktif. Di sini, opsi tata letak otomatis memungkinkan tombol Anda mengubah ukuran secara otomatis saat lebih banyak properti ditambahkan ke dalamnya.