Latihan: Merancang sebuah komponen di Figma

Ikhtisar

Pada latihan ini, Anda akan mendesain komponen tombol UI di Figma. Komponen adalah elemen desain yang dapat digunakan kembali. Anggap saja mereka sebagai blok bangunan. Komponen membantu memberikan konsistensi pada desain Anda dan memungkinkan Anda untuk menerapkan penyesuaian di beberapa file dan proyek dengan cepat.

Mari kita mulai!

Langkah 1

• Buka file Figma baru.
• Buat bingkai dan pilih dimensi komponen yang akan Anda buat. Ini akan menjadi tombol tambah pesanan untuk perangkat seluler yang Anda buat wireframing-nya di latihan sebelumnya.
• Ukurannya adalah 380 x 50px.

Langkah 2

• Tambahkan warna danubah radius sudut agar lebih menarik bagi pengguna . Hal ini akan memperhalus desain dan membuatnya lebih menarik.

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

Langkah 3

• Menyisipkan bidang teks.

Langkah 4

• Pilih bingkai dan teks.

• Membuat komponen.

Langkah 5: Varian

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

Gerakan yang umum termasuk menekan, mengarahkan kursor, dan mengeklik saat menggunakan aplikasi. Anda dapat menambahkan varian ke komponen setelah Anda membuatnya. Pertimbangkan tiga skenario saat mendesain tombol perangkat seluler: tidak disentuh, diklik, dan dinonaktifkan. Gunakan tombol tak tersentuh sebagai tombol default.

Lakukan hal berikut:

• Tambahkan varian pada menu sebelah kanan ketika Anda telah mengeklik komponen. Cukup klik ikon plus dan beri nama varian Anda.
• Beri gaya pada varian dengan mengubah warna isian, warna teks, dll.

Langkah 6: Gunakan komponen

Setelah membuat komponen, Anda dapat langsung menggunakannya.

• Seret komponen di bagiankomponen lokalpada halamanaset ke kanvas.

Langkah 7: Pilih varian yang benar

• Pilih varian yang sesuai dengan keadaan atau kondisi layar.