Skip to main content
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
  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
    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
  4. Kemudian rapikan menggunakan Tidy Up (Ctrl+Alt+Shift+T) dan Align Vertical Center (Alt+V).
    dos:f0d5e32900677d79d80e32d6752f1d2820211007135258.jpeg
    Sehingga, hasilnya menjadi seperti ini: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
  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
  7. Kemudian gabungkan Rectangle background dan keempat elemen menggunakan Auto Layout dan lihatlah apa yang terjadi.
    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
    Best-practice ketika Anda ingin membuat ikon adalah menggunakan Fixed Size daripada Hug Content pada setiap elemen. Berikut ini adalah contohnya:
    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
  10. Hore! Mockup halaman Home telah selesai. Berikut adalah hasil akhir dari latihan desain ini:
    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 Anda juga dapat melihat Project Figma dari mockup tersebut pada tautan berikut