## UI/UX Design of Early Childhood Learning Applications Using Figma
1 Ranti Eka Putri, 2 Yanti Yusman, 3 Yuda Wira Pratama 1,2,3 Program Studi Sistem Komputer, Universitas Pembangunan Panca Budi Email: rantiekaputri@dosen.pancabudi.ac.id

## Abstract
In  Presidential  Regulation  (Perpres)  Number  60  of  2013,  early  childhood  is  a  newborn  to  children who are not even 6 years old. From an educational point of view, this early age is a golden period in the development of a child's brain so that the Little One must be given the right stimulus or stimulus. Usually most children, especially children in the age range of 4 to 6 years, get knowledge from their parents  or  attend  kindergarten. The  background  of  this  research  is  because  there  are  still  very  few learning media that can be used for early childhood learning. The purpose of this study is to design a ui/ux application for early childhood where the method used is the prototype method using figma, and it  contains  material  that  will  be  learned  by  early  childhood  such  as  material  on  hijaiyah  letters, hadith, prayer readings, selected letters, daily prayers, numbers, alphabets and themes. In the theme there  are  five  materials  that  will  be  included,  namely  professions,  colors,  fruits,  animals  and transportation. This prototype is a reference for building early childhood learning applications.
Keywords: Design, Aplication, UI/UX, Learning, Figma.

## 1. INTRODUCTION
Pendidikan  anak  usia  dini  merupakan  salah  satu  bentuk  penyelenggaraan  pendidikan  yang menitik beratkan pada peletakan dasar kearah pertumbuhan sesuai dengan  keunikan dan tahap-tahap perkembangan  yang  sesuai  kelompok  usia  yang  dilalui  oleh  anak  usia  dini  [1].  Dalam  Peraturan Presiden  (Perpres)  Nomor  60  Tahun  2013,  anak  usia  dini  adalah  bayi  yang  baru  lahir  hingga  anak- anak  yang  belum  genap  berusia  6  tahun.  Dari  segi  pendidikan,  usia  dini  ini  merupakan  masa keemasan  dalam  perkembangan  otak  anak  sehingga  Si  Kecil  harus  diberi  rangsangan  atau  stimulus yang tepat. Salah satu karakteriktik belajar anak usia dini yaitu belajar melalui bermain.
Sejalan dengan itu, kebijakan pemerintah  Indonesia di bidang pendidikan  usia dini (1994/1995) juga  menganut  prinsip  “bermain  sambil  belajar  atau  belajar  seraya  bermain”  Inovasi  dalam  bidang pendidikan  sangat  dibutuhkan.  Teknologi  seharusnya  dapat  dimanfaatkan  secara  maksimal  untuk menciptakan alternatif belajar yang menarik dan menyenangkan khususnya untuk anak usia dini.
Penelitian  ini  dilatar  belakangi  karena  masih  sedikitnya  media  pembelajaran  yang  dapat digunakan  untuk  pembelajaran  anak  usia  dini.  Tujuan  dari  penelitian  ini  adalah  merancang  sebuah aplikasi  UI/UX  untuk  anak  usia  dini,  dimana  metode  yang  digunakan  adalah  metode  prototype. Prototype berisi materi yang akan dipelajari oleh anak usia dini seperti materi tentang huruf hijaiyah,
hadits, bacaan sholat, huruf pilihan, doa sehari-hari, angka, huruf dan tema. Dalam tema tersebut ada lima materi yang akan dimasukkan yaitu profesi, warna, buah-buahan, hewan dan transportasi.
Prototype ini  menjadi  acuan  untuk  membangun  aplikasi  pembelajaran  anak  usia  dini  yang kompatibel dengan smartphone android . Alasan utama kenapa di bangun berbasis android yaitu saat ini smartphone telah  menjadi  kebutuhan  primer  bagi  semua  orang.  Apalagi  kebanyakan  tidak  bisa dipungkiri,  orang  tua  sering  memberikan  smarphone  kepada  buah  hatinya  untuk  mengalihkan perhatian sehingga mereka bisa melakukan kegiatannya.
Figma adalah salah satu design tool yang biasanya digunakan untuk membuat tampilan aplikasi mobile,  desktop,  website  dan  lain-lain.  Figma  bisa  digunakan  di  sistem  operasi  windows,  linux ataupun mac dengan terhubung ke internet (berbasis  browser) [2].
Figma  memiliki  keunggulan  yaitu  untuk  pekerjaan  yang  sama  dapat  dikerjakan  oleh  lebih  dari satu orang secara bersama-sama walaupun ditempat yang berbeda.  Hal tersebut bisa dikatakan kerja kelompok  dan  karena  kemampuan  aplikasi  figma  tersebut  lah  yang  membuat  aplikasi  ini  menjadi pilihan  banyak  UI/UX  designer  untuk  membuat  prototype  website  atau  aplikasi  dengan  waktu  yang cepat dan efektif [3].
User interface dan User Experience (UI/UX) memiliki peranan penting dalam pembuatan sebuah aplikasi  / software ,  karena  dengan  UI  dan  UX  yang  rapi  dan  terorganisir  pengguna  aplikasi  dapat dengan mudah menggunakan fitur-fitur yang  telah disediakan pada aplikasi yang akan dibangun dan dengan tampilan dan desain yang baik  akan  membuat pengguna  yang memakai produk menciptakan pengalaman  yang  menyenangkan  dan  dapat  memengaruhi  suatu  keberhasilan  dari  penggunaan  user [4]. User  Interface adalah   sebuah sistem yang mengatur tampilan antarmuka sekaligus memfasilitasi pengguna   untuk   berinteraksi  dengan sistem [3].
Menurut ISO 9241-210 (2009), User Experience (UX) adalah persepsi dan respon dari pengguna sebagai  reaksi  dari  penggunaan  sebuah  produk,  siste  atau service . User  Experience merupakan bagaimana user merasakan kesenangan dan kepuasan dari menggunakan sebuah produk, melihat atau memegang  produk  tersebut.  UX  tidak  dapat  dirancang  oleh  desainer  tapi  seorang  desain  dapat merancang sebuah produk yang dapat menghasilkan UX [5].
Aplikasi  adalah  program  yang  dikembangkan  untuk  memenuhi  kebutuhan  pengguna  dalam menjalankan  pekerjaan  tertentu  dan  biasa  dipakai  untuk  melakukan  berbagai  tugas  spesifik  para pemakai [6].
Belajar  adalah  proses  aktivitas  pengembangan  pengetahuan,  keterampilan  atau  sikap  sebagai interaksi  seseorang  dengan  informasi  dan  lingkungannya  sehingga dalam proses belajar diperlukan pemilihan,  penyusunan  dan  penyampaian  informasi  dalam  lingkungan  yang  sesuai  dan  melalui interaksi pemelajar dengan lingkungannya [7].

