Membuat Desain Figma dengan Frame Android(SmartWatch)

 Setelah membuat desain dengan menggunakan frame dekstop sekarang saya akan membuat dengan frame untuk android dsini saya akan membuat halaman register, splash, login dan home

1.ini Register yang saya buat 

nah disini saya membuat halaman register yang pertama kalian buat frame android dulu dsini saya menggunakan ukuran yang large setelah itu tambahkan rectangle untuk membuat kolom pengisian data untuk register jika ingin mudahnya / jika ingin meniru  nya tinggal pilih asset lalu ketik form register nanti akan keluar banyak contoh form login / register kalian bisa meggunakan nya / meniru nya.

setelah itu saya tambahkan gambar jika sudah kalian bisa balik ke asset lagi lalu ketikan button login/register nanti akan muncul banyak pilihannya jadi kalian tinggal klik untuk menggunakannya / menirunya

2. Ini Splash

membuat splash disni splash saya sangat simple yah saya hanya memberi warna pada background dan menambahkan sebuah gambar yang menjadi iconic dari toko saya yang bertema SmartWatch

3.Ini Login

4.Ini Home

Membuat Tampilan Menu(SmartWatch)

Setelah kemarin saya membuat halaman awal dan sekarang saya membuat tampilan menu pada desain yang saya buat dengan tema SmartWatch

 

Pembelajaran

 Pada 6 Agustus 2024 Ketika saya berada di sekolah dan pada saat pembelajaran pertama saya di berikan materi mengenai Figma  yaitu banner promotion, auto layout, component dan varian penjelasan nya di bawah ini yaa

1. Banner Promotion

Pengertian: Banner promotion adalah elemen visual yang digunakan untuk menarik perhatian pengunjung atau pengguna terhadap promosi, penawaran khusus, atau pesan penting lainnya pada sebuah halaman web atau aplikasi.

Fungsi: Biasanya digunakan untuk mengiklankan diskon, produk baru, atau informasi penting lainnya.

Elemen Penting dalam Banner Promotion:

- Desain yang Menarik: Warna yang mencolok, teks yang menarik, dan gambar yang relevan.

- Pesan Singkat dan Jelas: Pesan harus langsung ke point dan menarik perhatian dalam waktu singkat.

- Call to Action (CTA): Frase atau tombol yang mendorong pengguna untuk mengambil tindakan, seperti "Beli Sekarang" atau "Pelajari Lebih Lanjut".

 2. Auto Layout

Pengertian: Auto Layout adalah fitur di Figma yang memungkinkan desainer untuk membuat elemen-elemen desain yang secara otomatis menyesuaikan ukurannya berdasarkan isi dan tata letak yang diinginkan.

Fungsi: Mempermudah penataan elemen dalam sebuah desain, terutama ketika desain tersebut akan berubah ukuran atau bentuknya. Ini sangat berguna untuk desain responsif yang harus bekerja di berbagai ukuran layar.

Manfaat Auto Layout:

- Desain Responsif: Memastikan elemen desain terlihat baik di semua ukuran layar.

- Efisiensi: Mengurangi waktu yang diperlukan untuk menyesuaikan tata letak secara manual.

- Konsistensi: Memastikan elemen desain tetap konsisten meskipun ada perubahan ukuran atau posisi.

3. Component

Pengertian: Component adalah elemen desain reusable di Figma. Ketika kamu membuat sebuah component, kamu bisa menggunakan kembali elemen tersebut di berbagai bagian desain, dan setiap perubahan yang dilakukan pada component utama akan tercermin di semua instance-nya.

Fungsi: Menghemat waktu dan menjaga konsistensi desain. Misalnya, jika ada perubahan pada desain button, kamu hanya perlu mengubahnya di component utama, dan semua instance button tersebut akan otomatis berubah.

Keuntungan Menggunakan Komponen:

- Reuse: Mengurangi duplikasi dengan menggunakan kembali elemen yang sama di berbagai tempat.

- Consistency: Memastikan elemen desain tetap konsisten di seluruh produk.

- Efficiency: Mempercepat proses desain dengan tidak harus mendesain ulang elemen yang sama berulang kali.

 4. Variants

Pengertian: Variants adalah fitur di Figma yang memungkinkan desainer untuk membuat beberapa versi atau variasi dari sebuah component. Setiap variasi bisa mewakili keadaan yang berbeda dari elemen desain yang sama.

Fungsi: Mempermudah pengelolaan dan penggunaan berbagai versi dari sebuah component tanpa harus membuat component terpisah.

Keuntungan Menggunakan Variants:

- Flexibility: Memungkinkan desainer untuk dengan mudah mengubah dan mengelola variasi dari komponen.

- Consistency: Memastikan semua varian tetap konsisten dengan gaya dan panduan desain.

- Efficiency: Mempermudah perubahan global pada komponen dan semua variannya.

membuat landing page

Membuat landing page dengan Tema SmartWatch Di figma

disini saya di berikan tugas untuk membuat sebuah landing page di figma

lalu saya kepikiran untuk membuat sebuah toko smartwatch 

langkah awal 

Buka figma dan buatlah proyek baru / desain baru jika sudah masuk atur frame nya pilih tampilan yang sesuai disini saya menggunakan 1440 x 1024 untuk tampilan dekstop

untuk menambahkan text kalian bisa klik T yang ada di atas 

lalu jika kalian ingin menambahkan logo / gambar kalian bisa klik ctrl + shift + k

untuk mencari font kalian klik saja tulisan nya lalu ke desain pilih Typography disitu ada tulisan inter

 kalian bisa ganti font sesuka kalian dan untuk menambahkan warna kalian bisa di ganti juga di desain

jika kalian ingin menambahkan component O seperti gambar di atas maka kalian bisa ketik O lalu

 arahkan letak nya mau dimana