Capaian Pembelajaran:

1. Mahasiswa mampu menganalisis teknik dasar dalam menggunakan Figma
2. Mahasiswa mampu mengimplementasikan dasar-dasar penggunaan Figma dan bagaimana memanfaatkannya dalam membuat desain produk yang berkualitas.

--------------------------------------------------------------------

Halo Explorers, gimana kabarnya? Setelah belajar desain sistem tentunya sudah nggak sabar kan buat belajar mengimplementasikannya langsung? Nah, supaya kalian dapat membuatnya mari pahami penggunaan Figma berikut ini!

Figma adalah sebuah aplikasi desain grafis dan kolaborasi yang populer digunakan untuk membuat desain antarmuka pengguna (user interface/UI), prototyping, dan desain visual. Maka dari itu kita wajib memahami cara kerja dan pembuatan UI/UX menggunakan figma. Sebelum mempelajari teknik dasar penggunaan figma, kita harus mendownload atau register untuk penggunaan figma dalam website.

 

Introduction to FIGMA

 

Figma merupakan design tools yang saat ini familiar dan powerful untuk mambantu kita membuat sebuah design tampilan antar muka (User Interface) baik Mobile apps, Website, Logo dan lain-lain.

 

Pada materi ini saya akan memperkenalkan kepada kalian baik menu atau fitur yang bakal kita gunakan nanti ketika kita mendesain baik User Interface design maupun User Experience Design.

 

 

 

 

 

 

1. Membuat Akun

 

Tahap pertama adalah kamu diminta membuat akun terlebih dahulu dengan email, jika kamu sudah memiliki akun kamu bisa langsung klik tombol login lalu masukan email dan password yang sudah terdaftar.

 

Memulai membuat file

Setelah kamu berhasil membuat akun/login selanjutnya adalah membuat file pekerjaan/project baru di Figma dengan cara klik tombol New Design File

 

 

selanjutnya akan muncul tampilan lembar kerja baru seperti gambar berikut ini

 

 

Membuat Frame di Figma

Sebelum memulai kita kenalan dulu dengan frame, jadi frame ini adalah halaman yang bakal kita gunakan untuk desain kita nanti. Ukuran nya bermacam-macam tergantung dengan kebutuhan kita ingin membuat design untuk mobile apps atau website. Baik, pertama kita klik menu frame pada toolbar di bagian atas.

Lalu kamu bisa pilih ukuran frame yang ingin kalian gunakan, pada tools Figma ini tersedia berbagai macam ukuran frame mulai dari frame untuk smartphone,Tablet, Desktop hingga social media seperti Instagram feed,Reels,Story dll.

 

Menambahkan Grid

Sebelum memulai desain yang pertama kali kita buat maka kita harus menambahkan grid agar desain yang kita buat terlihat rapi dan konsisten terutama jarak antara kiri dan kanannya.

Langkah-langkahnya adalah sebagai berikut:

1. Pilih frame yang akan diberikan gridnya.
2. Pilih menu layout grid pada toolbar di bagian kanan, ubah menjadi columns grid.

3. Isi countnya manjadi 4, margin 16 dan gutternya sebanyak 16 pixel. angka pada pengaturan Grid ini mengikuti rules dari Google Material Design.

 

Membuat shape

Shape kalo kita artikan dalam bahasa Indonesia adalah bentuk seperti kotak, bulat, garis dan sebagainya. Shape merupakan dasar elemen yang bakal kita pakai saat mendesain nanti. Mari kita mulai membuat sebuah shape rectangle di Figma.

1. Pertama kita klik menu shape di toolbar atas, atau kamu bisa pakai shortcut dengan menekan huruf R di keyboard laptop kamu

2. Drag mouse kamu untuk mengatur ukuran rectangle yang ingin di buat.

3. Selesai, kamu bisa coba bentuk shape yang lainya.

 

Menambahkan gambar di Figma

Kamu juga dapat menambahkan gambar di Figma, ada 2 cara yaitu kamu bisa upload dari penyimpanan lokal laptop kamu atau copy paste dari website penyedia gambar gratis seperti unsplash.com atau pexels.com.

 

1. Cari gambar yang kamu inginkan dari website unsplash
2. Copy gambarnya dengan klik kanan pada gambarnya lalu pilih copy image
3. Kita kembali ke halaman Figma lalu paste gambar tadi dengan klik CTRL + V

 

Menambahkan text di figma

Untuk menambahkan text caranya adalah

1. kita pilih menu T (text) pada toolbar bagian atas atau kamu bisa pake shortcut dengan menekan huruf T pada keyboard.

2. Arahkan lokasi text.
3. Pada contoh kali ini saya menggunakan jenis font Interdengan ukuran 12 pixels dan ketebalan Reguler.

Kamu juga bisa mengganti jenis font, size, color dan alignment sesuai dengan keinginan kamu.

 

TUGAS!

Setelah kalian belajar terkait pengenalan figma dan teknik dasarnya, maka kalian dapat membuat landing page website sederhana dengan memperhatikan teknik dasar yang sudah dipelajari!

 

Sumber belajar

Berikut ini para content creator youtube yang bisa kamu kunjungi sebagai bahan belajar figma

 

Creator dalam negri

KukuhAldy

https://www.youtube.com/@MasKukuhAldy

menurutku channel ini cocok untuk kalian sebagai pemula yang ingin belajar UI/UX design, tutorial yang disampaikan sangat jelas

 

Buildwithangga

https://www.youtube.com/@BuildWithAngga

Channel ini juga memberikan tutorial UI/UX design yang sangat baik, tidak hanya UI/UX design programming skill juga ada di channel ini.

 

Hey Detya

https://www.youtube.com/@heydetya

Kalo channel Hey Detya ini sering berbagi tips UI Design yang menarik. kalian bisa ikuti tutorialnya juga.

 

Creator luar negeri

Design course

https://www.youtube.com/@DesignCourse

Youtube channel yang satu ini, menurut aku cukup menarik untuk ditonton, selain UI/UX design channel ini membuat tutorial CSS.