TUTORIAL MEMBUAT PROTOTYPE APLIKASI MEDIA SOSIAL

“UNESAGRAM” MENGGUNAKAN FIGMA

Guna memenuhi tugas Literasi Digital
Dosen Pengampu: Fendi Achmad, S.Pd., M.Pd.

Disusun oleh:
Vanya Agustina Kobandaha (22080314177)

PROGRAM STUDI S1 PENDIDIKAN ADMINISTRASI PERKANTORAN

JURUSAN PENDIDIKAN EKONOMI
FAKULTAS EKONOMIKA DAN BISNIS
UNIVERSITAS NEGERI SURABAYA
PAP 2022 A
2023
 KATA PENGANTAR

Puji syukur kami panjatkan ke hadirat Allah SWT atas segala Rahmat, karunia, dan
petunjuk-Nya. Shalawat serta salam semoga senantiasa terlimpah kepada Nabi Muhammad
SAW, keluargam dan sahabat-sahabatnya yang setia.
Makalah ini disusun sebagai salah satu tugas mata kuliah Literasi Digital. Topik serta judul
yang dipilih adalah Tutorial Membuat Prototype Aplikasi Media Sosial “UNESAGRAM”,
yang merupakan aspek penting dalam materi literasi digital yang mempelajari literatur digital
itu sendiri.
Kami menyadari bahwa makalah ini jauh dari sempurna dan masih banyak kekurangan.
Oleh karena itu, kami sangat mengharapkan kritik dan saran yang membangun agar kami dapat
memperbaiki makalah ini dan meningkatkan kualitas tugas-tugas kami di masa depan.
Akhir kata, kami berharap makalah ini dapat memberi manfaat dan menjadi tambahan
pengetahuan bagi pembaca yang membacanya. Semoga Allah SWT senantiasa memberikan
Rahmat dan keberkahan-Nya kepada kita semua Amin.

Surabaya, 25 Mei 2023

Penulis

i
 DAFTAR ISI

KATA PENGANTAR ....................................................................................................... i

DAFTAR ISI...................................................................................................................... ii
BAB I PENDAHULUAN .................................................................................................. 1
1.1 Latar belakang .......................................................................................................... 1
BAB II KAJIAN PUSTAKA ............................................................................................ 2
2.1 Prototype .................................................................................................................. 2
2.2 Media sosial ............................................................................................................. 2
BAB III PEMBAHASAN ................................................................................................. 3
3.1 Tutorial pembuatan prototype .................................................................................. 3
BAB IV PENUTUP ........................................................................................................... 9
4.1 Kesimpulan .............................................................................................................. 9
DAFTAR PUSTAKA ........................................................................................................ 10

ii
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Pada masa ini aplikasi virtual seperti sosial media sudah menjadi hal yang tidak dapat
dipisahkan dari kehidupan sehari-hari. Melalui aplikasi media sosial, para pengguna dapat
dengan mudah berkomunikasi, berbagi berbagai macam konten, dan bahkan pengguna
dapat mempromosikan bisnis yang akan mempermudah dalam mendapatkan pelanggan.
Dalam beberapa tahun ini, perkembangan teknologi membuat pertumbuhan industri media
sosial semakin pesat mengikuti gaya hidup pengguna masa kini yang selalu up to date atau
mengikuti hal-hal terkini.
Dengan semakin berkembangnya teknologi dan dalam rangka memenuhi kebutuhan
tersebut, UNESAGRAM hadir dalam bentuk prototype dan dirangcang dengan
menggunakan Figma yang diharapkan nanti akan dapat dikembangkan untuk kebutuhan
seluruh instansi Universitas Negeri Surabaya mulai dari mahasiswa hingga dosen bahkan
rektor.
UNESAGRAM sendiri mengusung konsep media sosial private yang hanya dapat
diakses menggunakan email universitas, konten-konten yang dibagikan para pengguna
juga terbatas pada wilayah universitas untuk mempermudah mobilitas informasi seputar
kampus. Informasi dapat dibagikan dalam bentuk konten yang dapat dinikmati para
pengguna. Prototype UNESAGRAM akan dirancang menggunakan aplikasi Figma dan
dirancang seatraktif mungkin dengan demikian diharapkan kedepannya dilakukan
pengembangan terhadap prototype ini.

1
 BAB II
KAJIAN PUSTAKA