## 2. METHODS
Metode  yang  digunakan  pada  penelitian  ini  yaitu  metode Prototype .  Dimana  metode  ini merupakan  sebuah  teknik  atau  metode  yang  banyak  digunakan  untuk  melakukan  pengembangan sistem  atau software .  Dengan  menggunakan  metode prototype ,  klien  mendapatkan  gambaran  jelas pada sistem yang akan dibangun oleh tim pengembang dan klien pun dapat melakukan diskusi untuk menyamakan  presepsi atau  pemahaman  terhadap  sistem  yang  akan  dibuat.  Sehingga  nantinya  tidak terjadi kesalahpahaman dalam proses pembuatan sistem/aplikasi/perangkat lunak.
Tahapan dari metode prototipe adalah sebagai berikut:
Analisis Kebutuhan Desain Cepat Bangun Prototipe Evaluasi Pengguna Awal Implementasi dan Pemeliharaan Memperbaiki Prototipe Figure 1 Tahapan Metode Prototype
1. Analisis  Kebutuhan:  Dalam  tahap  ini  kebutuhan  sistem  didefinisikan  dengan  rinci  sesuai kebutuhan.
2. Desain  Cepat:  Di  tahap  ini  yang  dilakukan  yaitu  membuat  desain  sederhana  yang  akan memberi gambaran singkat tentang sistem yang ingin dibuat.
3. Bangun  prototipe:  Ditahap  ini  pembangunan  prototipe  sebenarnya  yang  akan  dijadikan rujukan untuk pembuatan program atau aplikasi.
4. Evaluasi  Pengguna  Awal:  tahap  ke  4  (empat)  ini,  sistem  yang  telah  dibuat  dalam  bentuk prototipe di presentasikan untuk di evaluasi.
5. Memperbaiki Prototipe: Jika ada catatan atau koreksian pada tahap ke 4 yang dilakukan, pada tahap  dilakukan  revisi  atau  perbaikan  prototipe  yang  dibuat,  tapi  jika  tidak  ada  catatan, tahapan ini bisa di lewati dan langsung ke tahapan terakhir.
6. Implementasi: Pada tahap akhir ini, produk akan segera dibuat berdasarkan prototipe akhir.

## 3. RESULTS AND DISCUSSION
Pembuatan desain UI untuk aplikasi belajar anak usia dini yang penulis lakukan menggunakan desain tool  berbasis  browser  yaitu  figma.  Untuk  mengakses  desain  tool  ini  bisa  mengakses  di https://www.figma.com/.

