Panduan Figma

🎨 Panduan Lengkap Figma untuk Pemula

Dari Nol Sampai Jago - Step by Step dengan Bahasa Sederhana

📚 Bab 1: Pengenalan Figma

Apa itu Figma?

Bayangkan Figma seperti kertas digital super canggih untuk menggambar website dan aplikasi. Bedanya dengan kertas biasa:

• ✅ Bisa dipakai bareng-bareng dengan teman (seperti Google Docs)
• ✅ Tidak perlu install software berat (buka di browser langsung jalan)
• ✅ Otomatis tersimpan (tidak akan hilang)
• ✅ Bisa bikin desain yang bergerak (animasi sederhana)

💡 Analogi Mudah: Figma itu seperti Microsoft Paint + PowerPoint + Google Docs digabung jadi satu, tapi khusus untuk desain UI/UX!

Kenapa Pakai Figma?

🆓

Gratis

Versi gratisnya sudah sangat lengkap untuk belajar dan bikin portfolio

🌐

Online

Buka di browser, bisa akses dari mana aja, laptop apa aja

👥

Kolaborasi

Bisa kerja bareng tim secara real-time

📱

Multi Platform

Desain untuk website, mobile app, tablet dalam satu tempat

Siapa yang Pakai Figma?

• UI/UX Designer: Desain tampilan aplikasi dan website
• Product Designer: Desain produk digital dari awal sampai akhir
• Graphic Designer: Bikin poster, banner, social media
• Developer: Lihat desain yang harus dibuat jadi kode
• Product Manager: Review dan approve desain

🎯 Yang Bisa Dibuat di Figma:

• ✅ Desain Website (Landing Page, Dashboard, E-commerce)
• ✅ Desain Mobile App (iOS & Android)
• ✅ Wireframe (Sketsa kasar desain)
• ✅ Mockup (Desain detail dengan warna dan gambar)
• ✅ Prototype (Desain yang bisa diklik-klik)
• ✅ Social Media Post (Instagram, Facebook, dll)
• ✅ Presentasi
• ✅ Logo dan Icon

🚀 Bab 2: Memulai dengan Figma

Langkah 1: Daftar Akun Figma (GRATIS!)

📝 Cara Daftar:

1. Buka browser (Chrome, Firefox, Safari, dll)
2. Ketik di address bar: www.figma.com
3. Klik tombol "Sign Up" (pojok kanan atas)
4. Masukkan email kamu
5. Cek email untuk verifikasi
6. Bikin password yang kuat
7. Selesai! Kamu sudah punya akun Figma 🎉

💡 Tips: Pakai email yang sering kamu cek, karena nanti ada notifikasi kalau ada yang comment di desain kamu!

Langkah 2: Kenalan dengan Tampilan Figma

🖥️ Tampilan Utama Figma (Home Screen)

🔍 Search

📁 Recent Files

➕ New Design File

👥 Team Projects

📚 Drafts

Penjelasan Sederhana:
• Recent Files: File-file yang baru kamu buka (seperti history)
• Drafts: Tempat desain pribadi kamu
• Teams: Tempat kerja bareng tim
• New Design File: Tombol untuk mulai desain baru

Langkah 3: Membuat File Desain Pertama

🎨 Cara Bikin File Baru:

1. Klik tombol "+ New Design File"
2. Tunggu sebentar, akan muncul kanvas putih kosong
3. Selamat! Kamu sudah masuk ke editor Figma 🎊

Mengenal Area Kerja (Interface Figma)

Peta Interface Figma

1. TOP TOOLBAR (Atas) ⬆️

• Nama file (klik untuk ganti nama)
• Menu utama (File, Edit, View, dll)
• Tombol Share (untuk berbagi ke teman)
• Tombol Play (untuk lihat prototype)

2. LEFT SIDEBAR (Kiri) ⬅️

• Layers: Daftar semua objek di desain kamu
• Assets: Komponen yang bisa dipakai ulang
• Pages: Halaman-halaman di file kamu

3. TOOLBAR (Kiri Atas) 🛠️

• Tools untuk menggambar (kotak, lingkaran, text, dll)
• Kita akan bahas detail nanti!

