LAPORAN PEMBUATAN DESAIN APLIKASI SUPERMARKET ONLINE

DISUSUN OLEH :

1. Shela Anggita
2. Saskia Angraeni Putri
3. Sri Dwi Agustin

PEMERINTAH DAERAH PROVINSI JAWA BARAT

DINAS PENDIDIKAN DAN KEBUDAYAAN

SEKOLAH MENENGAH KEJURUAN NEGERI 3 BANJAR

TAHUN PELAJARAN 2023/2024

 KATA PENGANTAR
Puji syukur kehadirat Allah SWT atas limpahan rahmat dan anugrah dari-Nya
penyusun dapat menyelesaikan laporan tentang "Desain Aplikasi Supermarket Online".
Sholawat dan salam semoga senantiasa tercurahkan kepada junjungan besar kita, Nabi
Muhammad SAW yang telah menunjukkan kepada kita semua jalan yang lurus berupa ajaran
agama islam yang sempurna dan menjadi anugrah terbesar bagi seluruh alam semesta.
Penyusun sangat bersyukur karena dapat menyelesaikan makalah mata pelajaran
Pemograman Mobile dengan judul “Laporan Desain Aplikasi Supermarket Online”.
Disamping itu, penyusun mengucapkan banyak terimakasih kepada semua pihak yang telah
membantu selama pembuatan makalan ini berlangsung sehingga dapat terealisasikanlah
makalah ini.
Demikian yang dapat penyusun sampaikan, semoga makalah ini dapat bermanfaat
bagi para pembaca. penyusun mengharapkan kritik dan saran terhadap makalah ini agar
kedepannya dapat penyusun perbaiki. Karena penyusun sadar, makalah yang dibuat ini masih
banyak terdapat kekurangannya.
 LEMBAR PENGESAHAN
Laporan Uji Kompetensi Kejuruan yang Berjudul:
LAPORAN PEMBUATAN DESAIN APLIKASI SUPERMARKET ONLINE
Disusun Oleh:
Nama Anggota Kelompok :
1. Saskia Angraeni Putri
NISN:
2. Shela Anggita
NISN:
3. Sri Dwi Agustin
NISN: 0071327348

Telah memenuhi syarat untuk mengikuti Penilaian Tugas Harian Kejuruan Pada
Program Studi : Pemrograman Mobile
Kompetisi Keahlian : Pengembangan Perangkat Lunak dan GIM (PPLG)
SMK Negeri 3 BANJAR

Banjar, 20 November 2024

Guru Mapel Wali Kelas

Yasrifan Mahzar [Link] Asep Muhammad Dahlan S,Pd

NIP:199208252022211012 NIP:199205312024211007

Mengetahui,
Kepala Program PPLG

Wahyu Suryaman S,Kom

NIP:19781019 202221 1 004
 DAFTAR ISI

KATA PENGANTAR.......................................................................................................I
LEMBAR PENGESAHAN ..............................................................................................II
DAFTAR ISI .....................................................................................................................III
BAB I PENDAHULUAN .................................................................................................I
1.1 Latar Belakang .........................................................................................1
1.2 Tujuan dan Manfaat .................................................................................2
1.3 Identifikasi Masalah ................................................................................3
BAB II LANDASAN TEORI ...........................................................................................II
2.1 Definisi Figma ........................................................................................4
2.2 Fitur-fitur Figma .....................................................................................5
2.3 Kelebihan dan kekurangan Figma ..........................................................6
BAB III PEMBAHASAN .................................................................................................III
3.1 Pengertian Vegan Market .......................................................................7
3.2 Kelebihan Vegan market ........................................................................8
3.3 Kekurangan Vegan Market ..................................................................... 9
3.4 Fitur-Fitur Vegan Market .......................................................................10
BAB IV PENUTUP ...........................................................................................................IV
4.1 Kesimpulan ..............................................................................................11
4.2 Saran ........................................................................................................12
 BAB I PENDAHULUAN

