Salah satu video saya yg paling rame adalah belajar dasar XD, karena memang XD adalah software UI/UX prtama yg saya pelajari stelah Photoshop. Lalu beberapa bulan kmarin mulai rame juga Figma, dan saya sudah pernah buat video impresiion pertama saya pake figma, yang stres dan kbingungan slama satu jam bs kalian lihat dsni. Setelah beberapa projek kemudian saya sudah mulai lancar ni pakainya dan ini adalah video tutorial basic figma ynag proper.
Apa itu figma
Figma adalah software yg dikhususkan utk membuat UI/UX design, seperti Sketch dan XD. Apa bedanya? Figma mempunyai versi webapp yg bisa digunakan dengan browser, jadi bs dipakai di OS mana saja dari Mac, Windows, dan Linux. Fitur lain unggulan figma adalah bisa berkolaborasi dengan desainer lain, mengedit file yg sama secara bersamaan, seperti Google Docs. Dan juga bisa menulis feedback lagsung secara online. Walopun fitur2 ini mulai ada di XD, namun figma sudah bisa duluan.
Memulai figma
Bisa buka di browser atau download versi desktopnya di figma.com. Kalian bisa membuat tim, dan mengajak tim kalian utk berkolaborasi. Tapi utk versi gratis dibatasi kolaborator hanya 2 orang. Kalo mau lebih bs bayar. Jadi utk temen2 tim kecil atau bahkan freelance sndirian, figma adalah software yg benar2 gratis. Utk skrng kita lgsung coba buat new file saja.
Pengenalan panel dan tool
- Canvas, yg paling besar
- Toolbar, yg diatas. Dijelasin satu2. Ganti nama file Yg d kanan: Avatar, share, dll
- Property panel, yg di kanan. Design, Prototype, Code
- Layer panel, di kiri. Buat frame. Bisa diedit apa saja. Buat shape. Di sebelah kanan, property panel jg berubah. Coba satu2 Tambah page
Membuat Component
- Buat master
- Buat instance
- Edit master, instance akan berubah
- Merubah instance tidak akan merubah yg lain
Membuat color dan text style
- Buat warna. klik fill titik4, lalu +
- Mengedit ini akan bs ngefek ke smua warna yg pake style ini
- Buat text. klik text titik4, lalu +
- Mengedit ini bakal ngefek ke smua text yg pake style ini
Tool penting:
- Masking
- Ruler : shift + R
- Edit gambar lgsung di figma, di XD gbs
- Gantinya repeat grid
- Export
Prototyping
Kolaborasi dan sharing.
- Editor kolaborasi, bs kerja bareng tim in realtime
- Developer handoff. Ganti dlu jadi ‘can view’. Di hver akan keluar jarak px
- Komen utk klien atau teman 1 team