Antarmuka Figma

Sekolah: SMKN 1 Sampang
Mata Pelajaran: Desain Web

Kelas: XI F
Alokasi Waktu: 3 × 45 menit
Tahun Pelajaran: 2025/2026
Penyusun: Ach. Mubarok Wardana Sudianto, S.Kom., Gr.

Tujuan Pembelajaran

Peserta didik mampu memahami antarmuka Figma dan mengenal fungsi-fungsi utama untuk mendesain prototipe web atau UI/UX.

Identifikasi Peserta Didik

Siswa kelas XI DKV sebagian sudah mengenal software desain grafis (CorelDRAW, Photoshop), namun belum terbiasa menggunakan Figma.

• Materi: Antarmuka Figma dan praktik dasar
• Relevansi: Dasar penting untuk mendesain UI/UX digital
• Tingkat Kesulitan: Rendah – Sedang

Dimensi Profil Lulusan:

• Penalaran Kritis
• Kreativitas
• Kemandirian
• Komunikasi

Desain Pembelajaran

• Capaian Pembelajaran: Peserta didik dapat memahami antarmuka Figma, mengenal tools dan panel utama, serta dapat membuat desain dasar.
• Lintas Disiplin: DKV, Informatika
• Topik: Antarmuka Figma
• Metode Pembelajaran: Demonstrasi, Discovery Learning, Project Based Learning
• Kemitraan: Guru DKV, guru Informatika, komunitas desain digital
• Lingkungan: Lab komputer, kelas, Figma Online
• Pemanfaatan Digital: Figma Community, video tutorial, LMS

Langkah-langkah Pembelajaran

Awal

• Guru menyampaikan tujuan pembelajaran: memahami antarmuka Figma.
• Apersepsi: menanyakan pengalaman siswa menggunakan software desain sebelumnya.
• Menampilkan tampilan Figma melalui proyektor atau layar siswa.

Inti

Memahami

• Mendengarkan penjelasan guru tentang menu utama, toolbar, panel layers, properties, dan canvas Figma.
• Mengamati contoh proyek Figma yang sederhana, seperti layout website atau UI aplikasi.

Mengaplikasi (Praktik di Figma)

• Membuka Figma dan membuat frame baru.
• Mengenal toolbar, menu objek, panel layers, dan properties panel.
• Mencoba menambahkan shape, teks, dan warna ke frame.
• Membuat layout sederhana seperti header dan tombol.
• Diskusi kelompok mengenai fungsi tools dan layout yang dibuat.

Merefleksi

• Menyampaikan pendapat tentang kemudahan dan fungsi Figma.
• Menuliskan catatan pribadi mengenai tools favorit dan tips penggunaan.

Penutup

• Guru memberikan umpan balik terhadap praktik dan catatan siswa.
• Siswa menyimpulkan hasil pembelajaran hari itu.
• Guru memberi arahan untuk praktik berikutnya, misalnya membuat prototipe website sederhana.

Asesmen Pembelajaran

Awal (Tanya Jawab)

• Pernahkah kamu menggunakan Figma sebelumnya? Jika ya, pengalaman apa yang kamu miliki?
• Sebutkan beberapa software desain yang sudah kamu gunakan!
• Mengapa penting mengenal antarmuka Figma sebelum membuat desain?

Proses

• Observasi aktivitas praktik di Figma
• Diskusi kelompok mengenai fungsi tools dan layout

Akhir

• Tes lisan (menjelaskan antarmuka Figma dan fungsi tools)
• Penilaian proyek (membuat frame sederhana dengan shape, teks, dan warna)
• Observasi partisipasi diskusi
• Self Assessment (refleksi pemahaman antarmuka Figma dan praktiknya)

Materi Pembelajaran

1. Pengertian Figma

Figma adalah aplikasi desain berbasis cloud yang digunakan untuk membuat desain web, UI, dan prototipe interaktif. Kelebihannya adalah kolaborasi real-time dan penggunaan tools yang mudah diakses.

2. Bagian Utama Antarmuka Figma

• Toolbar: Menampilkan alat seperti move, shape, text, pen, dan lain-lain.
• Canvas: Area kerja utama untuk menempatkan objek dan frame.
• Panel Layers: Menampilkan urutan dan struktur objek di canvas.
• Properties Panel: Menampilkan pengaturan objek, seperti ukuran, warna, border, dan efek.
• Menu Utama: File, Edit, View, dan menu lain untuk manajemen proyek.

3. Praktik Dasar di Figma

• Membuat frame baru untuk layout website atau aplikasi.
• Menambahkan shape (kotak, lingkaran) dan mengatur ukurannya.
• Menambahkan teks dan memilih font serta ukuran yang sesuai.
• Menerapkan warna pada shape dan teks menggunakan Color Picker.
• Mempelajari alignment dan spacing antar objek.

4. Tips Praktik Figma

• Gunakan shortcut untuk mempercepat workflow (misal: V untuk Move, R untuk Rectangle).
• Manfaatkan Components untuk membuat elemen yang bisa digunakan berulang.
• Gunakan Figma Community untuk mencari template dan inspirasi desain.
• Selalu simpan proyek secara berkala dan beri nama frame sesuai konten.

💡 Tips Siswa

• Coba eksplorasi toolbar dan properties panel untuk memahami fungsi masing-masing tools.
• Mulai dengan frame sederhana dan tambahkan shape, teks, dan warna.
• Diskusikan hasil layout dengan teman kelompok untuk mendapat masukan.