Belajar Dasar Figma untuk Pemula

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

Plugin

Cara Membuat Web Design jadi Web Online

Cara convert web design ke website online / live adalah salah satu topik yang paling sering ditanyakan semenjak saya bikin channel ini. Nah di video kali ini saya menjelaskan langkah-langkah bagaimana mengubah web design yang tadinya berupa file Adobe XD, Figma, atau yg lain itu bisa sampai menjadi website online dan live sehingga bisa diakses di internet.

Cara Memahami Brief Kontes Logo di 99designs

Tutorial Membuat Continues Feed Instagram di Figma

6 Plugin Terbaik di Adobe XD

Tutorial Membuat Animasi Carousel di Adobe XD