NEW
Font size
WorksheetsDesain Antarmuka Pengguna dan Figma - Worksheet Questions
Total questions: 50
Worksheet time: 25mins
Tujuan utama dari desain antarmuka pengguna adalah ...
Membuat tampilan semenarik mungkin tanpa memperhatikan fungsi
Memastikan pengguna dapat berinteraksi dengan sistem secara efektif dan efisien
Menambahkan fitur sebanyak mungkin ke dalam aplikasi
Mengurangi jumlah pengguna sistem
Prinsip utama dalam desain antarmuka yang menekankan kemudahan pengguna untuk mengenali dan memahami elemen disebut ...
Konsistensi
Visibilitas
Affordance
Feedback
Feedback dalam konteks desain antarmuka berarti ...
Respons sistem terhadap tindakan pengguna
Warna latar belakang aplikasi
Gaya huruf yang digunakan
Tata letak tombol di layar
Salah satu contoh penerapan prinsip konsistensi dalam desain antarmuka adalah ...
Menggunakan gaya tombol yang berbeda di setiap halaman
Menempatkan menu utama di lokasi yang sama di seluruh halaman
Mengubah warna ikon setiap kali aplikasi dijalankan
Menggunakan bahasa yang berbeda di setiap halaman
Warna dalam desain antarmuka memiliki fungsi utama untuk ...
Menarik perhatian dan memberikan makna visual
Mengisi ruang kosong pada tampilan
Menyulitkan pengguna agar lebih fokus
Menambah ukuran file aplikasi
Apa yang dimaksud dengan usability dalam konteks desain antarmuka?
Keindahan desain visual
Kemampuan sistem untuk digunakan dengan mudah dan efisien oleh pengguna
Kestabilan sistem terhadap bug
Kompleksitas kode program
Elemen antarmuka seperti tombol, ikon, dan menu termasuk dalam kategori ...
Komponen interaktif
Komponen estetika
Komponen struktural
Komponen sistem
Prinsip "User Control and Freedom" berarti ...
Pengguna harus mengikuti semua alur yang disediakan tanpa bisa membatalkan
Pengguna memiliki kebebasan untuk membatalkan atau mengulang tindakan dengan mudah
Pengguna tidak boleh membuat kesalahan
Sistem mengatur semua tindakan pengguna
Salah satu kesalahan umum dalam desain antarmuka adalah ...
Menggunakan ikon yang sudah familiar
Memberikan konfirmasi sebelum menghapus data
Menyembunyikan fungsi penting di dalam menu yang sulit ditemukan
Memberikan umpan balik setiap tindakan
Dalam desain antarmuka, istilah wireframe mengacu pada ...
Sketsa awal struktur tampilan aplikasi
Desain akhir dengan warna dan gambar lengkap
Kode program antarmuka
Dokumentasi pengguna
Figma merupakan aplikasi yang digunakan untuk ...
Mengedit video dan animasi
Mendesain dan membuat prototipe antarmuka pengguna (UI/UX)
Membuat database aplikasi
Menulis kode program
Salah satu keunggulan utama Figma dibandingkan aplikasi desain lainnya adalah ...
Hanya bisa digunakan secara offline
Tidak mendukung kolaborasi
Dapat digunakan secara kolaboratif secara real-time melalui browser
Hanya bisa dijalankan di sistem operasi Windows
File proyek di Figma biasanya memiliki ekstensi ...
.fig
.figma
.ui
.design
Dalam Figma, fitur Frame digunakan untuk ...
Menyimpan file
Membuat area kerja atau batas desain seperti artboard
Mengubah warna teks
Menambahkan efek bayangan
Fungsi dari Component di Figma adalah ...
Membuat elemen yang dapat digunakan berulang kali dalam desain
Menambahkan animasi ke tampilan
Mengubah ukuran layar
Mengimpor gambar dari luar
Fitur Prototype pada Figma digunakan untuk ...
Menulis kode program
Menyambungkan antar layar untuk membuat simulasi interaksi pengguna
Menghapus layer
Mengatur warna elemen
Dalam Figma, Auto Layout berfungsi untuk ...
Mengatur tata letak elemen secara otomatis agar responsif terhadap perubahan ukuran
Mengubah ukuran teks
Menambahkan animasi
Menggabungkan dua komponen menjadi satu
Fitur Assets Panel dalam Figma digunakan untuk ...
Menyimpan dan mengakses komponen, gaya, serta ikon yang sering digunakan
Mengatur layer dan grup
Mengatur warna background
Mengatur ukuran kanvas
Apa yang dimaksud dengan Constraints di Figma?
Pengaturan untuk menentukan bagaimana elemen bereaksi terhadap perubahan ukuran frame
Batas maksimal jumlah layer dalam satu desain
Fitur untuk menambahkan efek animasi
Pengaturan untuk mengunci layer
Untuk berbagi hasil desain dengan tim atau klien di Figma, kita bisa menggunakan ...
Menu File > Export as PDF
Menu Share untuk membuat tautan (link) berbagi
Menu View > Zoom In
Menu Edit > Copy
Bagian kanan layar Figma umumnya digunakan untuk ...
Mengatur warna, ukuran, dan properti objek yang dipilih
Menampilkan daftar layer dan frame
Mengelola file dan proyek
Menjalankan prototipe
Panel Layers di Figma terletak di bagian ...
Kiri
Tengah
Kanan
Bawah
Area utama di tengah layar Figma disebut ...
Toolbar
Canvas atau Workspace
Properties Panel
Assets Panel
Ikon berbentuk petir (⚡) pada panel kanan menunjukkan fitur ...
Prototype
Design
Inspect
Auto Layout
Bagian atas dari tampilan Figma berisi ...
Toolbar dan nama file desain
Daftar frame
Asset dan komponen
Layer dan properties
Jika kamu ingin melihat semua layer dan komponen dalam satu proyek, kamu harus membuka panel ...
Prototype
Assets
Layers
Design
Tombol Share yang digunakan untuk membagikan desain Figma kepada orang lain terletak di ...
Pojok kiri atas
Pojok kanan atas
Di bawah canvas
Panel kiri
Panel Assets di Figma berfungsi untuk ...
Mengatur teks dan warna
Menyimpan komponen dan gaya yang bisa digunakan ulang
Mengelola layer dan grup
Mengatur ukuran kanvas
Mode Inspect pada panel kanan digunakan untuk ...
Melihat detail kode CSS, iOS, atau Android dari desain
Mengedit teks dan warna
Menambahkan frame baru
Membuat prototype
Tombol + Frame (atau ikon kotak dengan tanda plus) di toolbar digunakan untuk ...
Menambahkan gambar
Membuat frame baru atau artboard
Menyimpan proyek
Mengatur animasi
Manakah pernyataan yang paling akurat menjelaskan mengapa Frame dianggap sebagai elemen struktural yang lebih unggul dibandingkan Group saat membangun desain antarmuka pengguna (UI) yang responsif?
Group dapat memiliki Fill (latar belakang) dan Stroke, sedangkan Frame tidak.
Frame dapat diubah menjadi Component Utama, sedangkan Group tidak.
Frame mendukung fungsi lanjutan seperti Constraints dan Auto Layout, yang tidak dimiliki oleh Group.
Group dapat menggunakan fitur Clip Content untuk menyembunyikan konten di luar batasnya.
Seorang desainer memiliki Frame yang berisi tiga ikon dan teks. Desainer ingin Frame tersebut secara otomatis membesar dan mengecil secara horizontal ketika panjang teks di dalamnya diubah. Fitur apa yang harus diterapkan pada Frame induk untuk mencapai perilaku ini?
Menerapkan Constraints 'Scale' ke semua elemen.
Menggunakan Group dan menyetel ukuran ke 'Hug Content'.
Menerapkan Auto Layout dan mengatur mode lebar (Width) Frame induk menjadi 'Hug Contents'.
Menggunakan Smart Animate untuk menghitung ulang lebar Frame.
Anda menempatkan tombol call-to-action (CTA) di bagian bawah Frame mobile. Untuk memastikan tombol tersebut selalu mempertahankan lebarnya saat Frame diubah ukurannya, tetapi posisinya tetap terkunci di tepi bawah, bagaimana pengaturan Constraints yang benar?
Horizontal: Left & Right; Vertical: Top
Horizontal: Center; Vertical: Center
Horizontal: Left & Right; Vertical: Bottom
Horizontal: Left; Vertical: Bottom
Jika Anda ingin mengubah warna latar belakang 10 tombol Instance secara serentak dan global di seluruh proyek, tindakan terbaik yang harus Anda lakukan adalah...
Mengubah warna satu Instance, lalu mengklik 'Push Changes to Main Component'.
Memilih semua 10 Instance dan mengubah warnanya secara bersamaan (ini akan menjadi Override).
Mengubah warna pada Component Utama (Main Component) tombol tersebut.
Membuat Style Warna baru dan menerapkannya satu per satu pada setiap Instance.
Apa nama fitur di mode edit vektor Figma yang memungkinkan sebuah titik (node) memiliki koneksi jalur ke lebih dari dua garis sekaligus, menjadikannya berbeda dari editor vektor tradisional?
Smart Paths
Boolean Operations
Vector Networks
Node Interpolation
Untuk memastikan setiap elemen UI menggunakan palet warna yang konsisten dan memungkinkan pembaruan warna primer (misalnya, dari biru menjadi hijau) secara terpusat di seluruh file atau proyek, fitur apa yang harus diatur?
Fill Effects
Layer Blending Modes
Color Styles atau Variables
Smart Selection
Ketika sebuah Frame berisi gambar atau konten yang melebihi batas Frame tersebut, dan desainer ingin menyembunyikan bagian konten yang berada di luar batas Frame, opsi apa yang harus diaktifkan di panel Desain?
Auto Layout
Fix Position when scrolling
Clip Content
Scale Constraints
Jika sebuah tim ingin berbagi Component Utama (misalnya, tombol standar tim) yang sama dan Style Warna di beberapa file Figma yang berbeda, fitur manajemen aset terpusat apa yang harus dipublikasikan?
Prototype Link
Version History
Library
Design Tokens
Dalam mode Prototyping, Trigger interaksi yang paling sesuai untuk membuat animasi kustom di mana pengguna dapat menggerakkan objek (misalnya, menggeser kartu atau panel menu dari samping layar) adalah...
On Click
While Hovering
On Drag
After Delay
Untuk menggabungkan dua atau lebih bentuk dasar (Shape) menjadi satu bentuk tunggal yang kompleks, tetapi tetap mempertahankan kemampuan untuk mengedit masing-masing bentuk asli di panel Layer, operasi Boolean mana yang paling sesuai digunakan?
Union Selection
Subtract
Intersect
Divide
Fitur Auto Layout di Figma digunakan untuk…
Membuat efek bayangan pada objek
Menyusun elemen agar menyesuaikan secara otomatis ketika ukuran kontainer berubah
Menambahkan grid pada desain
Mengatur warna latar belakang frame
Fitur Auto Layout di Figma digunakan untuk…
Membuat efek bayangan pada objek
Menyusun elemen agar menyesuaikan secara otomatisketika ukuran kontainer berubah
Menambahkan grid pada desain
Mengatur warna latar belakang frame
Dalam desain UI/UX, Wireframe berfungsi sebagai…
Desain akhir dengan warna dan tipografi lengkap
Kerangka awal yang menunjukkan struktur dan tata letak tanpa detail visual
Panduan untuk pemilihan warna
Dokumentasi teknis kode program
Fitur Prototype di Figma digunakan untuk…
Menggambar ikon dan ilustrasi vektor
Mengatur sistem grid dan tata letak
Menyambungkan antar frame untuk membuat simulasi interaksi pengguna
Menentukan warna latar belakang desain
Dalam prinsip desain UI, Contrast berperan penting untuk…
Membuat semua elemen memiliki warna yang sama
Menonjolkan elemen penting agar mudah dikenali pengguna
Mengatur ukuran layar desain
Menentukan kecepatan animasi
Plugin di Figma berfungsi untuk…
Menghapus elemen yang tidak diperlukan
Menambahkan fitur tambahan seperti ikon, ilustrasi, atau data dummy
Menyimpan desain ke dalam format gambar
Mengganti tema tampilan Figma
Komponen (Component) di Figma digunakan untuk…
Menambahkan efek bayangan
Mengelompokkan elemen agar bisa digunakan ulang di banyak tempat
Mengatur ukuran kanvas
Menyimpan warna favorit
Dalam desain UX, istilah User Flow mengacu pada…
Perpindahan antar halaman dalam prototipe
Urutan langkah yang dilalui pengguna untuk mencapaitujuan di aplikasi atau situs
Tata letak grid di halaman utama
Kecepatan koneksi pengguna
Figma mendukung kolaborasi tim secara real-time. Hal ini berarti…
Hanya satu orang yang dapat mengedit file dalam satu waktu
Semua anggota tim dapat mengedit dan memberikan komentar secara bersamaan
File harus disimpan manual setiap kali diubah
Desain hanya bisa dilihat oleh pemilik akun
Mode Inspect di Figma digunakan oleh…
Desainer grafis untuk menambah warna
Developer untuk melihat nilai CSS, ukuran, dan jarakantar elemen
Pengguna untuk mengetes desain
Editor untuk mengubah prototipe
