Skip to main content
Mari kita lanjutkan dengan menambahkan ikon pencarian. Sebenarnya bisa saja Anda membuat ikon sendiri. Namun, itu akan membutuhkan waktu, belum lagi gaya pada satu ikon dengan ikon lainnya bisa saja berbeda. Oleh karena itu, pada awal latihan ini kita memanfaatkan ikon dari Material Design. Ada dua cara untuk melakukannya, cara pertama yaitu langsung mengunduh ikon dari https://fonts.google.com/icons. Cara kedua yaitu memanfaatkan Plugin Material Design yang ada di Figma. Nah, untuk latihan ini kita akan menggunakan cara kedua.
  1. Langkahnya yaitu klik logo FigmaPlugins → Browse plugins in Community.
    dos:78e85ead1ba9fee3915c436ead74e0c420211005171843.jpeg
    Cara cepat lainnya yang bisa Anda lakukan adalah menggunakan shortcut Ctrl+/ untuk Quick Action. Kemudian, cari menggunakan kata kunci Plugin dan pilih Browse plugin in Community seperti ini:dos:c88344ddea46c9316ed65bc1b8d5325120211005171842.jpeg
    Fitur Quick Action ini ke depannya sangat berguna karena Anda bisa mencari berbagai macam aksi melalui fitur ini.
  2. Selanjutnya cari Plugin dengan nama Material Design Icons dan klik Install.dos:2a22c0687b026d1b905f1cc45bdcd19420211230145538.png
  3. Setelah plugin berhasil terinstal, kembali ke halaman project dan klik kanan pada luar kanvas dan pilih Plugins → Material Design Icons.
    dos:5e9b525efb0b97c90517ee5085bf0bc320211005171842.jpeg
  4. Setelah tampil pop up, cari icon “search” dan drag and drop ke dalam kanvas seperti ini:
    dos:a20f0689a382255cd61b5b6b15cda98c20211006092807.gif
  5. Selanjutnya tambahkan teks menggunakan Text Tool (T) dengan tulisan “Cari kopi pilihanmu!”. Lalu, ubah ikon dan teks tersebut menjadi warna abu-abu (BBBBBB) seperti berikut:
    dos:34d9a1a3ca546bd94d796682ae733e0520211005172303.jpeg