Desain GrafisSemester 2Pertemuan 5 · 1 Pertemuan x 4 JP (180 menit)

Modul Ajar — Elemen UI: Tombol, Form, Kartu

Modul ajar pertemuan 5: mendesain komponen tombol (primary, secondary, disabled), form elements (input, dropdown, checkbox), dan card component menggunakan Figma.

#figma#ui-components#tombol#form#card

MODUL AJAR — Desain Grafis

KomponenKeterangan
Penyusun(isi nama guru pengampu)
JenjangSMK/MAK
SekolahSMK Bina Rahayu
Kelas/SemesterX / 2 (Genap)
Tahun Pelajaran2026/2027
FaseE
ElemenDesain UI (Figma)
Kode ModulDG-E2.5
Alokasi Waktu1 Pertemuan x 4 JP (180 menit)

1. Identitas Modul

KomponenKeterangan
Nama Penyusun(isi nama guru pengampu)
InstitusiSMK Bina Rahayu
Mata PelajaranDesain Grafis
Kelas/SemesterX / 2 (Genap)
FaseE
ElemenDesain UI (Figma)
TopikElemen UI: Tombol, Form, Kartu
Kode ModulDG-E2.5
Alokasi Waktu1 Pertemuan x 4 JP (180 menit)
Tahun Pelajaran2026/2027

2. Kompetensi Awal

Sebelum mempelajari modul ini, peserta didik telah memiliki kompetensi awal sebagai berikut:

  1. Mampu mengoperasikan antarmuka Figma secara dasar, termasuk membuat frame, menggunakan toolbar utama (Move, Frame, Shape, Text, Pen), serta mengelola zoom dan navigasi canvas (Modul 01 — Pengenalan Figma).
  2. Mampu mengelola struktur desain melalui panel Layers dan Groups, menggunakan fitur alignment dan distribution, serta menjalankan operasi boolean sederhana seperti Union, Subtract, dan Intersect (Modul 02 — Eksplorasi Tools Figma).
  3. Mampu menyusun layout dasar aplikasi menggunakan grid dan guides pada Figma, menerapkan spacing dan padding yang konsisten, serta memahami konsep 8px grid system (Modul 03 — Desain UI Dasar).
  4. Memahami dan menerapkan prinsip tipografi UI (pemilihan font, ukuran, hierarki teks), penggunaan warna (palet, kontras, aksesibilitas), serta gaya visual (shadow, border, border radius) dalam desain antarmuka (Modul 04 — Tipografi, Warna, dan Style).

3. Dimensi Profil Lulusan

Berikut adalah dimensi Profil Lulusan yang dikembangkan dalam modul ini beserta implementasi konkretnya:

DimensiImplementasi Konkret dalam Modul Ini
Keimanan dan KetakwaanPeserta didik menunjukkan sikap jujur dalam mengerjakan tugas desain komponen, tidak menyalin karya orang lain tanpa atribusi, dan menyelesaikan praktik dengan penuh tanggung jawab
KewargaanPeserta didik mengapresiasi keberagaman gaya desain komponen UI dari berbagai budaya dan platform, memahami bahwa pemilihan gaya tombol atau kartu dapat berbeda tergantung konteks pengguna lokal dan global
Penalaran KritisPeserta didik menganalisis mengapa suatu varian tombol (primary, secondary, ghost) dipilih untuk konteks tertentu, mengevaluasi kejelasan hierarchy konten dalam kartu, dan memutuskan state mana yang paling tepat untuk form element
KreativitasPeserta didik menciptakan variasi komponen tombol, form, dan kartu yang orisinal, tidak sekadar meniru contoh, dengan menggabungkan elemen tipografi, warna, dan spacing secara kreatif
KolaborasiPeserta didik bekerja sama dalam kelompok kecil saat sesi peer review komponen, memberikan umpan balik yang spesifik dan membangun terhadap komponen yang didesain teman, serta menulis refleksi kolaboratif tentang proses desain
KemandirianPeserta didik mampu menyelesaikan aktivitas praktik mendesain komponen tombol, form, dan kartu secara individu dengan pengelolaan waktu dan sumber daya yang baik
KesehatanPeserta didik memperhatikan ergonomi saat mengerjakan tugas desain komponen: postur duduk yang benar, jarak pandang ke layar, dan istirahat mata secara berkala
KomunikasiPeserta didik menyampaikan gagasan desain komponennya secara lisan saat presentasi, menjelaskan alasan pemilihan varian dan state, serta menulis refleksi tertulis dengan bahasa yang jelas dan terstruktur

4. Sarana dan Prasarana

NoSarana/PrasaranaKeterangan
1Laboratorium KomputerRuangan dengan minimal 20 unit komputer/laptop yang memadai untuk menjalankan Figma
2Akun Figma (gratis pendidikan)Setiap peserta didik memiliki akun Figma Education yang sudah terverifikasi
3Proyektor dan LayarUntuk demonstrasi langsung (live demo) oleh guru di depan kelas
4Koneksi Internet StabilDiperlukan untuk mengakses Figma berbasis browser dan menyimpan file secara cloud
5Kartu Kerja Komponen UIMedia cetak dari Lampiran 1 (LKPD) yang dicetak satu set per peserta didik
6Kartu Referensi Komponen UIMedia cetak dari Lampiran 5 sebagai referensi cepat selama praktik
7Infografis Jenis Komponen UIMedia cetak dari Lampiran 6 yang ditempel di lab sebagai pengingat visual

5. Target Peserta Didik

KategoriKarakteristikStrategi
RegulerPeserta didik dengan kemampuan rata-rata yang sudah menguasai kompetensi awal modul sebelumnyaMengikuti skenario pembelajaran standar: demonstrasi, praktik terbimbing, dan presentasi
Pencapaian TinggiPeserta didik yang sudah menguasai Figma dengan baik dan ingin tantangan lebihDiberikan pengayaan berupa eksplorasi komponen variabel (variant) di Figma, pembuatan UI Kit sederhana, dan studi kasus komponen dari aplikasi profesional
Kesulitan BelajarPeserta didik yang masih kesulitan mengoperasikan Figma atau memahami hierarki komponenDisediakan panduan langkah demi langkah (step-by-step) terstruktur, pendampingan satu lawan satu saat praktik, dan Template Figma komponen siap pakai yang bisa dimodifikasi

6. Model Pembelajaran

KomponenKeterangan
PendekatanProject-Based Learning (PjBL) — peserta didik mendesain set komponen UI nyata yang relevan dengan kebutuhan antarmuka aplikasi
ModelCooperative Learning — pembagian kelompok kecil untuk diskusi komponen, peer review, dan presentasi desain
MetodeObservasi (mengamati contoh komponen dari aplikasi nyata), Diskusi (menganalisis pilihan desain komponen), Presentasi (menjelaskan hasil karya), Demonstrasi (guru memperagakan teknik pembuatan komponen di Figma), Praktik (peserta didik mendesain komponen secara langsung)
Strategi TambahanThink-Pair-Share untuk refleksi awal tentang komponen UI; Gallery Walk untuk melihat karya teman

Sebelumnya

Tipografi UI, Warna & Style

Selanjutnya

Elemen UI: Navigasi, Ikon, Gambar