Desain GrafisSemester 2Pertemuan 11 · 1 Pertemuan x 4 JP (180 menit)
Modul Ajar — Design System: Komponen & Variants
Modul ajar pertemuan 11: memahami konsep design system dan manfaatnya dalam pengembangan antarmuka, serta membuat komponen reusable dengan varian (variants) di Figma.
#design-system#component#variants#reusable#figma
MODUL AJAR — Desain Grafis
| Komponen | Keterangan |
|---|---|
| Penyusun | Guru Desain Grafis |
| Jenjang | SMK/MAK |
| Sekolah | SMK Negeri |
| Kelas/Semester | X PPLG / 2 (Genap) |
| Tahun Pelajaran | 2026/2027 |
| Fase | E |
| Elemen | Design System & Kolaborasi |
| Kode Modul | DG-E2.11 |
| Alokasi Waktu | 1 Pertemuan x 4 JP (180 menit) |
1. Identitas Modul
| Komponen | Isi |
|---|---|
| Nama Modul | Design System: Komponen & Variants |
| Mata Pelajaran | Desain Grafis |
| Kelas / Semester | X PPLG / 2 (Genap) |
| Fase / Kode | E / DG-E2.11 |
| Elemen | Design System & Kolaborasi |
| Topik | Design system dan manfaatnya, membuat komponen reusable, varian tombol dan input |
| Alokasi Waktu | 1 Pertemuan x 4 JP (180 menit) |
| Tahun Pelajaran | 2026/2027 |
2. Kompetensi Awal
Sebelum mempelajari modul ini, peserta didik telah memiliki kompetensi awal dari modul-modul sebelumnya:
- 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).
- Mampu mengelola struktur desain melalui panel Layers dan Groups, menjalankan operasi boolean, serta menggunakan alignment dan distribution (Modul 02 — Eksplorasi Tools Figma).
- Mampu menyusun layout dasar menggunakan grid, guides, spacing, dan padding konsisten dengan prinsip 8px grid system (Modul 03 — Desain UI Dasar).
- Memahami prinsip tipografi UI (font, ukuran, hierarki), penggunaan warna (palet, kontras, aksesibilitas), serta gaya visual (shadow, border, border radius) (Modul 04 — Tipografi, Warna, dan Style).
- Mampu mendesain komponen tombol (primary, secondary, ghost, disabled), form elements (text input, dropdown, checkbox, radio, toggle), dan card component (content card, action card) (Modul 05 — Elemen UI: Tombol, Form, Kartu).
- Mampu mendesain elemen navigasi (navbar, sidebar, tab bar), ikon UI, dan gambar dalam antarmuka (Modul 06 — Elemen UI: Navigasi, Ikon, Gambar).
- Mampu menyusun wireframe untuk proyek aplikasi sederhana dengan layout yang terstruktur dan memahami alur pengguna (Modul 07 — Wireframe dan Alur Halaman).
- Mampu membuat prototype interaktif dengan menghubungkan frame, menambahkan transisi dan animasi dasar menggunakan fitur prototyping di Figma (Modul 08 — Prototype Interaktif).
3. Dimensi Profil Lulusan
Berikut adalah dimensi Profil Lulusan yang dikembangkan dalam modul ini beserta implementasi konkretnya:
| Dimensi | Implementasi Konkret dalam Modul Ini |
|---|---|
| Keimanan dan Ketakwaan | Peserta didik menunjukkan sikap jujur dan disiplin dalam membuat komponen desain, tidak menyalin karya teman tanpa atribusi, serta menyelesaikan tugas dengan tanggung jawab dan penuh perhitungan |
| Kewargaan | Peserta didik mengapresiasi keberagaman design system dari berbagai perusahaan teknologi dunia (Google Material, Apple HIG, Ant Design), memahami bahwa komponen disesuaikan dengan konteks budaya dan kebutuhan pengguna lokal maupun global |
| Kolaborasi | Peserta didik bekerja sama dalam kelompok untuk menyusun component library bersama, memberikan masukan konstruktif terhadap desain komponen teman, dan saling membantu menyelesaikan tantangan pembuatan varian |
| Kemandirian | Peserta didik mampu merancang dan membuat komponen reusable dengan varian secara individu di Figma, mengelola proses desain dari konsep hingga hasil jadi tanpa ketergantungan berlebihan |
| Penalaran Kritis | Peserta didik menganalisis mengapa suatu design system diperlukan dalam proyek pengembangan antarmuka, mengevaluasi efisiensi penggunaan komponen reusable dibandingkan membuat desain dari nol setiap kali, dan memutuskan varian mana yang tepat untuk konteks tertentu |
| Kreativitas | Peserta didik menciptakan set komponen reusable dengan varian yang orisinal, menggabungkan elemen tipografi, warna, spacing, dan Auto Layout secara kreatif untuk menghasilkan component library yang fungsional dan estetis |
| Kesehatan | Peserta didik menerapkan ergonomi digital dengan menjaga konsistensi spacing dan ukuran komponen sehingga antarmuka nyaman dilihat, serta mengatur waktu istirahat selama praktik desain yang berkepanjangan |
| Komunikasi | Peserta didik menyampaikan gagasan desain komponennya secara lisan saat presentasi component library, menjelaskan alasan pemilihan varian dan struktur design system, serta menulis refleksi tertulis dengan bahasa yang jelas dan terstruktur |
4. Sarana dan Prasarana
| No | Sarana/Prasarana | Keterangan |
|---|---|---|
| 1 | Laboratorium Komputer | Ruangan dengan minimal 20 unit komputer/laptop yang memadai untuk menjalankan Figma |
| 2 | Akun Figma (gratis pendidikan) | Setiap peserta didik memiliki akun Figma Education yang sudah terverifikasi |
| 3 | Proyektor dan Layar | Untuk demonstrasi langsung (live demo) oleh guru di depan kelas |
| 4 | Koneksi Internet Stabil | Diperlukan untuk mengakses Figma berbasis browser dan menyimpan file secara cloud |
| 5 | LKPD Template Design System | Media cetak dari Lampiran 1 (LKPD) yang dicetak satu set per peserta didik |
| 6 | Kartu Struktur Design System | Media cetak dari Lampiran 5 sebagai referensi cepat selama praktik |
| 7 | Infografis Alur Design System | Media cetak dari Lampiran 6 yang ditempel di lab sebagai pengingat visual |
5. Target Peserta Didik
| Kategori | Keterangan | Strategi |
|---|---|---|
| Reguler | Peserta didik dengan pemahaman rata-rata yang sudah menguasai komponen dasar dari modul-modul sebelumnya | Mengikuti skenario pembelajaran standar: demonstrasi, praktik terbimbing, diskusi kelompok, dan presentasi |
| Pencapaian Tinggi | Peserta didik yang sudah menguasai Figma dengan baik dan ingin tantangan lebih | Diberikan pengayaan berupa eksplorasi design token, pembuatan UI Kit profesional, studi kasus design system dari perusahaan besar, dan penulisan dokumentasi komponen |
| Kesulitan Belajar | Peserta didik yang masih kesulitan memahami konsep komponen atau mengoperasikan fitur variant di Figma | Disediakan template Figma dengan komponen dasar yang sudah disediakan, panduan langkah demi langkah terstruktur, dan pendampingan satu lawan satu saat praktik |
6. Model Pembelajaran
| Komponen | Keterangan |
|---|---|
| Pendekatan | Project-Based Learning (PjBL) — peserta didik membuat component library sederhana yang bisa digunakan secara reusable dalam proyek desain antarmuka |
| Model | Cooperative Learning — pembagian kelompok kecil untuk diskusi design system, peer review komponen, dan presentasi component library |
| Metode | Observasi (mengamati contoh design system dari aplikasi nyata), Diskusi (menganalisis struktur design system profesional), Presentasi (menjelaskan hasil component library), Demonstrasi (guru memperagakan pembuatan komponen reusable di Figma), Praktik (peserta didik mendesain komponen reusable secara langsung) |
| Strategi Tambahan | Think-Pair-Share untuk refleksi awal tentang design system; Gallery Walk untuk melihat component library hasil karya teman |
Daftar Isi