-
Buatlah sebuah Rectangle (R) di atas banner seperti ini:
Kemudian atur warnanya menjadi Putih (FFFFFF) dengan mengganti property yang ada pada bagian Fill.
-
Anda juga dapat mengatur seberapa melengkung sudut suatu elemen dengan mengatur radius seperti berikut:
-
Kemudian untuk membuat representasi ikon pencarian, lakukan Copy Paste elemen Image yang sudah dibuat sebelumnya. Tentu Anda sudah mahir dengan cara ini, kan? Cukup Ctrl + C untuk Copy dan Ctrl + V untuk Paste. Perhatikan pada panel sebelah kiri ketika sebuah elemen sudah tersalin. Namun, perlu diperhatikan bahwa lokasi salinan biasanya sama dengan lokasi asalnya. Jadi untuk mengeceknya, pindahkan lokasinya seperti berikut:
-
Namun, jika diperhatikan posisi gambar masih ada di sebelah bawah menu pencarian. Untuk memindahkannya ke atas, cukup klik kanan dan pilih Bring to front atau menggunakan shortcut Ctrl+Shift+].
Sebenarnya ada empat mekanisme untuk memindahkan posisi, yaitu:- Bring forward / Ctrl+] : Memindahkan satu posisi ke atas.
- Bring to front / Ctrl+Shift+] : Memindahkan posisi ke paling atas.
- Send backward / Ctrl+[ : Memindahkan satu posisi ke bawah.
- Send to back / Ctrl+Shift+[ : Memindahkan posisi ke paling bawah.
-
Kemudian ubah ukuran gambar menjadi 30x30 dan letakkan di bagian kiri kolom pencarian seperti ini:
Supaya lokasi gambar tepat di tengah kolom, manfaatkan fitur alignment pada Figma. Caranya pilih kedua elemen dengan menggunakan Shift dan pilih ikon Align vertical centers pada property seperti ini:
Untuk beberapa pilihan alignment yang lain adalah:- Align left (Alt+A) : Rata kiri
- Align horizontal centers (Alt+H) : Rata tengah secara horizontal
- Align right (Alt+D) : Rata kanan
- Align top (Alt+W) : Rata atas
- Align vertical centers (Alt+V) : Rata tengah secara vertikal
- Align bottom (Alt+S) : Rata bawah
