Panduan Menggunakan Figma untuk Membuat Mockup Landing Page Tanpa Coding

Membuat mockup landing page yang menarik seringkali terasa rumit, apalagi kalau kamu belum mahir coding. Banyak developer pemula yang langsung loncat ke HTML/CSS padahal belum punya gambaran jelas tentang layout dan visual yang diinginkan. Akibatnya? Waktu terbuang untuk trial-error di code editor, padahal masalahnya ada di desain yang belum matang. Figma hadir sebagai solusi: tool desain berbasis web yang memungkinkan kamu membuat mockup landing page secara visual, tanpa perlu menulis satu baris kode pun. Artikel ini akan memandu kamu step-by-step menggunakan Figma untuk membuat mockup yang siap dijadikan acuan development.

Kenapa Figma Cocok untuk Developer

Figma bukan sekadar tool untuk desainer. Bagi developer, Figma punya keunggulan praktis: gratis untuk penggunaan personal, berjalan di browser (cocok untuk pengguna Termux yang akses lewat browser mobile), dan punya fitur inspect yang menampilkan CSS properties secara otomatis. Kamu bisa ekspor asset dalam berbagai format, kolaborasi real-time dengan tim, dan yang paling penting—kamu bisa iterasi desain dengan cepat tanpa harus refactor code berkali-kali.

Dari pengalaman lapangan, banyak project gagal karena developer langsung coding tanpa wireframe. Hasilnya landing page yang terlihat "jadi" tapi tidak efektif secara konversi. Dengan mockup di Figma, kamu bisa validasi layout, hierarki visual, dan user flow sebelum masuk ke tahap development.

Langkah Praktis Membuat Mockup Landing Page

1. Buat Akun dan Frame Baru
   Daftar di figma.com menggunakan email atau akun Google. Setelah masuk, klik "New Design File". Pilih Frame tool (shortcut F) dan pilih preset "Desktop" dengan ukuran 1440x1024px. Ini ukuran standar untuk landing page desktop. Kalau mau bikin versi mobile, tambahkan frame 375x812px di samping frame desktop.
2. Tentukan Grid System
   Klik frame yang sudah dibuat, lalu di panel kanan pilih Layout Grid. Tambahkan grid dengan 12 kolom, gutter 20px, dan margin 80px. Grid ini akan jadi panduan agar elemen-elemen landing page kamu align dengan rapi. Ini bukan cuma soal estetika—grid yang konsisten memudahkan proses slicing ke HTML/CSS nanti.
3. Buat Section Hero
   Gunakan Rectangle tool (R) untuk membuat background hero section. Tambahkan Text tool (T) untuk headline utama. Pilih font yang web-safe seperti Inter atau Roboto yang sudah tersedia di Figma. Ukuran headline biasanya 48-64px untuk desktop. Tambahkan subheadline dengan ukuran 18-24px, dan CTA button menggunakan Rectangle dengan border-radius 8px. Jangan lupa beri padding yang cukup pada button—minimal 16px vertikal dan 32px horizontal.
4. Tambahkan Section Features
   Buat container baru di bawah hero section. Gunakan Auto Layout (Shift+A) untuk membuat card features. Auto Layout ini game changer—elemen di dalamnya akan otomatis menyesuaikan spacing tanpa perlu adjust manual. Buat 3 card dengan icon, judul, dan deskripsi singkat. Spacing antar card 24-32px sudah cukup untuk memberikan breathing room.
5. Section Testimonial dan CTA
   Tambahkan section testimonial dengan quote text dan foto user (gunakan placeholder dari unsplash plugin kalau belum punya asset). Akhiri dengan section CTA yang mengulang value proposition utama dan tombol aksi. Konsistensi warna dan typography di semua section ini penting—buat color styles dan text styles di Figma agar mudah dikelola.
6. Gunakan Components untuk Elemen Berulang
   Button, card, dan elemen yang muncul berulang sebaiknya dijadikan component (Ctrl+Alt+K). Kalau ada perubahan desain, kamu cukup edit master component dan semua instance akan update otomatis. Ini menghemat waktu dan menjaga konsistensi.
