Auto Layout & Style

Komponen	Keterangan
Penyusun	Guru Desain Grafis — Program Keahlian PPLG
Jenjang	SMK / Sederajat
Sekolah	_________________________________
Kelas / Semester	X PPLG / 2 (Genap)
Tahun Pelajaran	2025/2026
Fase	E
Elemen	Design System & Kolaborasi
Kode	DG-E2.12
Topik	Auto Layout, Style Tokens, dan Membangun Halaman dari Komponen
Alokasi Waktu	1 Pertemuan × 4 JP (1 JP = 45 menit) = 180 menit

No	Komponen	Isi
1	Identitas Modul	Modul Ajar DG-E2.12 — Desain Grafis, kelas X PPLG Semester 2 (Genap), Fase E, elemen Design System & Kolaborasi, topik Auto Layout & Style, alokasi 4 JP (180 menit), tahun pelajaran 2025/2026.
2	Kompetensi Awal	1) Peserta didik mampu membuat komponen UI dasar (tombol, kartu, form) — Modul 05. 2) Peserta didik mampu mengatur navigasi dan ikon dalam komponen — Modul 06. 3) Peserta didik memahami prinsip wireframe dan alur halaman — Modul 07. 4) Peserta didik mampu membuat prototipe interaktif dasar — Modul 08. 5) Peserta didik memahami konsep tipografi, warna, dan style — Modul 04.
3	Dimensi Profil Lulusan	Lihat tabel di bawah.
4	Sarana dan Prasarana	Laptop/PC dengan Figma terinstall (akun Figma gratis), proyektor/layar, LKPD Kartu Kerja Auto Layout (Lampiran 1), Lembar Observasi Guru (Lampiran 2), Bahan Bacaan Siswa (Lampiran 4), Kartu Referensi Auto Layout Properties (Lampiran 5), Infografis Auto Layout (Lampiran 6), akses internet untuk Figma.
5	Target Peserta Didik	Reguler (seluruh peserta didik kelas X PPLG); peserta didik pencapaian tinggi mendapat pengayaan berupa tantangan layout kompleks; peserta didik dengan kesulitan belajar mendapat pendampingan scaffolding step-by-step.
6	Model Pembelajaran	Project-Based Learning (PjBL) dengan pendekatan Discovery Learning. Metode: demonstrasi Figma langsung, praktikum mandiri, diskusi kelompok, dan presentasi hasil karya.

Dimensi	Implementasi Konkret dalam Modul Ini
Keimanan dan Ketakwaan	Mengerjakan tugas dengan jujur dan disiplin, tidak menyalin karya teman, mensyukuri kemudahan tools digital yang tersedia.
Kewargaan	Berkontribusi aktif dalam diskusi kelompok, memberikan umpan balik konstruktif terhadap desain teman, menjaga kebersamaan saat bekerja kolaboratif.
Penalaran Kritis	Menganalisis alasan pemilihan direction, padding, dan alignment pada auto layout; mengevaluasi efektivitas style tokens yang diterapkan pada komponen.
Kreativitas	Menciptakan kombinasi auto layout bertingkat yang unik untuk membangun halaman baru dari komponen design system yang sudah ada.
Kolaborasi	Bekerja sama dalam kelompok kecil untuk menyusun halaman utuh, saling mereview layout anggota lain, memberikan masukan perbaikan.
Kemandirian	Bertanggung jawab atas pengerjaan komponen sendiri sebelum digabungkan dalam halaman, mengelola waktu pengerjaan secara mandiri.
Kesehatan	Menerapkan ergonomi kerja digital: posisi duduk benar, istirahat mata setiap 20 menit, menjaga kesehatan fisik selama praktik Figma.
Komunikasi	Menyampaikan hasil desain melalui presentasi singkat, menjelaskan alasan pemilihan auto layout properties di depan kelas, menulis refleksi secara tertulis.

MODUL AJAR — DESAIN GRAFIS