Font size
WorksheetsPTS UI/UX Semester Ganjil TP 2025/2026
Total questions: 40
Worksheet time: 1hrs 11mins
UI Kit berfungsi utama untuk ….
Menyediakan template presentasi
Mempermudah pembuatan desain dengan komponen siap pakai
Mengatur ukuran layar monitor
Membuat coding otomatis
Mengatur sistem operasi
Komponen UI Kit berikut yang digunakan untuk menampilkan teks adalah ….
Icon
Navigation component
Typography
Button
Color palettes
Palet warna yang diambil dari Colorhunt.co termasuk dalam elemen …
Warna
Font
Spasi
Layout
Navigasi
Fungsi icon dalam UI design adalah ….
Membuat teks lebih jelas
Menentukan ukuran layout
Memberikan efek bayangan
Mengatur navigasi antar halaman
Menjadi representasi visual suatu fungsi/menu
Layout grid terdiri dari ….
Padding, spacing, alignment
Columns, gutters, margins
Rows, tables, spacing
Dimensions, color, spacing
Font, size, alignment
Alignment dalam desain berfungsi untuk ….
Memberi efek 3D
Menambah resolusi gambar
Mengganti warna background
Menyusun elemen agar rapi dan sejajar
Membuat teks menjadi bold
Font yang umum digunakan untuk web adalah ….
Times New Roman, Courier New, Open Sans
Roboto, Open Sans, Papyrus
Courier New, Roboto, Jokerman
Roboto, Open Sans, Helvetica
Jokerman, Helvetica, Times New Roman
Frame pada Figma berfungsi sebagai ….
Template presentasi
Efek bayangan pada objek
Wadah untuk mengatur elemen desain
Sistem backup data
Filter warna
Frame tingkat atas (top-level frame) adalah ….
Frame untuk animasi
Frame yang berbentuk icon
Frame hasil duplikasi
Frame yang berada di dalam group
Frame yang berdiri langsung di atas kanvas
Shortcut membuat duplikasi frame di Figma (Windows) adalah ….
Ctrl + V
Ctrl + Shift + G
Ctrl + D
Ctrl + Alt + D
Ctrl + Enter
Properti frame yang digunakan untuk menambahkan bayangan adalah ….
Effects
Fill
Stroke
Clip content
Constraint
Auto Layout pada Figma berfungsi untuk ….
Memberi warna otomatis
Menyesuaikan tata letak berdasarkan isi frame
Menghapus layout grid
Mengunci ukuran frame
Memberikan animasi
Constraint dalam Figma digunakan untuk ….
Memberi efek blur
Menghapus frame induk
Menyalin desain antar frame
Menyimpan file desain
Menentukan bagaimana objek anak beradaptasi saat frame diubah ukurannya
Perbedaan utama nested frame dan top-level frame adalah ….
Nested frame ada di dalam frame lain, sedangkan top-level frame langsung di kanvas
Nested frame hanya untuk icon, top-level frame untuk teks
Nested frame hanya bisa horizontal, top-level frame vertical
Nested frame otomatis memiliki bayangan, top-level tidak
Tidak ada perbedaan
Fungsi “Resize to Fit” pada frame adalah ….
Menyesuaikan ukuran frame agar pas dengan konten di dalamnya
Membesarkan ukuran font otomatis
Mengganti warna background frame
Menambahkan grid layout
Menghapus semua child object
Shortcut Resize to Fit di Windows adalah ….
Ctrl + Alt + R
Ctrl + Shift + R
Alt + Shift + Ctrl + R
Ctrl + Enter
Ctrl + Backspace
Efek Clip Content pada frame digunakan untuk ….
Memberi efek blur
Menambah resolusi gambar
Mengunci alignment
Menyembunyikan objek yang melebihi batas frame
Memperbesar ukuran font
Fitur prototyping dalam Figma memungkinkan ….
Menambahkan kode otomatis
Membuat interaksi antar frame
Menyimpan file ke cloud
Mengatur warna background
Mengubah stroke frame
Untuk mengubah ukuran frame secara manual dapat dilakukan melalui ….
Sidebar kanan (kolom W dan H)
Klik kanan → Resize All
Menu File → Frame Size
Menu Edit → Transform
Shortcut Ctrl + T
Section pada Figma digunakan untuk ….
Menyimpan aset font
Menandai area kerja/frame agar siap untuk pengembangan (dev)
Membuat animasi otomatis
Menyembunyikan objek
Membuat duplikasi warna
File font resmi bisa diunduh dari ….
Google Font
Adobe Font
Da Font
Getuikit
Flaticon
Layout fluid memiliki ciri ….
Lebar tetap dan tidak berubah
Selalu berbentuk grid 3 kolom
Tidak memiliki gutter
Hanya bisa dipakai untuk mobile
Menyesuaikan dengan resolusi layar pengguna
Navigation component dalam UI kit berguna untuk ….
Menampilkan teks judul
Mengatur ukuran frame
Memberikan arah perpindahan halaman/menu
Memberikan bayangan pada tombol
Mengubah warna latar belakang
Ikon yang menyesuaikan sistem operasi perangkat lunak disebut ….
3D icon
Vektor icon
Interface icon
OS-based icon
Web icon
Fungsi Selection colors di Figma adalah …
Melihat dan mengubah warna pada pilihan campuran (mixed selection)
Menyaring objek berdasarkan jenis file
Menghapus warna background
Mengatur opacity teks
Mengubah font secara otomatis
Figma pertama kali didirikan pada tahun ....
2010
2011
2012
2013
2014
Keunggulan utama Figma dibanding software desain lain adalah…
Tidak perlu koneksi internet
Berbasis cloud dan bisa diakses dimana saja
Tidak bisa digunakan untuk prototyping
Hanya mendukung format JPG
Hanya tersedia di Windows
Fitur Modern Pen Tool dalam Figma memungkinkan pengguna …
Menghubungkan titik awal desain secara otomatis
Menggambar langsung dengan pensil bebas
Membuat bentuk 3D
Menggambar tanpa harus kembali ke titik awal
Menambahkan warna gradien
Fitur OpenType pada Figma digunakan untuk…
Membuat animasi GIF
Mengatur font agar lebih presisi
Mengatur warna teks
Mengatur ukuran canvas
Mengkostumisasi font pada aplikasi atau web
Fitur Auto Layout pada Figma berfungsi untuk…
Mengatur layout secara otomatis
Menambahkan animasi pada tombol
Membuat prototype langsung di smartphone
Membuat overlay dinamis
Menambahkan elemen library
Jodohkan berikut ini
Fitur Figma untuk membuat layout secara otomatis
Auto Layout
Fitur untuk menyesuaikan font pada aplikasi atau web
OpenType
Proses membuat mockup dapat terhubung sesuai alur interaksi
Prototyping
Sketsa kasar untuk memvisualisasikan ide
Sketsa
Wireframe dengan presisi rendah
Low-fidelity
Jodohkan berikut ini
Wireframe detail mirip produk akhir
High-fidelity
Desain statis sesuai tampilan final
Mockup
Fitur Figma yang memungkinkan kolaborasi real-time
Kolaboratif online
Kelemahan utama Figma
Membutuhkan koneksi internet stabil
Format file yang dapat diekspor dari Figma
JPG, PNG, PDF
Fungsi: Menambahkan ikon, diagram, chart → (a) sedangkan Mengatur gaya tombol interaksi → (b)
Tahap awal, ide dituangkan dengan cepat → (a)
Desain statis, warna dan detail sudah lengkap → (a) sedangkan Proses membuat alur interaksi antar halaman → (b)
Analisislah sebuah aplikasi mobile yang sering kamu gunakan! Identifikasi penggunaan 4 elemen UI (warna, font, icon, layout) yang ada di dalam aplikasi tersebut. Apa kelebihan dan kekurangannya?
Bandingkan antara fixed layout dan fluid layout ! Dalam kondisi apa masing-masing layout lebih efektif digunakan?
Literasi digital sangat penting dalam desain. Menurut pendapatmu, bagaimana cara seorang desainer memastikan bahwa icon, font, dan aset digital yang dipakai tidak melanggar hak cipta?
Dalam sebuah proyek desain aplikasi sekolah, timmu diminta membuat sistem antrean digital di kantin. Tuliskan Alur Sistem Desain Tampilan Aplikasinya !
Sebuah desain aplikasi terlihat menarik di desktop, tetapi tidak rapi di tampilan mobile. Analisislah penyebabnya dan berikan solusi perbaikannya dengan menerapkan prinsip UI Design yang benar.