1.1 Latar Belakang

Figma didirikan pada tahun 2012 oleh Dylan Field dan Evan Wallace dengan tujuan
untuk mengubah cara orang berkolaborasi dalam desain. Sebelum Figma, alat desain
grafis seperti Adobe Photoshop dan Sketch umumnya berbasis dekstop dan tidak
mendukung kolaborasi secara real-time. Tim desain sering kali bekerja secara terpisah,
dan berbagi atau merevisi desain memerlukan pengiriman file secara manual atau melalui
sistem manajemen versi yang rumit.

Figma diluncurkan pada 2016 sebagai alat desain berbasis cloud pertama yang
mendukung kolaborasi real-time. Dengan konsep desain berbasis vektor yang ringan dan
dapat diakses dari browser, Figma berhasil menarik perhatian desainer dan tim perangkat
lunak di seluruh dunia. Platform ini mempermudah pembuatan prototipe, pengeditan
desain, dan berbagi file dengan pengguna lain tanpa harus bergantung pada perangkat
keras atau aplikasi desktop.

Figma berkembang pesat berkat kemudahan penggunaannya dan fitur-fitur inovatif

seperti Auto Layout, komponen desain, versi kontrol, dan kemampuan untuk berbagi dan
berkolaborasi dalam waktu nyata. Figma menjadi pilihan utama bagi banyak perusahaan
besar, seperti Microsoft, Uber, dan Airbnb, serta para desainer freelance dan studio
desain.

Seiring waktu, Figma terus memperkenalkan fitur baru, seperti plugin, dan berfokus
pada peningkatan kemudahan kolaborasi antara desainer dan pengembang,
menjadikannya alat desain terdepan yang digunakan di berbagai industri kreatif dan
teknologi. Pada 2022, Figma diakuisisi oleh Adobe, memperkuat posisinya dalam industri
desain digital.

1.2 Tujuan dan Manfaat

Tujuan utama Figma adalah untuk menyediakan platform desain yang memungkinkan
kolaborasi real-time yang mudah antara para desainer, pengembang, dan pemangku
kepentingan dalam satu ruang kerja digital. Figma bertujuan untuk mengatasi beberapa
masalah yang dihadapi oleh alat desain tradisional, seperti keterbatasan dalam kolaborasi,
kesulitan berbagi dan mengelola file desain, serta kendala pada perangkat atau sistem
operasi tertentu.
 Manfaat Menggunakan Figma:
 Efisien: Figma membantu kamu bekerja lebih cepat dan efisien karena semua yang
kamu butuhkan ada dalam satu tempat.
 Mudah Digunakan: Figma memiliki antarmuka yang user-friendly, sehingga mudah
dipelajari, bahkan untuk pemula sekalipun.
 Fleksibilitas: Figma sangat fleksibel dan bisa digunakan untuk berbagai macam
proyek desain.
 Kolaborasi yang Lancar: Dengan Figma, kamu bisa bekerja sama dengan tim secara
real-time, sehingga proses desain menjadi lebih lancar.
 Aksesibilitas: Figma bisa diakses dari mana saja yang memiliki koneksi internet,
sehingga kamu bisa bekerja kapan saja dan di mana saja.

1.3 Identifiksi Masalah

 "Bagaimana cara membuat desain yang responsif di Figma?"
 "Apa plugin Figma terbaik untuk membuat icon?"
 "Bagaimana cara membuat prototipe yang interaktif?"
 BAB II LANDASAN TEORI

2.1 Definisi Figma

Figma adalah alat desain berbasis cloud yang digunakan untuk membuat antarmuka
pengguna (UI), pengalaman pengguna (UX), prototipe, dan desain grafis secara
kolaboratif. Figma memungkinkan tim untuk bekerja bersama secara real-time dalam satu
dokumen desain yang sama, tanpa perlu mengunduh atau menginstal perangkat lunak
tambahan.

2.2 Alat dan Fitur dasar Figma

