Desain yang bagus di satu ukuran layar belum tentu bagus di ukuran lain. Ponsel, tablet, dan laptop punya lebar yang berbeda, dan pengguna bisa memutar layar kapan saja. Bab ini membahas dua hal: bagaimana memberi warna dan efek dengan benar, lalu bagaimana memastikan objek tetap di tempat yang tepat saat ukuran frame berubah.

Panel kanan punya tiga bagian yang mengatur tampilan visual sebuah objek.

Fill

Fill adalah isi warna objek. Jenisnya:

• Solid: satu warna, misalnya #7C5CFF.
• Gradient: linear, radial, angular, dan diamond.
• Image: gambar sebagai isi.
• Shader: jenis fill baru di 2026.

Contoh palet yang dipakai di kelas ini: #7C5CFF (ungu), #FF6B5B (merah koral), #1FCB8F (hijau), #2FA8FF (biru), #FFB020 (kuning), dan #E15AB8 (merah muda).

Stroke

Stroke adalah garis tepi. Kamu bisa mengatur posisinya inside, center, atau outside, mengatur tebal per sisi, dan membuat garis putus-putus. Posisi stroke berpengaruh pada ukuran akhir. Stroke inside tidak menambah ukuran objek, sedangkan stroke outside membuat objek tampak lebih besar. Di CSS, perilaku ini mirip perbedaan box-sizing dan outline.

Effects

Effects menambahkan kedalaman: drop shadow, inner shadow, layer blur, background blur, serta noise dan texture. Pakai secukupnya. Satu bayangan halus pada kartu biasanya lebih baik daripada tiga bayangan tebal yang bertumpuk.

Kontras teks

Warna yang cantik belum tentu terbaca. Aturan yang perlu kamu ingat: teks normal minimal punya kontras 4.5:1 terhadap latarnya, sesuai standar WCAG AA. Teks abu-abu muda di atas latar putih sering gagal memenuhi angka ini. Pengguna dengan penglihatan kurang baik, atau siapa saja yang membaca di bawah terik matahari, akan kesulitan.

Kebiasaan yang baik: setiap kali memilih warna teks, periksa kontrasnya. Di bab plugin nanti kamu akan bertemu alat seperti Stark yang membantu pemeriksaan ini.

Constraints menentukan bagaimana sebuah objek bereaksi saat frame induknya diubah ukurannya.

Contoh dari deck: sebuah tombol diberi constraint Right dan Bottom. Saat frame dilebarkan atau ditinggikan, tombol tetap menempel di pojok kanan bawah. Tanpa constraint itu (default-nya Left dan Top), tombol akan tertinggal di posisi lamanya dan terlihat melayang di tengah setelah frame melebar.

Opsi constraint horizontal adalah Left, Right, Left & Right, Center, dan Scale. Opsi vertikal serupa untuk Top dan Bottom.

Padanan di CSS

Constraints sangat mirip dengan position: absolute di CSS. Constraint Right dan Bottom sama dengan menempelkan elemen memakai right dan bottom di dalam induk yang position: relative.

.layar {
  position: relative;
}

.tombol-aksi {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

Constraint Left & Right setara dengan memberi left dan right sekaligus, sehingga lebar elemen mengikuti lebar induk.

Layout grid adalah garis bantu yang membagi frame menjadi kolom atau baris. Grid membuat posisi elemen di berbagai layar terasa teratur.

Contoh dari deck untuk desktop: 12 kolom, gutter 24, margin 80. Gutter adalah jarak antarkolom, margin adalah jarak dari tepi frame ke kolom pertama. Jumlah kolom yang umum:

Tipe grid di Figma ada tiga: Columns, Rows, dan Grid.

Padanan di CSS

Layout grid Figma bisa diterjemahkan ke CSS Grid. Gutter menjadi gap, margin menjadi padding di kiri dan kanan.

.halaman {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  padding: 0 80px;
}

@media (max-width: 600px) {
  .halaman {
    grid-template-columns: repeat(4, 1fr);
  }
}

Dengan begitu, designer dan developer berbicara dalam bahasa yang sama: "kartu ini menempati 4 dari 12 kolom" punya arti yang jelas di kedua sisi.

Misalkan kamu membuat banner promo di frame desktop:

1. Beri frame layout grid 12 kolom, gutter 24, margin 80.
2. Letakkan judul di kolom 1 sampai 6 dengan constraint Left.
3. Letakkan tombol "Lihat promo" di pojok kanan bawah dengan constraint Right dan Bottom.
4. Ubah lebar frame. Judul tetap di kiri, tombol tetap di kanan bawah.
5. Periksa kontras teks putih di atas latar #7C5CFF. Hasilnya sekitar 4.3:1, sedikit di bawah 4.5:1. Solusinya, pakai ungu yang sedikit lebih gelap untuk latar teks normal, atau besarkan teksnya.

Langkah 4 adalah cara tercepat menguji constraints. Biasakan menarik tepi frame setelah selesai menyusun, sebelum menyerahkan desain.

• Memilih warna teks hanya karena cantik, tanpa memeriksa kontras minimal 4.5:1.
• Membiarkan constraint default Left dan Top untuk elemen yang seharusnya menempel di kanan atau bawah.
• Memakai Group untuk elemen yang butuh constraints. Constraints bekerja pada anak dari Frame.
• Membuat grid berbeda-beda di setiap layar sehingga posisi elemen tidak konsisten.