Scribd
Unggah
35 tayangan16 halaman

Praktikum Figma: Frames dalam Desain UI

Dokumen ini adalah modul praktikum untuk mata kuliah Interaksi Manusia & Komputer di Sekolah Tinggi Manajemen Informatika dan Komputer Widya Cipta Dharma. Modul ini membahas penggunaan Frame dalam Figma, termasuk teori dan praktik terkait desain antarmuka, perbedaan antara Frame dan Group, serta langkah-langkah untuk mengatur dan menggunakan Frame dalam proyek desain. Terdapat juga beberapa soal praktik yang meminta mahasiswa untuk membuat dan mengatur Frame dengan spesifikasi tertentu.

Diunggah oleh

alexnoct456
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
35 tayangan16 halaman

Praktikum Figma: Frames dalam Desain UI

Dokumen ini adalah modul praktikum untuk mata kuliah Interaksi Manusia & Komputer di Sekolah Tinggi Manajemen Informatika dan Komputer Widya Cipta Dharma. Modul ini membahas penggunaan Frame dalam Figma, termasuk teori dan praktik terkait desain antarmuka, perbedaan antara Frame dan Group, serta langkah-langkah untuk mengatur dan menggunakan Frame dalam proyek desain. Terdapat juga beberapa soal praktik yang meminta mahasiswa untuk membuat dan mengatur Frame dengan spesifikasi tertentu.

Diunggah oleh

alexnoct456
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

Figma

Modul Praktikum

S1– SISTEM INFORMASI

Interaksi Manusia & Komputer


PRAKTIKUM

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER


WIDYA CIPTA DHARMA
2025
Figma

Bagian 3
FRAMES, FRAME
Figma
Figma

# Iphone 17 pro max - 3

Frame Illustration berada di dalam Frame Iphone 17 Pro Max – 3


Figma
Figma
Figma
Figma
Figma
Figma
Figma
Figma
Figma
Figma
Figma
Figma

Soal Teori & Praktik

1. Apa yang dimaksud dengan Frame dalam Figma?


Jelaskan fungsi utamanya dalam desain antarmuka.

2. Sebutkan perbedaan antara Frame dan Group di Figma.


Mengapa Frame lebih sering digunakan dalam UI design?

3. Praktik:
Buat sebuah Frame berukuran Desktop (1440 × 1024 px) dan beri nama
“Homepage”. Tambahkan screenshot sebagai bukti.

4. Bagaimana cara mengubah ukuran Frame secara manual dan otomatis (Auto
Layout)? Jelaskan langkah-langkahnya.

5. Sebutkan tiga kegunaan utama Frame dalam desain layout Figma.

6. Praktik:
Buat dua Frame yang berbeda: satu untuk Mobile (390 × 844 px) dan satu untuk
Tablet (768 × 1024 px). Beri warna background yang berbeda pada masing-
masing Frame.

7. Apa fungsi opsi “Clip Content” pada Frame?


Berikan contoh situasi di mana fitur ini penting digunakan.

8. Bagaimana cara mengatur Frame agar menjadi bagian dari Prototype Flow
(frame awal saat presentasi)? Jelaskan langkah-langkahnya.

9. Praktik:
Buat Frame utama lalu di dalamnya tambahkan Frame kecil sebagai “Card” (kartu
UI). Atur posisi card tersebut menggunakan fitur alignment (center, middle).

10. Mengapa pengaturan nama Frame (rename) sangat penting dalam proyek
Figma dengan tim kolaborasi? Jelaskan dengan contoh.

Anda mungkin juga menyukai