7. Inspect Mode untuk Developer Handoff
   Setelah mockup selesai, klik elemen apapun dan lihat panel kanan. Figma akan menampilkan CSS properties seperti width, height, padding, color code, dan font properties. Kamu bisa copy langsung ke CSS file. Untuk export asset seperti icon atau image, klik elemen lalu pilih Export di panel kanan—pilih format PNG atau SVG sesuai kebutuhan.

Kesalahan yang Sering Terjadi

• Tidak menggunakan constraint — Banyak pemula yang lupa set constraint pada elemen. Akibatnya saat frame di-resize, layout berantakan. Selalu set constraint (pin to left/right/top/bottom) agar elemen responsif secara visual di Figma.
• Ukuran font terlalu kecil — Body text di bawah 16px sulit dibaca di layar. Standar web adalah 16-18px untuk body text. Jangan korbankan readability demi "muat banyak konten".
• Warna kontras rendah — Text abu-abu muda di background putih mungkin terlihat "modern" tapi gagal standar aksesibilitas. Gunakan contrast checker (banyak plugin Figma gratis untuk ini) dan pastikan ratio minimal 4.5:1 untuk body text.
• Terlalu banyak font — Gunakan maksimal 2 font family: satu untuk heading, satu untuk body. Variasi bisa dari weight (bold, regular, light) bukan dari jenis font yang berbeda-beda.
• Spacing tidak konsisten — Gunakan kelipatan 8px untuk spacing (8, 16, 24, 32, dst). Ini memudahkan development dan membuat desain terasa lebih solid.
• Mockup tidak mobile-friendly — Jangan cuma bikin versi desktop. Minimal buat mockup mobile untuk validasi bahwa layout bisa diadaptasi. Kamu tidak perlu desain semua breakpoint, tapi minimal desktop dan mobile sudah cukup sebagai acuan.

Tips Aman dan Etis

Saat menggunakan Figma, hindari menggunakan asset atau template berbayar yang dibajak. Banyak template gratis berkualitas di Figma Community yang bisa kamu gunakan sebagai starting point. Kalau menggunakan foto atau ilustrasi, pastikan dari sumber yang legal seperti Unsplash, Pexels, atau undraw.co.

Untuk pengguna Termux yang akses Figma lewat browser mobile, pastikan koneksi internet stabil karena Figma adalah aplikasi web yang cukup resource-intensive. Kalau performa lambat, coba kurangi jumlah layer atau gunakan mode "Outline" saat bekerja dengan desain kompleks.

Jangan share link Figma dengan akses edit ke publik—gunakan view-only link kalau ingin berbagi mockup dengan klien atau tim. Ini mencegah perubahan tidak sengaja yang bisa merusak desain.

Workflow Setelah Mockup Selesai

Setelah mockup landing page selesai di Figma, langkah selanjutnya adalah slicing ke HTML/CSS. Gunakan inspect mode untuk mendapatkan nilai-nilai CSS yang akurat. Mulai dari struktur HTML dulu—buat semantic markup dengan tag header, section, article sesuai konten. Baru kemudian styling dengan CSS berdasarkan properties dari Figma.

Untuk asset seperti icon dan image, export dalam format yang tepat: SVG untuk icon dan logo (scalable dan ukuran file kecil), PNG untuk foto dengan transparency, dan WebP untuk foto biasa (kompresi lebih baik dari JPEG). Figma bisa export langsung ke berbagai format sekaligus.

Kalau kamu bekerja dalam tim, manfaatkan fitur comment di Figma untuk feedback loop. Developer bisa kasih catatan langsung di elemen yang perlu klarifikasi, dan desainer bisa respond tanpa perlu bolak-balik email atau chat.

Kesimpulan

Figma adalah tool yang powerful untuk membuat mockup landing page tanpa perlu coding. Dengan workflow yang tepat—mulai dari setup grid, membuat section dengan Auto Layout, hingga menggunakan components untuk konsistensi—kamu bisa menghasilkan mockup yang tidak hanya bagus secara visual, tapi juga praktis untuk di-develop. Kesalahan umum seperti spacing tidak konsisten atau kontras warna rendah bisa dihindari dengan checklist sederhana. Yang terpenting, mockup di Figma menghemat waktu development karena kamu sudah punya blueprint yang jelas sebelum menulis code. Mulai dari mockup, validasi dengan user atau stakeholder, baru execute ke code—workflow ini jauh lebih efisien daripada langsung coding tanpa arah.