Pelatihan UI/UX Berbasis Proyek dalam Pengembangan Portofolio Digital Menggunakan Figma untuk Siswa SMK

Zuli Maulidati; Resa Uttungga; Anwar Sodik; Rachman Arief; Sulistyowati Sulistyowati; Adib Pakarbudi

doi:10.70340/japamas.v5i1.324

Authors

Zuli Maulidati Institut Teknologi Adhi Tama Surabaya https://orcid.org/0009-0001-0244-7418
Resa Uttungga Institut Teknologi Adhi Tama Surabaya
Anwar Sodik Institut Teknologi Adhi Tama Surabaya
Rachman Arief Institut Teknologi Adhi Tama Surabaya
Sulistyowati Sulistyowati Institut Teknologi Adhi Tama Surabaya
Adib Pakarbudi Institut Teknologi Adhi Tama Surabaya

DOI:

https://doi.org/10.70340/japamas.v5i1.324

Keywords:

UI/UX, FIgma, Project based Learning, SMK, Portofolio Digital

Abstract

Transformasi digital turut meningkatkan kebutuhan akan kompetensi di bidang User Interface (UI) dan User Experience (UX) sebagai bagian penting dalam pengembangan produk digital. Dalam konteks pendidikan vokasi, kompetensi ini tidak cukup hanya dipahami secara konseptual, tetapi juga perlu diwujudkan melalui keterampilan implementatif yang dapat ditunjukkan dalam bentuk karya nyata seperti portofolio digital. Berangkat dari kondisi tersebut, kegiatan pengabdian kepada masyarakat ini dirancang untuk memberikan pengalaman belajar yang lebih aplikatif melalui pengembangan dan implementasi model pelatihan UI/UX berbasis proyek. Kegiatan dilaksanakan pada Januari – Februari 2026 dengan pendekatan Project-Based Learning yang disusun dalam empat tahapan, yaitu pemahaman konseptual, penguasaan perangkat/tools, pengembangan proyek, serta evaluasi dan umpan balik. Evaluasi dilakukan melalui pre-test dan post-test, observasi, serta analisis hasil desain siswa. Hasil menunjukkan adanya peningkatan pemahaman siswa, meningkatnya keterlibatan selama pembelajaran, serta peningkatan kemampuan menghasilkan portofolio digital yang lebih terstruktur dan sesuai dengan prinsip dasar UI/UX.

Downloads

Download data is not yet available.

References

Faridha, S., Yulianti, S., & Sugiarti, Y. (2024). Metode Perancangan User Interface yang Paling Umum Digunakan: Systematic Literature Review. bit-Tech, 7(1), 58–67. https://doi.org/10.32877/bt.v7i1.1467

Hairah, U., Nursukamto, M. H., Ulhaqi, A. D., Puspitaningtyas, D., Sahriah, S., Asmawati, C., Arinda, V. A., & Rama, M. T. (2024). Peningkatan Kompetensi Siswa Dalam Merancang UI/UX Aplikasi Mobile Menggunakan Figma. Jompa Abdi: Jurnal Pengabdian Masyarakat, 3(4), 59–65. https://doi.org/10.57218/jompaabdi.v3i4.1211

Kasili, M., Pramudibyo, S., Rahmandan, H., Rizky, M., Lahamutu, A., Aldio, T., & Yanino, R. M. (2025). Systematic Literature Review: Evaluasi Implementasi Kurikulum Merdeka Di Smk Dalam Menghadapi Tantangan Industri 4.0. 4(3).

Mukhlis, I. R., Laga, S. A., Suprianto, G., Hermansyah, D., Karyawan, M. A., & Suprianto, H. (2023). Pelatihan UI/UX Menggunakan Figma Untuk Meningkatkan Kompetensi Di Bidang Desain Guru MGMP RPL SMK Provinsi Jawa Timur. Jurnal KeDayMas: Kemitraan Dan Pemberdayaan Masyarakat, 3(1), 80–87. https://doi.org/10.14414/kedaymas.v3i1.3555

