Apa itu Figma?

Figma itu alat buat desain antarmuka (UI) yang bisa dipakai langsung lewat browser. Jadi, kamu gak perlu install aplikasi seperti Adobe Illustrator atau Sketch. Bisa dipakai di Mac, Windows, Linux, bahkan Chromebook. Gratis juga!

Tujuan Belajar Hari Ini

Hari pertama ini kamu akan belajar:

• Navigasi Figma (tampilannya kayak apa)

• Coba fitur-fitur dasarnya

• Gunakan shortcut keyboard

• Bikin Frame, Rectangle, dan Text

• Gunakan fungsi Arrange dan Align Waktu yang dibutuhkan: sekitar 30 menit.

Langkah-Langkah Belajar

1. Buat akun Figma

Langsung ke figma.com, klik “Get started”, isi datanya, dan ikutin prosesnya. Setelah itu kamu bakal langsung dibawa ke proyek contoh.

2. Kenalan sama tampilan Figma

• Menu: Klik logo Figma di kiri atas. Di situ ada banyak perintah, dan kamu bisa cari perintah cepat juga.

• Tools: Di atas ada alat-alat kayak Move, Frame, Shape, Text, dll.

• Actions: Muncul sesuai objek yang dipilih.

• Collaboration dan View: Di kanan atas, buat share dan lihat siapa yang lagi buka file-nya.

• Layers (kiri): Daftar semua objek yang kamu buat.

• Canvas (tengah): Tempat kamu desain-desain.

• Properties (kanan): Tampilkan info dan setting dari objek yang dipilih.

3. Mulai file baru

Klik logo Figma → File → New design file.

4. Bikin Frame

Frame itu kayak "kanvas kecil" tempat kamu desain. Bisa tekan F atau klik ikon Frame. Bisa bikin manual atau pilih ukuran template, misalnya iPhone SE.

5. Zoom in & out

• Zoom: Cmd + dan Cmd - (atau Ctrl di Windows)

• Zoom ke objek: Shift 2

• Zoom ke semua: Shift 1

• Pindah Frame: N (next), Shift N (previous)

6. Gerakkan canvas pakai Hand Tool

Tekan dan tahan Spasi, lalu drag buat geser-geser canvas. Di Mac, bisa juga dua jari di trackpad.

7. Bikin teks

Tekan T buat pilih Text Tool, lalu klik di Frame dan ketik misalnya Sign In. Tekan Escape buat keluar dari Text Tool.

hasil:

8. Bikin Rectangle + atur urutan lapisan

Tekan R, gambar kotak seperti tombol. Tapi teks mungkin ketutupan.

• Solusinya: Klik teks → klik kanan → Bring to front.

• Shortcut:

  • Mac: Cmd ] atau Cmd Option ]

  • Windows: Ctrl ] atau Ctrl Shift ]

9. Align teks dan rectangle

Pilih dua-duanya, lalu klik Align Horizontal Centers dan Align Vertical Centers di sebelah kanan supaya pas tengah.

10. Buat sudut tombol jadi bulat + ganti warna

• Pilih rectangle → ubah angka di “Corner Radius”
  
  

• Warna: Pilih warna cerah, bisa ketik hex code (contoh: #EEEE33) atau pakai color picker.
  
  

• hasil
  
  

11. Ganti font

Pilih teks, lalu di panel kanan bisa ganti jenis font, ukuran, tebal, warna, dll. Contoh: ganti jadi bold dan huruf besar semua.

Penutup Hari Pertama

• Kamu udah kenal tampilan Figma, coba alat dasar, dan bikin tombol.

• Jangan lupa kasih nama file kamu (klik “Untitled” di atas dan ganti nama).

• File disimpan otomatis di cloud, jadi aman!

Besok kamu bakal lanjut desain tampilan aplikasi pertama.