1. Frame:
 Frame adalah dasar dari desain di Figma. Anda dapat menggunakannya untuk
membuat layar aplikasi atau artboard.
 Fitur ini juga digunakan untuk membuat layout responsif dengan mendefinisikan
ukuran konten.

2. Shapes (Bentuk):
 Figma menyediakan berbagai bentuk dasar seperti persegi panjang, lingkaran, dan
garis yang bisa digunakan untuk membangun desain.
 Anda juga dapat mengubah bentuk ini lebih lanjut dengan menggunakan alat pen
atau mengedit titik-titiknya.

3. Pen Tool (Alat Pena):

 Alat ini digunakan untuk menggambar bentuk bebas atau jalur vektor. Ini sangat
berguna untuk membuat desain yang lebih kompleks dan kustom.

4. Text Tool (Alat Teks):

 Alat ini memungkinkan Anda untuk menambahkan teks ke desain Anda. Anda
dapat mengubah jenis font, ukuran, warna, dan atribut teks lainnya.

5. Vector Networks:
 Fitur vektor Figma mendukung jaringan vektor, yang memungkinkan desain bebas
dengan koneksi antar titik lebih fleksibel daripada jalur linier yang tradisional.

6. Components (Komponen):
 Komponen memungkinkan Anda untuk membuat elemen desain yang dapat
digunakan berulang kali. Jika Anda mengubah satu komponen, perubahan tersebut
akan diterapkan di seluruh file desain yang menggunakan komponen tersebut.
7. Auto Layout:
  Fitur ini memungkinkan Anda mendesain layout yang responsif, memudahkan
Anda membuat komponen yang dapat menyesuaikan ukuran dan posisi elemen
secara otomatis ketika kontennya berubah.
8. Constraints:
 Digunakan untuk menjaga elemen tetap terhubung dengan batas tertentu di dalam
frame. Ini memungkinkan elemen-elemen desain untuk menyesuaikan dengan
ukuran layar yang berbeda.

9. Prototyping (Pembuatan Prototipe):

 Anda dapat menghubungkan frame satu dengan lainnya untuk membuat interaksi
seperti klik, hover, dan transisi antar layar dalam prototipe interaktif. Ini
mempermudah pengujian dan presentasi desain.

10. Collaboration Tools (Alat Kolaborasi):

 Figma mendukung kolaborasi waktu nyata, memungkinkan beberapa desainer
atau anggota tim bekerja pada file desain yang sama secara bersamaan.
 Anda juga bisa memberikan komentar langsung di desain, memudahkan umpan
balik dan revisi.

11. Version History (Riwayat Versi):

 Fitur ini memungkinkan Anda untuk melacak perubahan desain dari waktu ke
waktu, mengembalikan ke versi sebelumnya jika diperlukan.

12. Plugins:
 Figma memiliki berbagai plugin yang dapat membantu mempercepat pekerjaan
Anda, seperti plugin untuk mengambil gambar, mengimpor ikon, atau bahkan
menambahkan data desain otomatis.

13. Sharing & Embedding (Berbagi dan Menyematkan):

 Anda bisa membagikan desain ke orang lain dengan mudah, atau
menyematkannya ke dalam situs web, presentasi, atau alat lain untuk
menunjukkan hasil desain.

2.3 Kelebihan dan Kekurangan Figma

Kelebihan figma:
 Kerja bareng yang seru: Kamu bisa bikin desain bareng teman-temanmu, kayak
lagi gambar bareng di kertas besar. Kalian bisa liat perubahan desain secara
langsung dan kasih masukan satu sama lain.

 Desain yang bisa berubah-ubah: Desain yang kamu bikin bisa menyesuaikan
ukuran layar, jadi bisa dilihat di HP, tablet, atau komputer.

 Banyak pilihan warna dan bentuk: Figma punya banyak banget warna dan