## 3.1 Desain User Interface
Antarmuka  / Interface halaman  utama  /  home  merupakan  tampilan  yang  pertama muncul  ketika  aplikasi  digunakan  dan  Antarmuka  / Interface halaman  menu  aplikasi merupakan  tampilan  halaman  yang  memperlihatkan  semua  menu  yang  ada  di  aplikasi belajar  anak  usia  dini. Desain  Antarmuka  / Interface nya dapat  dilihat  pada  gambar  di  bawah ini:
Figure 2 Desain Antarmuka / Interface Halaman Home – Halaman Menu
Berikut adalah gambar tampilan desain antarmuka / interface halaman Hijaiyah, Hadist, Bacaan Sholat dan Surah Pilihan.
SYSTEMATICS, Vol. 4, No. 3, Desember 2022, pp 525-533
Figure 4 Desain Antarmuka / Interface Halaman Abjad – Angka – Doa sehari-hari
Antarmuka  / Interface halaman  menu  tema  merupakan  salah  satu  menu  yang  ada  di aplikasi belajar anak usia dini. Dimana di dalam menu tema ini, terdapat 5 (lima) sub menu yang  dapat  digunakan.  Ke  lima  (5)  sub  menu  pada  menu  tema  ini  adalah  menu  prefesi, warna,  hewan,  buah  dan  transportasi. Desain  Antarmuka  / Interface nya dapat  dilihat  pada gambar di bawah ini:
Figure 5 Desain Antarmuka / Interface Menu Tema – Buah – Hewan – Transportasi - Profesi
Prototype  aplikasi  belajar  anak  usia  dini  di  bangun  atau  dibuat  dengan  tool  desain  yaitu figma.  Pada  figma  seluruh  frame  dan  tombol  terhubung  dan  di  uji  sesuai  alur  kerja  sistem  yang diharapkan. Berikut tampilan prototype pada figma.

## Figure 6 Tampilan Prototype pada Figma

## 3.2 Hasil Tampilan Menggunakan Smartphone
Gambar-gambar  di  bawah  ini  adalah  hasil  dari  desain  yang  di  implementasikan  pada smartphone .
Figure 7 Tampilan Halaman Home / Awal – Halaman Menu Materi – Halaman Hijaiyah
Figure 8 Tampilan Halaman Hadist – Halaman Bacaan Sholat – Halaman Surat Pilihan
Figure 9 Tampilan Halaman Doa Sehari-Hari – Halaman Abjad – Halaman Angka
Figure 10 Tampilan Halaman Tema – Halaman Profesi – Halaman Warna
Figure 11 Tampilan Halaman Hewan – Halaman Buah – Halaman Transportasi

## 4. CONCLUSION
Berdasarkan  hasil  dan  pembahasan  yang  telah  dilakukan  dalam  perancangan  UI/IX  aplikasi  belajar anak usia dini menggunakan figma, penulis memberikan kesimpulan sebagai berikut:
1. Tools Figma membantu dalam medesign tampilan atau mockup aplikasi belajar anak usia dini dengan user interface (UI) yang menarik dan simple.
2. Prototype /  Desain  UI  dan  UX  aplikasi  belajar  anak  usia  dini  yang  dibuat  dapat  dijadikan acuan dalam membangun aplikasi belajar anak usia dini berbasis android.

## REFERENCES
[1] A. Isna, “Perkembangan Bahasa Anak Usia Dini,” Al-Athfal , vol. 2, no. 2, pp. 62–69, 2019.
[2] M.  A.  Muhyidin,  M.  A.  Sulhan,  A.  Sevtiana,  U.  Catur,  I.  Cendekia,  and  K.  Cirebon, “PERANCANGAN  UI  /  UX  APLIKASI  MY  CIC  LAYANAN  INFORMASI  AKADEMIK MAHASISWA,” vol. 10, no. 2, pp. 208–219, 2020.
[3] M.  N.  M.  Al-Faruq,  S.  Nur’aini,  and  M.  H.  Aufan,  “Perancangan  Ui/Ux  Semarang  Virtual Tourism  Dengan  Figma,” Walisongo  J.  Inf.  Technol. ,  vol.  4,  no.  1,  pp.  43–52,  2022,  doi: 10.21580/wjit.2022.4.1.12079.
[4] M.  Adhitya  Dhita  Pratama,  Y.  Raymond  Ramadhan,  and  T.  Iman  Hermanto,  “Rancangan UI/UX  Design  Aplikasi  Pembelajaran  Bahasa  Jepang  Pada  Sekolah  Menengah  Atas Menggunakan Metode Design Thinking,” J. Ris. Komputer) , vol. 9, no. 4, pp. 2407–389, 2022, doi: 10.30865/jurikom.v9i4.4442.
[5] B.  Kurniawan  and  M.  Romzi,  “Perancangan  Uiux  Aplikasi  Manajemen  Penelitian  Dan
Pengabdian Kepada Masyarakat Menggunakan Aplikasi Figma,” J. Sist. Inf. Mahakarya , vol.
05, no. 1, pp. 1–7, 2022.
[6] N.  Juliansyah,  Herlinda,  and  B.  D.  Theodora,  “Keliling  Bangun  Datar  Berbasis  Android,” Semin. Nas. Ris. dan Teknol. (SEMNAS RISTEK) , vol. 5, no. 1, pp. 397–403, 2021, [Online]. Available: http://proceeding.unindra.ac.id/index.php/semnasristek/article/view/4927/835
[7] G. Wahab and Rosnawati, TEORI-TEORI BELAJAR DAN PEMBELAJARAN , vol. 3, no. April. 2021.