4. CANVAS (Tengah) 🎨

• Area putih besar di tengah = tempat kamu desain
• Seperti kertas kosong untuk menggambar

5. RIGHT SIDEBAR (Kanan) ➡️

• Design Panel: Atur warna, ukuran, posisi objek
• Prototype Panel: Bikin interaksi klik-klik
• Inspect Panel: Untuk developer (kode CSS)

💡 Tips Navigasi:

• Zoom In/Out: Ctrl + Scroll atau Cmd + Scroll (Mac)
• Geser Canvas: Tekan Spasi + Drag mouse
• Fit to Screen: Shift + 1

🛠️ Bab 3: Tools & Fitur Penting di Figma

Ini adalah senjata-senjata utama kamu di Figma. Setiap tool punya fungsi khusus!

🔧 Tools Dasar (Yang Paling Sering Dipakai)

↖️

Move Tool (V)

Shortcut: V

Untuk memilih dan menggeser objek. Seperti cursor biasa di komputer.

Kapan pakai: Saat mau klik, pilih, atau geser sesuatu

🖼️

Frame Tool (F)

Shortcut: F

Bikin "wadah" untuk desain (layar HP, website, dll)

Kapan pakai: Pertama kali mulai desain, pilih ukuran layar

⬜

Rectangle Tool (R)

Shortcut: R

Bikin kotak/persegi panjang

Kapan pakai: Bikin tombol, card, box, background

⭕

Ellipse Tool (O)

Shortcut: O

Bikin lingkaran/oval

Kapan pakai: Bikin icon, avatar, badge

📝

Text Tool (T)

Shortcut: T

Menulis text/tulisan

Kapan pakai: Nulis judul, paragraf, label tombol

✏️

Pen Tool (P)

Shortcut: P

Gambar bentuk custom (icon, ilustrasi)

Kapan pakai: Bikin shape unik, icon custom

📐 Cara Pakai Tools - Tutorial Praktis

1️⃣ Cara Bikin Frame (Layar HP)

1. Tekan tombol F di keyboard
2. Lihat sidebar kanan, pilih "Phone"
3. Pilih "iPhone 14 Pro" (atau Android yang kamu suka)
4. Klik di canvas, frame akan muncul!

Hasilnya: Kamu punya layar HP kosong siap didesain!

2️⃣ Cara Bikin Rectangle (Kotak)

1. Tekan tombol R di keyboard
2. Klik dan drag di canvas (seperti menggambar kotak)
3. Lepas mouse saat ukuran sudah pas
4. Kotak sudah jadi!

Tips: Tekan Shift sambil drag untuk bikin kotak sempurna (persegi)

3️⃣ Cara Nulis Text

1. Tekan tombol T di keyboard
2. Klik di mana kamu mau nulis
3. Langsung ketik aja!
4. Klik di luar untuk selesai

🎨 Fitur Styling (Mempercantik Desain)

Panel Design di Kanan (Untuk Atur Objek)

🎨 Fill (Warna Isi)

• Klik kotak warna di panel kanan
• Pilih warna yang kamu suka
• Objek langsung berubah warna!

🖌️ Stroke (Garis Pinggir)

• Klik tanda "+" di bagian Stroke
• Pilih warna garis
• Atur ketebalan (thickness)

🔲 Corner Radius (Sudut Melengkung)

• Bikin sudut kotak jadi bulat
• Angka kecil = sedikit bulat
• Angka besar = sangat bulat
• Contoh: tombol biasanya 8-16px

💫 Effects (Efek Tambahan)

• Drop Shadow: Bayangan (bikin 3D)
• Blur: Bikin kabur
• Inner Shadow: Bayangan dalam

💡 Shortcut Super Penting:

• Ctrl + D / Cmd + D = Duplicate (copy cepat)
• Ctrl + G / Cmd + G = Group (kelompokkan objek)
• Alt + Drag = Copy sambil geser
• Shift + Drag = Geser lurus (horizontal/vertical)

📏 Layout & Alignment (Atur Posisi Rapi)

Cara Atur Objek Supaya Rapi:

