Kamu pernah nggak sih, lagi asik desain tampilan web di Figma, terus stuck berjam-jam cuma gara-gara nyari icon yang pas? Atau bingung mikirin kombinasi warna yang nggak norak?
Figma itu ibarat kanvas kosong. Kalau kamu ngerjain semuanya manual (bikin icon sendiri, cari gambar di Google terus di-download, ketik teks dummy satu-satu), dijamin tugas kuliah nggak bakal kelar.
Buat kita yang pengen kerja cerdas (bukan kerja keras doang), Figma punya "senjata rahasia" bernama Plugin.
Ini dia daftar starter pack tools dan plugin Figma yang wajib kamu install biar desain web kamu jadi sat-set dan hasilnya sekelas profesional!
1. Auto Layout (Fitur Bawaan, Bukan Plugin)
Sebelum install macem-macem, pastikan kamu bersahabat dulu sama fitur ini.
-
Fungsinya: Bikin elemen desain kamu (tombol, kartu, navigasi) jadi responsif otomatis. Kalau teksnya dipanjangin, tombolnya ikut melebar.
-
Kenapa Wajib: Ini adalah CSS Flexbox versi visual. Kalau kamu jago Auto Layout, nanti pas ngoding (convert ke HTML/CSS) bakal gampang banget karena logikanya sama persis.
2. Unsplash / Pexels
Hari gini masih buka tab browser buat nyari gambar, terus download, terus drag ke Figma? Duh, habis waktu!
-
Fungsinya: Cari stok foto berkualitas tinggi (HD) langsung dari dalam Figma. Tinggal klik, gambar langsung masuk ke desainmu.
-
Cocok buat: Bikin hero section atau card artikel.
3. Iconify
Stop buang waktu bikin ikon panah atau ikon "keranjang belanja" manual pakai Pen Tool.
-
Fungsinya: Perpustakaan jutaan ikon gratis (Material Design, FontAwesome, dll) yang bisa langsung di-drag & drop.
-
Nilai Plus: Ikonnya berbentuk SVG (vektor), jadi pas di-export buat coding, gambarnya nggak pecah.
4. Lorem Ipsum
Masih ngetik "ini adalah contoh teks" manual berulang-ulang?
-
Fungsinya: Generate teks dummy (teks bohong-bohongan) otomatis sebanyak apapun yang kamu mau.
-
Kenapa Wajib: Biar desain kamu kelihatan penuh dan realistis di mata dosen atau klien, tanpa harus mikirin copywriting dulu.
5. Blobs & Get Waves
Desain web jaman sekarang itu identik dengan bentuk-bentuk organik yang fluid (cair), bukan cuma kotak kaku.
-
Fungsinya: Bikin bentuk abstrak (blobs) atau gelombang (waves) estetik cuma sekali klik.
-
Cocok buat: Hiasan background biar website nggak kelihatan sepi.
6. HTML to Design
Ini plugin "cheat code" paling gila.
-
Fungsinya: Kamu bisa masukin link website apapun (misal: Tokopedia atau Apple), terus plugin ini bakal mengubah website asli itu jadi desain Figma yang bisa diedit!
-
Kenapa Wajib: Bagus banget buat belajar struktur desain orang lain (ATM: Amati Tiru Modifikasi). Tapi ingat, jangan dijiplak mentah-mentah ya!
7. Stark (Accessibility Checker)
Desain bagus itu percuma kalau teksnya nggak kebaca.
-
Fungsinya: Ngecek apakah kontras warna teks dan background kamu sudah cukup jelas atau belum.
-
Kenapa Wajib: Menunjukkan kalau kamu desainer yang peduli sama User Experience (UX), bukan cuma peduli estetika.
Kesimpulan
Tools di atas itu gratis dan ringan. Coba deh luangkan waktu 10 menit buat install semuanya. Percaya deh, desain yang biasanya kamu kerjain 3 jam, bisa kelar dalam 1 jam doang.
Sisa waktunya buat apa? Ya buat tidur atau mabar lah, masa kerja terus! 😴
