> ## Documentation Index
> Fetch the complete documentation index at: https://v1-learn.neoartd.my.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Latihan Menambahkan Effect dan Ikon pada Bottom Navigation

Pada latihan ini, Anda akan memahami cara untuk menambahkan efek berupa bayangan dan ikon pada komponen Bottom Navigation.

1. Anda telah mencapai bagian akhir dari pembuatan mockup ini, yaitu pembuatan Bottom Navigation. Buat terlebih dahulu **Rectangle (R)** dengan ukuran bebas dengan warna **putih (FFFFFF)** seperti berikut:\
   [![dos:9e292d4aea3cfe5a9427f052fb075ad520211007135257.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:9e292d4aea3cfe5a9427f052fb075ad520211007135257.jpeg)](# "dos:9e292d4aea3cfe5a9427f052fb075ad520211007135257.jpeg")

2. Loh, kok putih? Kalau tidak kelihatan bagaimana? Di sinilah peran efek Shadow sebagai Containment yang akan kita tambahkan. Caranya yaitu pilih elemen → Klik **ikon tambah (+)** pada properti **Effects** → klik icon Drop Shadow → ubah pengaturan seperti di bawah ini:\
   [![dos:b237cca4fb2ce4a2be56c095250d62de20211007135659.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:b237cca4fb2ce4a2be56c095250d62de20211007135659.gif)](# "dos:b237cca4fb2ce4a2be56c095250d62de20211007135659.gif")\
   Seperti yang Anda lihat, Anda dapat mengatur beberapa hal berikut:

   * Koordinat lokasi bayangan
   * Tingkat blur (pengaburan)
   * Tingkat spread (penyebaran)
   * Warna bayangan dan persentase transparansi

3. Langkah selanjutnya adalah menambahkan ikon. Buka plugin Material Design Icons terlebih dahulu dan masukkan beberapa ikon dengan nama berikut:

   * Home
   * Shopping Cart
   * Assignment
   * Account Circle\
     [![dos:d324469dd13789223670304300188c1e20211007140059.png](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:d324469dd13789223670304300188c1e20211007140059.png)](# "dos:d324469dd13789223670304300188c1e20211007140059.png")

4. Kemudian rapikan menggunakan **Tidy Up (Ctrl+Alt+Shift+T)** dan **Align Vertical Center (Alt+V)**.\
   [![dos:f0d5e32900677d79d80e32d6752f1d2820211007135258.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:f0d5e32900677d79d80e32d6752f1d2820211007135258.jpeg)](# "dos:f0d5e32900677d79d80e32d6752f1d2820211007135258.jpeg")\
   Sehingga, hasilnya menjadi seperti ini:[![dos:62fad126fe08c08ed47121668745a2b120211007135257.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:62fad126fe08c08ed47121668745a2b120211007135257.jpeg)](# "dos:62fad126fe08c08ed47121668745a2b120211007135257.jpeg")

5. Kemudian tambahkan teks menggunakan **Text Tool (T)** dengan spesifikasi **Inter** **Medium**, dan ukuran **10** di bawah masing-masing ikon. Pastikan juga menggunakan **Text Align Center** supaya ketika ada perubahan, teks tetap di tengah.\
   [![dos:8b8eb2526debb47c5d7ec0654df3470c20211007135257.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:8b8eb2526debb47c5d7ec0654df3470c20211007135257.jpeg)](# "dos:8b8eb2526debb47c5d7ec0654df3470c20211007135257.jpeg")

6. Kemudian gabungkan setiap ikon dan teks menjadi Frame dengan klik kanan → **Add auto layout** **(Shift+A)**. Kemudian atur **alignment di tengah** supaya ikon tetap berada di tengah seperti ini:\
   [![dos:42e12b12175c9748face8ef9212add8420211007135259.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:42e12b12175c9748face8ef9212add8420211007135259.jpeg)](# "dos:42e12b12175c9748face8ef9212add8420211007135259.jpeg")

7. Kemudian gabungkan Rectangle background dan keempat elemen menggunakan Auto Layout dan lihatlah apa yang terjadi.\
   [![dos:db82acfe620ca7091c5c423d68bb0d4920211007140455.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:db82acfe620ca7091c5c423d68bb0d4920211007140455.gif)](# "dos:db82acfe620ca7091c5c423d68bb0d4920211007140455.gif")\
   Rectangle background otomatis hilang dan efek shadow berpindah ke Frame 13 merupakan hasil dari Auto Layout. Itulah fitur dari Figma supaya penggunaan elemen menjadi efisien.

8. Jika dilihat kembali, ukuran setiap ikon berbeda-beda menyesuaikan dengan panjang teks karena efek dari Auto Layout, sehingga jarak antar ikon bisa tidak proporsional seperti ini:\
   [![dos:b22719b31f5209c25b0719d7ffa4335f20211007135257.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:b22719b31f5209c25b0719d7ffa4335f20211007135257.jpeg)](# "dos:b22719b31f5209c25b0719d7ffa4335f20211007135257.jpeg")\
   Best-practice ketika Anda ingin membuat ikon adalah menggunakan **Fixed Size** daripada Hug Content pada setiap elemen. Berikut ini adalah contohnya:\
   [![dos:f3ea4d8d7d847b17953205f48ea8b16620211007140749.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:f3ea4d8d7d847b17953205f48ea8b16620211007140749.gif)](# "dos:f3ea4d8d7d847b17953205f48ea8b16620211007140749.gif")\
   Di sini kita juga mengatur jarak elemen yang ada di dalam Auto Layout supaya ada white space di antara ikon.

9. Terakhir, untuk memberikan Emphasis (penekanan) pada lokasi halaman sekarang, kita akan memberikan warna untuk ikon Home dengan warna coklat tua (**886345**) dan abu-abu muda (**BBBBBB**) untuk ikon lainnya. Ganti semua elemen di dalam satu Frame sekaligus dengan mengganti properti pada **Selection colors** (bukan pada Fill) seperti ini:\
   [![dos:ccafb1d7c129efc03213d40c08ba78e820211007135257.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:ccafb1d7c129efc03213d40c08ba78e820211007135257.jpeg)](# "dos:ccafb1d7c129efc03213d40c08ba78e820211007135257.jpeg")

10. Hore! Mockup halaman Home telah selesai. Berikut adalah hasil akhir dari latihan desain ini:\
    [![dos:0786dcfc29e52350a882e44414df64e520220404112734.png](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:0786dcfc29e52350a882e44414df64e520220404112734.png)](# "dos:0786dcfc29e52350a882e44414df64e520220404112734.png")

Keren! Anda telah belajar banyak hal pada latihan Mockup kali ini. Anda sudah bisa memanfaatkan fitur Figma seperti Frame, Auto Layout, Component dan Style. Kemudian mengetahui cara memasukkan tipografi, warna, dan ikon dengan cepat. Berlanjut dengan mengatur elemen menggunakan Grid, Containment dengan efek Shadow, dan White Space menggunakan padding dan margin. Tidak ketinggalan, Anda juga menerapkan beberapa prinsip desain visual seperti Emphasis, Hierarchy, Proportion, dan Unity.

Nah, sekarang adalah giliran Anda untuk membuat mockup desain yang sesuai dengan tema studi kasus Anda sendiri. Berikut adalah contoh lengkap dari aplikasi pemesanan kopi:

[![dos:ca51695481e749074823de22ad02597520220404113205.png](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:ca51695481e749074823de22ad02597520220404113205.png)](# "dos:ca51695481e749074823de22ad02597520220404113205.png")

Anda juga dapat melihat Project Figma dari mockup tersebut pada tautan berikut

* [Mockup Aplikasi Pemesanan Kopi](https://www.google.com/url?q=https://www.figma.com/file/nahl4zkw5PVbWYaNG9uQqR/?node-id%3D96%253A3\&sa=D\&source=editors\&ust=1633429569976000\&usg=AOvVaw3j95ADJYVtvyx6eU5EjzYp)