2.1 Prototype
Prototype merupakan metode pengembangan rancangan atau model suatu produk yang
bertujuan untuk menguji konsep atau proses kerja suatu produk. Perlu diperhatikan bahwa
prototype bukanlah sebuah final product yang akan diluncurkan, karena prototype sendiri
hanyalah rancangan awal yang dibuat untuk para pengembang perangkat lunak untuk
mempermudah pengidentifikasian fitur serta fungsi yang ada dalam suatu aplikasi atau
produk. Prototype dikenal luas sebagai sarana untuk mengeksplor dan berekspresi dalam
mendesain suatu program, aplikasi, atau produk. Prototype dapat berupa model fisik,
digital ataupun keduanya.
Prototype sendiri bertujuan untuk mengembangkan rancangan model produk sehingga
nanti dapat diolah menjadi produk jadi yang dapat memuaskan pengguna. Disini pengguna
juga dapat ikut untuk mengembangkan produk dengan memberikan feedback selma
penggunaan produk. Prototype memiliki beberapa manfaat antara lain penghematan waktu
serta biaya mengembangkan produk, dapat mengetahui kebutuhan pengguna lebih dulu,
dapat menjadi acuan pengembangan produk, serta dapat dijadikan sebagai bahan
presentasi.

2.2 Media sosial

Media sosial merupakan sebuah tempat virtual yang dimana para penggunanya dapat
berpartisipasi, berbagi, berkomunikasi dan menciptakan berbagai konten. Media sosial
sendiri pada dasarnya adalah suatu hal yang lahir dari adanya perkembangan teknologi
yang sangat pesat saat ini.
Karena media sosial saat ini sangat berpengaruh pada kemajuan teknologi maka
semakin maju dan perkembangnya teknologi maka media sosial pun akan memiliki
fasilitas serta fungsi yang lebih canggih. Fungsi media sosial antara lain:
- Komunikasi
- Tempat usaha
- Marketing
- Branding

2
 BAB III
PEMBAHASAN

3.1 Tutorial Pembuatan Prototype

1. Langkah pertama adalah membuka website figma pada link https://www.figma.com/.
Yang belum memiliki akun dapat memilih “get started” dengan mengisi email dan
password lalu klik “create account”. Jika sudah memiliki akun dapat langsung log in.

3
2. Setelah registrasi, seanjutnya akan langsung diarahkan pada laman “Home”, pilih
“New design file”.

3. Kemudian akan diarahkan pada kanvas kosong dimana kita dapat menambah dan
mengedit layer sesuai dengan konsep atau keinginan kita.

4
4. Lalu untuk menambahkan layer pada kanvas, perlu membuat atau menggambar design
terlebih dahulu menggunakan opsi “shape tool”, terdapat beberapa opsi seperti
rectangle dan lainnya. Pilih rectangle sebagai kanvas.

5. Gambar rectangle serta sesuaikan juga ukurannya.

5
6. Tambahkan beberapa elemen pada rectangle seperti button dan teks lalu dapat
menambahkan rectangle sebagai tempat button beserta teks. Cara ini dapat dilakukan
untuk mengedit dan menambahkan berbagai elemen pada layer.

7. Tambahkan button dan teks lain.

6
8. Untuk menambahkan background gambar, klik “main menu”, pilih “file” lalu pilih
“place image”. Lalu open gambar yang ingin dipilih sebagai background.

9. Setelah klik “open” pada gambar yang dipilih, letakkan gambar pada rectangle yang
dibuat.

7
10. Langkah-langkah di atas ditujukan hanya untuk membuat laman registrasi, untuk
membuat laman selanjutnya dapat melakukan langkah-langkah yang sama dan hanya
perlu disesuaikan dengan kebutuhan design yang diinginkan. Untuk link final
prototype dapat diakses pada:
https://www.figma.com/proto/qUcDomOozMJ9dj5QpXgLXH/Prototyping-in-
Figma?type=design&node-id=0-2&scaling=scale-down&page-id=0%3A1&starting-
point-node-id=0%3A2&show-proto-sidebar=1

8
 BAB IV
PENUTUP

4.1 Kesimpulan
Dengan berkembangnya era digital yang pesat saat ini, pembuatan prototype digital
untuk aplikasi mobile seperti media sosial akan menjadi hal yang dapat membantu para
pengembang maupun pengguna dalam pembuatan serta pemakaian aplikasi media sosial,
karena dalam prototype diberikan langkah-langkah terperinsi dan fungsional serta
diberikan pula struktur aplikasi yang jelas yang akan mempermudah para pengembang
dalam pembuatan aplikasi atau suatu produk.

9
 DAFTAR PUSTAKA

Rony Setiawan. (2021). Apa Itu Prototype? Kenapa Itu Penting?. Diakses pada 25 Mei 2023,
dari https://www.dicoding.com/blog/apa-itu-prototype-kenapa-itu-penting/

Sampoerna University. (2022). Pengertian Media Sosial, Sejarah, Fungsi dan Manfaatnya.
Diakses pada 25 Mei 2023, dari https://www.sampoernauniversity.ac.id/id/media-sosial-
adalah/

10