Font size
WorksheetsUji Kompetensi Figma
Total questions: 16
Worksheet time: 16mins
Anda diminta untuk merancang sebuah tombol yang dapat digunakan kembali di banyak halaman. Setiap kali Anda mengubah warna, ukuran, atau teks pada tombol utama, perubahan tersebut harus berlaku secara otomatis pada semua tombol yang telah Anda tempatkan. Fitur Figma apa yang paling sesuai untuk kebutuhan ini?
Frames
Groups
Components
Layout Grids
Seorang desainer ingin memastikan bahwa sebuah elemen (misalnya, logo) tetap berada 16 piksel dari sisi kiri dan 16 piksel dari sisi atas Frame-nya, bahkan saat Frame diperbesar. Fitur apa yang harus digunakan untuk mengunci posisi elemen ini?
Auto Layout
Constraints
Interactive Components
Variants
Anda sedang membuat sebuah prototipe. Anda ingin membuat transisi dari halaman daftar produk ke halaman detail produk dengan animasi geser dari kanan ke kiri. Pengaturan Prototyping apa yang paling tepat untuk mencapai efek ini?
Smart Animate
Push
Dissolve
Move in
Anda memiliki beberapa elemen (ikon, teks, dan latar belakang) yang ingin Anda susun secara vertikal dengan jarak 8 piksel di antara masing-masing elemen. Anda ingin jarak ini tetap konsisten bahkan saat Anda menambah atau mengurangi elemen. Fitur apa yang paling efisien untuk mengotomatiskan proses ini?
Frames
Grids
Auto Layout
Groups
Anda bekerja dalam tim dan telah membuat sebuah palet warna standar untuk proyek. Anda ingin semua anggota tim dapat mengakses warna-warna ini dan dapat memperbarui warna secara global jika ada perubahan. Apa langkah yang paling tepat untuk mengimplementasikan palet warna ini?
Menggunakan 'Fill' pada setiap elemen dan membagikan file
Membuat 'Color Styles' dan mempublikasikannya sebagai 'Library'
Menggunakan 'Gradient' pada setiap elemen
Menyalin kode Hex warna ke dalam dokumen terpisah
Apa perbedaan utama antara 'Frame' dan 'Group' di Figma?
Frame hanya dapat menampung 'Layers', sementara Group dapat menampung 'Components'.
Hanya Frame yang dapat diatur ukurannya secara manual, sementara Group tidak bisa.
Frame memiliki 'Constraints' dan 'Auto Layout', sementara Group tidak.
Group digunakan untuk mengorganisasi elemen, sementara Frame hanya digunakan sebagai 'Artboard' atau container.
Seorang desainer ingin membuat header yang responsif untuk sebuah situs web. Header tersebut berisi logo di sebelah kiri dan menu navigasi di sebelah kanan. Keduanya harus tetap di sisi berlawanan saat frame diperbesar atau diperkecil. Fitur apa saja yang paling tepat untuk digunakan?
Menggunakan 'Constraints' dengan pengaturan 'Left' pada logo dan 'Right' pada menu navigasi.
Menggunakan 'Smart Animate' untuk transisi header.
Mengatur frame header sebagai 'Auto Layout' dan mengaktifkan properti 'Space Between'.
Menggunakan 'Layout Grids' dengan 12 kolom untuk memastikan responsivitas.
Mengubah frame menjadi 'Group' dan mengatur posisi elemen di dalamnya.
Tim Anda sedang membangun design system. Anda diminta untuk membuat komponen tombol yang memiliki berbagai variasi. Dua fitur utama Figma yang harus Anda gunakan untuk mengelola semua variasi ini secara efisien adalah?
'Interactive Components' untuk membuat interaksi antara status tombol.
'Export Settings' untuk menyimpan variasi tombol.
'Variants' untuk mengelompokkan semua variasi tombol ke dalam satu set komponen.
'Prototypes' untuk menghubungkan setiap tombol.
'Comments' untuk mencatat perubahan pada tombol.
Anda adalah seorang desainer UX yang sedang mengumpulkan umpan balik dari pengguna. Anda membuat prototipe interaktif di Figma dan ingin tim riset dapat merekam feedback mereka secara langsung pada prototipe. Dua fitur kolaborasi apa yang paling membantu dalam proses ini?
'Library' untuk membagikan komponen yang digunakan.
'Sharing Link' dengan izin 'Can view prototypes'.
'Version History' untuk melacak perubahan.
'Comments' yang dapat digunakan tim riset untuk memberi feedback langsung.
'Multiplayer' yang memungkinkan semua orang melihat cursor satu sama lain.
Dua tindakan pertama yang harus Anda lakukan untuk meningkatkan keterbacaan dan mempermudah developer adalah?
Mengubah semua elemen menjadi 'Groups'.
Menggunakan plugin 'Component Replacer' untuk mengganti elemen dengan komponen.
Mengubah semua elemen menjadi 'Frames'.
Menggunakan 'Styles' untuk teks dan warna, dan membuat 'Components' dari elemen yang sering digunakan.
Menggunakan fitur 'Section' untuk mengelompokkan elemen.
Fitur apa yang harus Anda manfaatkan untuk memastikan konsistensi ini?
'Export' pengaturan untuk setiap elemen.
'Color Styles' untuk menyimpan warna standar proyek.
'Text Styles' untuk menyimpan properti tipografi standar.
'Version History' untuk melacak perubahan.
'Variants' untuk membuat berbagai ukuran tombol.
Fitur apa saja yang harus digunakan untuk menciptakan efek animasi yang canggih ini?
Mengatur interaksi 'On Click' pada kartu produk.
Mengatur transisi dengan animasi 'Push'.
Memastikan nama layer dari gambar produk di kedua frame adalah sama.
Menggunakan animasi 'Smart Animate' sebagai tipe transisi.
Mengatur interaksi 'After Delay' pada halaman detail.
Untuk memvalidasi ide produk baru, tim desainer dianjurkan untuk membuat low-fidelity prototype yang cepat. Pernyataan manakah yang paling akurat terkait penggunaan Figma dalam proses ini?
(1) Menggunakan 'Prototyping' dengan transisi dasar seperti 'Instant' sudah cukup.
(2) 'Comments' di Figma sangat berguna untuk mencatat feedback langsung.
(3) Menggunakan 'Smart Animate' adalah langkah tidak efisien karena fokusnya bukan pada animasi yang mulus.
Elemen apa yang paling menunjukkan pemahaman kuat tentang budaya mutu dan alur kerja profesional?
(1) Penggunaan 'Components' dan 'Color/Text Styles' yang teratur.
(2) Setiap layer dan frame memiliki nama yang jelas.
(3) Penggunaan banyak frame terpisah untuk setiap state tombol daripada menggunakan 'Variants'.
Praktik terbaik apa yang dapat mereka lakukan menggunakan Figma untuk memenuhi kebutuhan ini?
(1) Menggunakan plugin seperti 'Stark' untuk memeriksa kontras warna.
(2) Mengatur ukuran font minimal 16px untuk badan teks.
(3) Menggunakan 'Fill' lokal dan bukan 'Color Styles' agar warna mudah disesuaikan.
Untuk menjaga alur kerja yang efisien dan menghindari miskomunikasi, praktik apa yang harus mereka terapkan?
(1) Menggunakan 'Version History' untuk melacak setiap perubahan.
(2) Developer dapat menggunakan mode 'Inspect' untuk melihat spesifikasi teknis.
(3) Desainer harus 'Export' setiap aset dan mengirimkannya ke developer melalui email.