Olivia, A., Larasati, P. D., Mulya, M. F., Anwar, S., & Efendi, Y. (2025). Penerapan Design Thinking dalam Perancangan UI/UX Website untuk Meningkatkan Pengalaman Pengguna.

Pramudita, R., Arifin, R. W., Alfian, A. N., Safitri, N., & Anwariya, D. (2021). Penggunaan Aplikasi Figma dalam Membangun UI/UX Yang Interaktif Pada Program Studi Teknik Informatika Stmik Tasikmalaya. Jurnal Buana Pengabdian, 3(1), 149–154. https://doi.org/10.36805/jurnalbuanapengabdian.v3i1.1542

Prasetya, D., & Iswandi, H. (2025). Pelatihan Desain UI/UX Menggunakan Figma di SMK Muhammadiyah 1 Palembang. Community Development Journal : Jurnal Pengabdian Masyarakat, 6(2), 2453–2459. https://doi.org/10.31004/cdj.v6i2.40477

Priantika, T. V. (2026). Perancangan Website Pencari Kerja Dan Portofolio Untuk Program Studi Desain Komunikasi Visual. 1.

Rahmawati, D., Syaputra, W., & Ratoeloedji, R. A. (2025). Peran Pembelajaran Teknologi Informasi dan Digitalisasi dalam Meningkatkan Kompetensi Siswa SMK: Tantangan dan Peluang di Era 4.0. 4(2), 180–195.

Ramdhani, D., & Utami, L. A. (2025). Implementasi Metode Design Thinking pada Perancangan UI/UX Aplikasi Kopi Reman Berbasis Mobile. 9(3).

Riyanto, Risal, A., Nizam, Erwansyah, & Seliwati. (2025). Implementasi Pelatihan Penggunaan Figma untuk Meningkatkan Kompetensi Siswa dalam Desain UI/UX di SMKN 2 Tanjung Selor. PADMA, 5(1), 39–47. https://doi.org/10.56689/padma.v5i1.1809

Rowiyani, Wellie Sulistijanti, Arista Fitri Diana, Khoerul Soleh, & Muhammad Haikal Darmawan. (2025). Pendampingan Penyusunan Rencana Karier dan Pembuatan Portofolio Digital untuk Meningkatkan Persiapan Karier Siswa di SMK. Masyarakat Berkarya : Jurnal Pengabdian dan Perubahan Sosial, 2(3), 20–27. https://doi.org/10.62951/karya.v2i3.1997

Saidatuzzahra, P. & Akhmad Rizal Dzikrillah. (2025). Penggunaan Metode Design Thinking Untuk Perancangan Ulang UI/UX Pada Aplikasi BCA Mobile. Bulletin of Computer Science Research, 5(4), 622–633. https://doi.org/10.47065/bulletincsr.v5i4.589

Salam, K. N., Hardy, H., Maslim, M., Marsela, I., & Megawaty, M. (2025). Implementasi Design Thinking dalam Pengembangan Aplikasi DIGITS di Telkom Schools: Studi Kasus Transformasi Digital Pendidikan. Advances in Management & Financial Reporting, 3(3), 966–989. https://doi.org/10.60079/amfr.v3i3.627

Subekti, R., Ohyver, Daniel Adolf, Judijanto, Loso, & Satwika, I Kadek Susila. (2024). Transformasi Digital (Teori & Implementasi Menuju Era Society 5.0). PT. Sonpedia Publishing Indonesia. https://www.researchgate.net/publication/380462238_TRANSFORMASI_DIGITAL_Teori_implementasi_Menuju_Era_Society_50

Vivaldi, P. G. M., & Putra, I. G. W. M. N. (2025). Meningkatkan Kreativitas Siswa Smk Rekayasa Denpasar Dalam Perancangan User Interface Desktop Melalui Pelatihan Figma. Jurnal Pengabdian Kepada Masyarakat Nusantara, 6(2), 1632–1641. https://doi.org/10.55338/jpkmn.v6i2.5751