bentuk yang bisa kamu pilih. Jadi, kamu bisa bebas bereksperimen dan bikin
desain yang unik.
 Gampang dipelajari: Figma itu mudah dipahami, jadi kamu nggak perlu waktu
lama buat bisa bikin desain yang keren.

 Ada banyak contoh desain: Kalau kamu bingung mau mulai dari mana, Figma
menyediakan banyak contoh desain yang bisa kamu jadikan inspirasi.

 Bisa bikin desain yang bergerak: Desainmu bisa dibuat bergerak, jadi lebih
hidup dan menarik.

 Simpan desainmu dengan mudah: Semua desainmu bisa disimpan di Figma,

jadi kamu bisa buka lagi kapan aja dan di mana aja
 BAB III PEMBAHASAN

3.1 Pengertian Vegan Market

Vegan Market adalah platform berbasis internet yang dirancang untuk
memenuhi kebutuhan belanja konsumen, terutama untuk produk-produk rumah
tangga, melalui sistem digital. Supermarket online mengadopsi konsep toko fisik
tetapi memindahkannya ke ruang digital, memungkinkan pelanggan untuk membeli
produk tanpa harus datang langsung ke [Link] Market juga menyediakan buah-
buahan,sayuran,sereal,makanan ringan dan kebutuhan ibu hamil & anak.

3.2 Kelebihan Vegan Market

1. Barang yang berkualitaas
2. Banyak pilihan
3. Kirim barang tepat waktu
4. Harga yang terjangkau
5. Banyak potongan harga

3.3 Kekurangan Vegan Market

1. Pilihan makanan atau barang yang masih terbatas
2. Tidak bisa melihat barang langsung.
3. Waktu tunggu yang cukup lama.
4. Ongkos kirim yang cukup besar.

3.4 Fitur-Fitur Vegan Market

1. Fitur Keranjang
Fitur keranjang (atau cart) adalah fitur umum yang ada di banyak situs web e-
commerce atau aplikasi belanja online. Fungsi utama dari fitur keranjang
adalah untuk memungkinkan pengguna menambahkan barang yang ingin
dibeli ke dalam daftar sementara sebelum melakukan proses pembayaran atau
checkout.
2. Fitur Kategori
Fitur kategori dalam aplikasi vegan market adalah cara untuk mengorganisasi
dan mengelompokkan produk atau layanan berdasarkan jenis, fungsi, atau
karakteristik lainnya. Fitur ini bertujuan untuk memudahkan pengguna dalam
mencari produk yang sesuai dengan kebutuhan mereka.
 BAB IV PENUTUP

4.1 Kesimpulan
Vegan Market adalah platform digital yang memungkinkan konsumen untuk membeli
berbagai kebutuhan sehari-hari, seperti makanan, minuman, kebutuhan ibu hamil & anak, dan
barang lainnya, melalui internet. Dengan menggunakan aplikasi atau situs web, konsumen
dapat dengan mudah memilih produk, melakukan pembayaran, dan mengatur pengiriman ke
rumah mereka.

Kemudahan yang didapat ketika menggunakan Vegan Market:

1. Kenyamanan: Memungkinkan belanja dari rumah atau di mana saja tanpa perlu pergi ke
supermarket langsung.
2. Pilihan Produk yang Luas: Menawarkan berbagai pilihan produk dengan harga yang
bersaing dan promosi khusus.
3. Pengiriman yang Fleksibel: Konsumen dapat memilih waktu pengiriman sesuai dengan
preferensi mereka.
4. Efisiensi Waktu: Membantu menghemat waktu dan tenaga, terutama bagi mereka yang
memiliki jadwal sibuk.
5. Kemudahan Pembayaran: Menyediakan berbagai opsi pembayaran digital yang
memudahkan transaksi.

Vegan Market semakin populer karena memberikan kenyamanan, efisiensi, dan akses mudah
ke berbagai produk tanpa harus keluar rumah.

4.2 Saran
1. Meningkatkan ketersedian barang
2. Meningkatkan kualitas layanan pelanggan.