Figma untuk Non-Desainer: 7 Cara Dasar Pakai Figma Biar Bisa Desain Sendiri tanpa Butuh Desainer

Kamu pernah gak butuh bikin desain cepet — slide presentasi, wireframe aplikasi, atau cuma edit foto buat sosial media — tapi nggak mau repot minta tolong desainer atau belajar tools rumit kayak Photoshop? Lo cuma butuh tool yang gampang dipake, gratis, dan jalan di browser. Figma jawabannya.

Banyak orang kira Figma cuma buat desainer profesional. Faktanya: Figma dirancang buat kolaborasi tim, jadi siapapun bisa pakai — PM, developer, marketer, founder, atau kamu yang cuma mau bikin desain sendiri. Artikel ini kasih 7 cara dasar pakai Figma buat non-desainer biar Lo bisa mandiri bikin UI, presentasi, wireframe, dan prototype tanpa ngantri ke tim desain.

1. Figma Itu Apa — dan Kenapa Kamu Harus Punya Akun

Figma adalah design tool berbasis browser. Nggak perlu install, nggak butuh spek laptop tinggi, gratis untuk individu (Starter plan), dan auto-save ke cloud. Kamu buka figma.com, daftar pakai email, langsung bisa kerja.

Bedanya dengan tools desain lain: Figma multiplayer real-time. Tim bisa edit file yang sama bareng, lihat kursor orang lain, komentar langsung di desain. Buat remote worker, ini game changer — nggak ada file versi bermasalah, nggak ada "kirim file lewat email".

2. Pahami Interface: Canvas, Layers, Properties — Tiga Pilar Utama

Buka file baru (Cmd/Ctrl + N). Kamu bakal lihat tiga area utama:

• Canvas (tengah): area kerja — di sini kamu gambar, taruh frame, atur layout.
• Layers panel (kiri): daftar semua object — frame, group, shape, text. Drag untuk urutin z-index.
• Properties panel (kanan): setting object yang dipilih — position, size, fill, stroke, effects, text style, auto layout.

Shortcut wajib hafalin: V (Select), F (Frame), R (Rectangle), T (Text), P (Pen), Shift+2 (Zoom ke 100%).

3. Frame vs Group — Fondasi Layout yang Bener

Banyak non-desainer bingung: kapan pake Frame, kapan Group? Simple:

• Frame (F): container yang punya size sendiri, bisa di-auto-layout, bisa jadi artboard (desktop, mobile, presentation slide). Frame = layout parent.
• Group (Cmd/Ctrl + G): cuma ngepper object biar bisa dipindah bareng. Group nggak punya size sendiri, nggak support auto layout.

Rule of thumb: semua container layout = Frame. Group cuma buat organisir layer yang related tapi nggak butuh layout (contoh: icon + label di dalam button).

4. Auto Layout — Rahasia Desain Responsif Tanpa Coding

Ini fitur paling powerful Figma buat non-desainer. Auto Layout bikin object di dalam Frame atur sendiri posisinya berdasarkan rules: direction (horizontal/vertical), spacing, padding, alignment.

Cara pakai: pilih Frame → kanan panel klik Auto layout (ikon kotak berantai). Atur:

• Direction: Vertical (kolom) atau Horizontal (baris)
• Spacing between items: jarak antar child (misal 16px)
• Padding: ruang di dalam frame (misal 24px)
• Alignment: center, start, end, space between

Hasilnya: kamu tambah/hapus item di dalam frame, sisanya otomatis ngerapat/nyebar. Nggak perlu manual drag tiap kali. Ini mirip flexbox CSS — tapi visual, no code.

5. Components & Variants — Bikin Satu, Pakai Berulang

Component (Cmd/Ctrl + Alt + K) = master object yang bisa di-reuse. Ubah master, semua instance ikut berubah. Variants = versi-versi component dalam satu set (misal: button primary/secondary/outline, state default/hover/disabled).

Buat non-desainer: bikin design system mini — button, input, card, badge, avatar. Simpan di page terpisah (page "Components"). Saat butuh, drag dari Assets panel (Shift+I) ke canvas.

Creative thinking buat remote worker sering dimulai dari punya "building blocks" siap pakai — component Figma itu building blocks desain lo.

6. Prototyping — Bikin Flow Interaktif Tanpa Code

Tab Prototype (kanan atas) ubah Figma jadi clickable prototype. Hubungkan frame ke frame dengan panah (drag dari node di kanan object). Set interaction: On click → Navigate to → pilih frame tujuan. Bisa tambah animation: Instant, Smart Animate, Slide, Push.

Gunaan buat non-desainer:

• Presentasi alur aplikasi ke stakeholder — klik aja, nggak perlu explain "klik sini terus ke sana"
• User testing cepet — kirim link prototype, user coba sendiri
• Handoff ke dev — dev inspect CSS, copy value, lihat flow logic

7. Export & Handoff — Dari Figma ke Real World

Selesai desain, butuh output:

• Image (PNG/JPG/SVG/PDF): pilih frame/object → Export di kanan bawah → pilih format & scale (1x, 2x, 3x).
• CSS Code: dev mode (toggle di kanan atas) → klik object → copy CSS, iOS, Android code.
• Link Share: tombol Share (kanan atas) → set permission (view/edit) → kirim link. Viewer nggak perlu akun Figma.

Personal branding buat remote worker makin kuat kalo Lo punya portofolio visual yang Lo bikin sendiri — Figma bikin itu possible tanpa butuh desainer.