1. Pilih beberapa objek (Klik sambil tekan Shift)
2. Lihat panel kanan, bagian "Alignment"
3. Klik icon alignment yang kamu mau:
   • Align Left = Rata kiri
   • Align Center = Rata tengah
   • Align Right = Rata kanan
   • Distribute Horizontal = Jarak sama rata

🎨 Bab 4: Membuat Desain Pertama (Project Praktis)

Sekarang kita akan praktek bikin desain beneran! Kita akan bikin Login Screen untuk aplikasi mobile.

💡 Kenapa Login Screen? Karena ini desain paling dasar dan sering dipakai. Kalau udah bisa ini, kamu bisa bikin desain apapun!

📱 Project: Bikin Login Screen App

Langkah 1: Persiapan Frame

1. Buka file Figma baru
2. Tekan F untuk Frame tool
3. Pilih "iPhone 14 Pro" (393 x 852)
4. Rename frame jadi "Login Screen" (double klik nama di layer)

Langkah 2: Bikin Background

1. Klik frame yang baru dibuat
2. Di panel kanan, bagian Fill, klik kotak warna
3. Pilih warna background (contoh: #F5F5F5 atau abu-abu muda)
4. Background sudah jadi! 🎨

Langkah 3: Bikin Logo/Icon (Atas)

1. Tekan O untuk Ellipse
2. Sambil tekan Shift, drag untuk bikin lingkaran sempurna
3. Ukuran: 80 x 80 px (lihat di panel kanan)
4. Warna: #667EEA (ungu)
5. Posisi: Tengah atas (pakai alignment center)

Tips: Ini placeholder logo. Nanti bisa diganti dengan logo asli!

Langkah 4: Bikin Judul "Welcome Back"

1. Tekan T untuk Text tool
2. Klik di bawah logo
3. Ketik: "Welcome Back"
4. Pilih font: Inter atau Roboto
5. Ukuran font: 32
6. Weight: Bold
7. Warna: #1A1A1A (hitam pekat)
8. Align center

Langkah 5: Bikin Subtitle

1. Tekan T lagi
2. Ketik: "Sign in to continue"
3. Font: Inter
4. Ukuran: 16
5. Weight: Regular
6. Warna: #666666 (abu-abu)
7. Posisi: Di bawah judul, align center

Langkah 6: Bikin Input Email

1. Tekan R untuk Rectangle
2. Bikin kotak ukuran: 343 x 56 px
3. Warna fill: Putih (#FFFFFF)
4. Corner radius: 12
5. Stroke: 1px, warna #E0E0E0
6. Tekan T, ketik "Email" di dalam kotak
7. Warna text: #999999
8. Posisi text: Kiri, padding 16px dari pinggir

Langkah 7: Bikin Input Password

1. Pilih kotak Email yang tadi
2. Tekan Ctrl + D untuk duplicate
3. Geser ke bawah (jarak 16px)
4. Ganti text jadi "Password"

Pro tip: Pakai duplicate supaya ukuran & style konsisten!

Langkah 8: Bikin Tombol Login

1. Tekan R untuk Rectangle
2. Ukuran: 343 x 56 px (sama dengan input field)
3. Warna fill: #667EEA (ungu)
4. Corner radius: 12
5. Tekan T, ketik "Login"
6. Warna text: Putih (#FFFFFF)
7. Font weight: Bold
8. Align center (text di tengah tombol)
9. Posisi tombol: 24px di bawah input password

Langkah 9: Bikin Text "Forgot Password?"

1. Tekan T
2. Ketik: "Forgot Password?"
3. Ukuran: 14
4. Warna: #667EEA
5. Posisi: Di bawah tombol, align center

Langkah 10: Rapikan dengan Auto Layout

1. Pilih semua elemen (Logo, Text, Input, Button)
2. Tekan Shift + A
3. Atur spacing: 16-24px antar elemen
4. Padding: 24px dari kiri-kanan

Wow! Sekarang layout otomatis rapi dan responsive! 🎉

💡 Tips Profesional:

• Konsistensi Spacing: Pakai kelipatan 8 (8, 16, 24, 32, 40...)
• Warna: Jangan pakai lebih dari 3-4 warna utama
• Font Size: Judul besar (28-40), Body (14-16), Caption (12-14)
• Contrast: Text harus jelas dibaca (cek dengan plugin Contrast)

✅ Checklist Desain Login Screen yang Baik:

• ☑️ Logo/Branding jelas terlihat
• ☑️ Judul mengkomunikasikan tujuan
• ☑️ Input field mudah dikenali
• ☑️ Tombol CTA (Call to Action) menonjol
• ☑️ Link "Forgot Password" terlihat
• ☑️ Spacing konsisten
• ☑️ Warna kontras dan mudah dibaca

🧩 Bab 5: Komponen & Styles (Bikin Efisien!)

Bayangkan kamu punya tombol yang sama di 50 halaman. Terus kamu mau ganti warnanya. Ribet dong kalau harus edit satu-satu? Di sinilah Komponen & Styles jadi penyelamat!

🔹 Apa itu Component?

Component = Template yang bisa dipakai ulang

• Bikin 1 tombol → Jadikan component → Pakai berkali-kali
• Edit component sekali → Semua copyannya ikut berubah!
• Seperti "master copy" yang punya anak-anak

Contoh Nyata:

Component Master: Tombol Login warna biru

Instance (Copyan): 10 tombol di berbagai halaman

Kamu edit master jadi hijau → 10 tombol langsung jadi hijau! ✨

📌 Cara Bikin Component dari Tombol Login

1. Pilih tombol yang sudah kamu buat di Login Screen
2. Klik kanan → Pilih "Create Component"
3. ATAU tekan shortcut: Ctrl + Alt + K / Cmd + Option + K
4. Lihat! Ada icon berlian ungu 💎 di nama layer
5. Rename jadi "Button/Primary" (biar rapi)

Selamat! Kamu baru bikin component pertama! 🎊

🔄 Cara Pakai Component (Instance)

1. Buka panel Assets di sidebar kiri
2. Cari component "Button/Primary"
3. Drag ke canvas
4. Boom! Tombol baru muncul
5. Ganti textnya (text bisa beda, tapi style tetap sama)

💡 Kapan Pakai Component?

• ✅ Tombol (Button)
• ✅ Input Field
• ✅ Card
• ✅ Icon
• ✅ Navigation Bar
• ✅ Apapun yang muncul lebih dari 2x!

🎨 Component Variants (Level Advanced)

Apa itu Variants?

Variants = Component dengan berbagai versi dalam 1 tempat

Contoh: Button Component punya variants:

• State: Default, Hover, Pressed, Disabled
• Size: Small, Medium, Large
• Type: Primary, Secondary, Outline

Jadi dari 1 component, kamu bisa punya 36 kombinasi (4 x 3 x 3)!

🎯 Cara Bikin Component Variants

1. Bikin beberapa versi button (Primary, Secondary, dll)
2. Pilih semua button tersebut
3. Klik kanan → "Combine as Variants"
4. Atur properties di panel kanan:
   • Property 1: Type (Primary, Secondary)
   • Property 2: State (Default, Hover)
5. Selesai! Sekarang bisa ganti variant dari dropdown

🌈 Color Styles (Warna Konsisten)

Biar warna di seluruh desain konsisten, kita bikin Color Styles (seperti palet warna).

🎨 Cara Bikin Color Style

1. Pilih objek dengan warna yang mau dijadikan style
2. Di panel kanan, bagian Fill, klik icon 4 titik
3. Klik tanda "+"
4. Kasih nama: "Primary/Main" atau "Text/Dark"
5. Klik Create

Sekarang: Warna ini bisa dipakai di mana aja, dan kalau diganti semua ikut berubah!

📚 Contoh Naming Color Styles yang Baik:

• Primary/Main: #667EEA (warna utama brand)
• Primary/Light: #E8EBFA (versi terang)
• Primary/Dark: #4A5FCC (versi gelap)
• Text/Dark: #1A1A1A (text utama)
• Text/Light: #666666 (text secondary)
• Background/White: #FFFFFF
• Background/Gray: #F5F5F5

📝 Text Styles (Font Konsisten)

✍️ Cara Bikin Text Style

1. Pilih text dengan styling yang mau disave
2. Di panel kanan, bagian Text, klik icon 4 titik
3. Klik tanda "+"
4. Kasih nama: "Heading/H1" atau "Body/Regular"
5. Klik Create

📚 Contoh Text Styles yang Umum:

• Heading/H1: Inter Bold 32px
• Heading/H2: Inter Bold 24px
• Heading/H3: Inter Bold 20px
• Body/Large: Inter Regular 16px
• Body/Regular: Inter Regular 14px
• Caption/Small: Inter Regular 12px
• Button/Text: Inter Bold 16px

⚠️ Hati-hati! Jangan bikin terlalu banyak styles! Bikin seperlunya aja (5-10 text styles cukup). Terlalu banyak malah bikin bingung!

🗂️ Organize dengan Pages

📄 Cara Bikin & Atur Pages

1. Lihat sidebar kiri, klik tanda "+" di samping nama page
2. Kasih nama yang jelas:
   • "✨ Components" → untuk simpan semua component
   • "📱 Screens" → untuk desain halaman
   • "🎨 Styles" → untuk color & text samples
3. Drag-drop component ke page Components

Kenapa penting? Biar file rapi dan mudah dicari!

🎬 Bab 6: Prototyping (Bikin Desain Jadi Hidup!)

Sekarang bagian paling seru! Kita akan bikin desain yang bisa diklik-klik seperti aplikasi beneran!

🎯 Apa itu Prototype?

Prototype = Desain yang bisa berinteraksi

• Tombol bisa diklik → pindah ke halaman lain
• Bisa geser (swipe) → seperti carousel
• Ada animasi → smooth dan profesional
• Seperti demo aplikasi tanpa coding!

Kenapa penting?

• ✅ Present ke client/boss terlihat lebih profesional
• ✅ Test user experience sebelum coding
• ✅ Developer lebih paham interaksinya
• ✅ Dapat feedback lebih akurat

📱 Project: Bikin Prototype Login Flow

Kita akan bikin flow: Login Screen → Home Screen

Langkah 1: Siapkan 2 Screen

1. Duplicate Login Screen yang sudah dibuat (Ctrl+D)
2. Rename jadi "Home Screen"
3. Edit isinya jadi tampilan home sederhana:
   • Header dengan text "Welcome, User!"
   • Beberapa card dummy
4. Atur posisi: Login di kiri, Home di kanan (berdampingan)

Langkah 2: Masuk Mode Prototype

1. Klik tab "Prototype" di panel kanan atas
2. Sekarang kamu di mode Prototype! 🎬

Langkah 3: Bikin Interaksi Klik Tombol

1. Pilih tombol "Login" di Login Screen
2. Lihat! Ada bulatan kecil muncul di kanan tombol
3. Klik dan drag bulatan itu ke Home Screen
4. Panel interaction muncul, atur:
   • Trigger: On Click (saat diklik)
   • Action: Navigate to (pindah ke)
   • Destination: Home Screen
   • Animation: Move In (gerak masuk)
   • Direction: Left (dari kanan)
   • Easing: Ease Out
   • Duration: 300ms
5. Selesai! Koneksi sudah dibuat (ada garis panah)

💡 Jenis-jenis Trigger (Pemicu Interaksi):

• On Click: Saat diklik (paling umum)
• On Drag: Saat di-drag (untuk swipe)
• While Hovering: Saat mouse di atas (desktop)
• After Delay: Setelah beberapa detik (auto)

🎨 Jenis-jenis Animasi

Instant

Langsung muncul tanpa animasi (paling cepat)

Dissolve

Fade in/out (muncul/hilang perlahan)

Move In

Slide dari samping (kanan/kiri/atas/bawah)

Push

Dorong layar lama keluar

Slide In

Slide overlay (muncul di atas)

Smart Animate

Animasi pintar (smooth transition)

Langkah 4: Test Prototype!

1. Klik tombol "Play" (▶️) di pojok kanan atas
2. ATAU tekan shortcut: Shift + Space
3. Preview prototype terbuka di tab baru
4. Coba klik tombol Login!
5. Wow! Pindah ke Home Screen dengan animasi! 🎉

✨ Smart Animate (Animasi Super Smooth)

Apa itu Smart Animate?

Smart Animate = Figma otomatis bikin animasi antara 2 state yang mirip

Contoh Use Case:

• Expand/collapse card
• Menu yang muncul/hilang
• Button hover effect
• Progress bar yang bergerak

🎯 Cara Pakai Smart Animate

1. Bikin 2 frame dengan nama layer yang sama persis
2. Frame 1: Card kecil (collapsed)
3. Frame 2: Card besar (expanded)
4. Connect dengan interaction
5. Pilih animation: "Smart Animate"
6. Duration: 300-400ms
7. Test! Card akan expand smooth! ✨

Kunci sukses: Nama layer harus IDENTIK! Kalau beda, animasi tidak jalan.

🔄 Interaction Details (Pengaturan Lanjutan)

⚙️ Settings Penting di Prototype Panel:

• Overflow Behavior:
  • No Scrolling = tidak bisa scroll
  • Vertical/Horizontal = bisa scroll
• Fixed Position: Bikin element tetap (navbar/header)
• Device: Preview di device tertentu (iPhone, Android)
• Starting Frame: Frame pertama saat buka prototype

📲 Fitur-fitur Prototype Advanced

1. Scroll Interaction (Bisa Scroll)

1. Pilih frame
2. Di Prototype panel, atur "Overflow behavior" jadi "Vertical scrolling"
3. Bikin konten lebih panjang dari frame
4. Sekarang bisa di-scroll! 📜

2. Fixed Elements (Header/Navbar Tetap)

1. Pilih header/navbar
2. Di Prototype panel, centang "Fix position when scrolling"
3. Sekarang navbar tetap di atas saat scroll! 📌

3. Overlay (Pop-up/Modal)

1. Bikin frame untuk modal/popup
2. Connect dari tombol ke modal
3. Action: "Open Overlay"
4. Atur position: Center, Manual, dll
5. Close when click outside: ON (biar bisa tutup)
6. Background: Darken (biar ada efek gelap di belakang)

💡 Pro Tips Prototyping:

• Jangan terlalu banyak animasi (bikin lambat)
• Duration ideal: 200-400ms (tidak terlalu cepat/lambat)
• Gunakan Ease Out untuk smooth finish
• Test di device asli (pakai Figma Mirror app)
• Bikin "Back" button di setiap screen!

🚀 Bab 7: Publish & Share (Bagikan Karya Kamu!)

Desain sudah selesai? Saatnya berbagi ke dunia! Ada banyak cara untuk share dan present desain di Figma.

📤 Cara Share Desain ke Orang Lain

Method 1: Share Link (Paling Mudah)

1. Klik tombol "Share" di pojok kanan atas
2. Pilih "Copy link"
3. Atur permission:
   • Can view: Hanya bisa lihat (untuk client/boss)
   • Can edit: Bisa edit (untuk tim)
4. Paste link ke email/chat
5. Orang bisa langsung buka tanpa login Figma!

💡 Tips Keamanan: Jangan share link "Can edit" ke sembarang orang! Mereka bisa ubah/hapus desain kamu. Untuk client, selalu pakai "Can view".

Method 2: Invite Collaborator (Tim)

1. Klik tombol "Share"
2. Ketik email orang yang mau diinvite
3. Pilih role:
   • Viewer: Lihat & comment
   • Editor: Edit desain
4. Klik "Invite"
5. Mereka dapat email notifikasi

🎨 Present Mode (Demo ke Client/Tim)

Cara Pakai Present Mode

1. Buka prototype yang mau dipresentasikan
2. Klik tombol "Present" (▶️) atau tekan Shift + Space
3. Pilih starting frame (frame pertama)
4. Klik "Present"
5. Prototype terbuka fullscreen!
6. Kamu bisa klik-klik seperti app asli

🎯 Fitur Present Mode:

• Fullscreen: Tampilan penuh tanpa distraksi
• Hotspot hints: Tekan H untuk lihat tombol yang bisa diklik
• Restart: Tekan R untuk mulai dari awal
• Comments: Tekan C untuk kasih comment
• Inspect: Developer bisa lihat code (CSS, iOS, Android)

💬 Commenting (Feedback dari Tim)

Cara Kasih & Terima Comment

1. Kasih Comment:
   • Tekan C di keyboard
   • Klik di tempat yang mau dikomen
   • Tulis comment
   • Tekan Enter/Post
2. Reply Comment:
   • Klik comment yang ada
   • Ketik reply
   • Bisa tag orang dengan @nama
3. Resolve Comment:
   • Kalau sudah selesai, klik "Resolve"
   • Comment hilang dari canvas (tapi tetap tersimpan)

📥 Export Desain (Download File)

Cara Export PNG/JPG/SVG/PDF

1. Pilih frame atau objek yang mau di-export
2. Di panel kanan bawah, bagian "Export"
3. Klik "+" untuk tambah export setting
4. Pilih format:
   • PNG: Untuk gambar umum (dengan transparency)
   • JPG: Untuk foto (file lebih kecil)
   • SVG: Untuk icon/logo (bisa diperbesar tanpa blur)
   • PDF: Untuk presentasi/print
5. Atur scale (1x, 2x, 3x untuk retina display)
6. Klik "Export [nama]"
7. File otomatis download! 💾

📊 Kapan Pakai Format Apa?

• PNG (2x): Social media post, mockup presentation
• JPG: Image besar untuk website (lebih kecil dari PNG)
• SVG: Icon, logo (bisa di-scale developer)
• PDF: Full presentation deck, print material

👨‍💻 Handoff ke Developer

Mode Developer (Inspect)

1. Share link "Can view" ke developer
2. Developer buka link
3. Mereka klik tab "Inspect" di kanan
4. Informasi muncul otomatis:
   • CSS code (untuk web)
   • iOS/Android code
   • Ukuran, spacing, warna (exact value)
5. Developer tinggal copy-paste! ✨

💡 Tips Developer Handoff:

• Gunakan naming layer yang jelas (button-primary, card-header)
• Group elemen yang berkaitan
• Bikin semua jadi component (biar konsisten)
• Export asset yang dibutuhkan (icon, image) ke folder khusus
• Kasih notes kalau ada behavior khusus

🌐 Publish ke Web (FigJam/Portfolio)

Embed Prototype di Website

1. Buka prototype mode
2. Klik "Share" → "Get embed code"
3. Copy kode HTML
4. Paste ke website/portfolio kamu
5. Prototype bisa diklik langsung di website! 🎉

✅ Checklist Sebelum Submit/Share

🔍 Quality Check:

• ☑️ Semua text tidak ada typo
• ☑️ Warna konsisten (pakai color styles)
• ☑️ Font konsisten (pakai text styles)
• ☑️ Spacing konsisten (kelipatan 8)
• ☑️ Layer diberi nama yang jelas
• ☑️ Tidak ada layer tersembunyi yang berantakan
• ☑️ Prototype sudah di-test (semua link jalan)
• ☑️ Image sudah optimized (tidak terlalu besar)
• ☑️ Component sudah dibuat untuk elemen yang repeat
• ☑️ File diberi nama yang profesional

🎓 Langkah Selanjutnya

Selamat! 🎉 Kamu Sudah Menguasai Figma Dasar!

Yang Sudah Kamu Pelajari:

• ✅ Pengenalan dan setup Figma
• ✅ Tools dan fitur utama
• ✅ Membuat desain dari nol
• ✅ Component & styles system
• ✅ Prototyping dan interaksi
• ✅ Share dan handoff ke developer

💪 Challenge untuk Kamu:

1. Bikin desain app sederhana (To-do List, Weather App, dll)
2. Tambahkan prototype dengan min. 3 screen
3. Gunakan component dan styles
4. Share ke teman untuk feedback

📚 Resource Lanjutan:

• Figma YouTube: Tutorial official dari Figma
• Figma Community: Download template gratis
• dribbble.com: Inspirasi desain
• behance.net: Portfolio designer profesional

🚀 Keep Practicing! Desain itu skill yang diasah dengan latihan terus-menerus. Jangan takut coba hal baru!

🎯 Quote untuk Kamu:
"Good design is obvious. Great design is transparent." - Joe Sparano

Selamat berkarya! 🎨✨