Back to ui-ux TUTORIAL

4-basic-figma

Muhammad Fauzan Arrafi
1 September 2025
30 minutes

# 4- Basic Figma

Author: Muhammad Fauzan Arrafi

Figma telah menjadi alat desain yang penting bagi desainer UI/UX. Platform ini menawarkan kolaborasi real-time, pustaka aset yang dapat digunakan kembali, dan fitur prototyping canggih - meningkatkan produktivitas, konsistensi, dan komunikasi proyek. Semakin banyak perusahaan di Indonesia yang mengadopsi Figma, menyadari manfaatnya bagi alur kerja desain modern.

Bagi seorang UIUX designer, menguasai Figma adalah hal yang wajib untuk di lakukan, untuk memulai belajar Figma, berikut adalah dasar-dasar yang harus di kuasai untuk mulai menggunkaan Figma

Figma tools

Toolbar Figma, yang terletak di bagian atas layar kamu, memberikan akses ke alat dan fungsionalitas inti dari program ini Dirancang untuk menyertakan alat penting, memastikan bahwa semua yang kamu butuhkan mudah dijangkau Mengenal toolbar ini adalah langkah pertama dalam membuka kreativitas kamu di Figma Bahkan sebagai pemula, kamu akan menemukan bahwa kamu dapat dengan cepat mulai bereksperimen dan membuat bentuk dasar, membentuk dasar untuk desain yang lebih kompleks seiring dengan meningkatnya keterampilan kamu

1. Move Tool

Move tool di Figma memungkinkan pengguna untuk memilih dan memindahkan elemen desain dengan mudah.

Ketika Move tool dipilih, kursor berubah menjadi panah khusus sebagai indikator visual yang jelas bahwa kamu sedang dalam mode untuk memanipulasi elemen desain secara aktif

Kursor panah kustom ini memudahkan untuk memilih dan mengatur lapisan di dalam Panel Lapisan, Ini juga memungkinkan pergerakan yang tepat pada objek di kanvas Untuk memindahkan objek, cukup klik dan seret menggunakan mouse atau touchpad, Untuk kontrol yang lebih halus dan penyesuaian kecil, kamu dapat menggunakan arrow key.

> [!NOTE] > Tip: Kalian dapat menggunakan shortcut “V” untuk Move menggunakan Move tool

2. Scale Tool

Scale Tool di Figma memungkinkan pengguna untuk mengubah ukuran elemen desain. Saat alat ini dipilih, kursor berubah menjadi ikon skala khusus, memberi tahu pengguna bahwa mereka berada dalam mode scale.

Untuk menemukannya, klik panah di sebelah Move tool pada Toolbar Ini akan menampilkan alat tambahan, termasuk Scale tool yang dapat dikenali dari ikon berbentuk kotak berbingkai dengan panah dua sisi di sudut kanan, kamu juga dapat mengaktifkannya dengan cepat dengan menekan “K” pada Windows dan Mac

Dengan Scale tool, pengguna dapat memilih satu atau lebih objek, lalu mengeklik dan menyeret untuk mengubah ukurannya. Scaling dapat dilakukan secara proporsional dengan menekan tombol Shift saat menyeret. Pengguna juga dapat menggunakan panel kontrol ukuran untuk memasukkan nilai numerik yang tepat.

> [!NOTE] > Tip : Untuk menskalakan objek secara proporsional di Figma, pilih objek dengan alat Skala, lalu tahan Shift sambil menyeret gagang sudut untuk mempertahankan rasio aspeknya.

3. Frame Tool

Frame tool di Figma memungkinkan pengguna untuk membuat dan mengelola komponen layout dasar dalam desain mereka. Saat alat Frame dipilih, kursor berubah menjadi ikon khusus, memberi tahu pengguna bahwa mereka berada dalam mode pembingkaian.

Di Figma, frame mirip dengan artboard di alat desain lainnya, digunakan untuk menentukan area khusus di kanvas, untuk desain kamu Ini sangat penting untuk mengatur elemen desain, memungkinkan tata letak terstruktur dan alur kerja yang efisien

Dengan Frame tool, desainer dapat dengan cepat membuat kotak pembatas untuk mengelompokkan dan mengatur elemen pada kanvas. Frame berfungsi sebagai kontainer untuk menampung berbagai objek, seperti teks, ikon, dan widget UI lainnya.

> [!NOTE] > Tip: Untuk mengakses Frame Tool, tekan “A”, di toolbar Ikon ini terlihat seperti jaringan dari 4 garis yang saling berpotongan

4. Slice Tool

Slice tool, dapat ditemukan dengan mengeklik panah di sebelah Frame tool dan dapat dikenali dengan ikon pisau irisnya, dirancang untuk menentukan wilayah layar yang akan diekspor.

Berbeda dengan Frame tool yang digunakan untuk membangun dan mengatur tata letak, Slice tool berfokus pada wilayah desain tertentu untuk diekspor Ini memberikan kontrol yang tepat atas bagian-bagian desain kamu yang disimpan sebagai file gambar, menjadikannya alat yang berguna untuk mengekspor aspek individual tanpa mengubah struktur desain keseluruhan.

> [!NOTE] > Tip: Untuk mengakses Slice Tool, kalian dapat menekan tombol “S” pada keyboard

5. Pen Tool

Pen tool di Figma memungkinkan pengguna untuk menggambar dan membuat bentuk vektor secara manual. Saat alat Pen dipilih, kursor berubah menjadi ikon pena khusus, memberi tahu pengguna bahwa mereka berada dalam mode menggambar vektor.

Pen tool sering digunakan untuk kegiatan seperti desain logo, menciptakan elemen grafis yang khas, dan membuat ilustrasi vektor yang rumit Alat ini memberikan ketepatan dan variasi Baik bagi kamu yang sedang membuat identitas merek atau menambahkan detail yang presisi pada gambar digital, alat ini penting untuk menghasilkan garis dan lengkungan yang tajam dan bersih dalam pekerjaan desain.

> [!NOTE] > Tip: Untuk mengakses Pen Tool kamu dapat menekan tombol “P” pada keyboard

6. Pencil Tool

Dengan Pencil tool, desainer dapat mengeklik dan menyeret untuk menggambar garis, lengkungan, dan bentuk tidak beraturan pada kanvas. Alat ini berfungsi seperti menggambar dengan pensil di atas kertas, memberikan efek yang lebih spontan dan alami dibandingkan dengan alat Pen vektor.

Pen tool menawarkan freehand approach untuk menambahkan sketsa, catatan, atau sentuhan seni pada desain kamu, Ideal untuk menuliskan ide-ide atau menambahkan sketsa, Pencil tool di gunakan untuk menghadirkan nuansa organik pada desain digital.

> [!NOTE] > Tip: Untuk mengakses Pencil Tool kamu dapat menekan tombol “Sift” + “P” pada keyboard, ini berlaku untuk Mac dan Windows!

7. Shape Tool

Figma memiliki beberapa alat bentuk default, masing-masing diidentifikasi oleh ikon representatif Untuk menggambar bentuk, cukup pilih alat yang diinginkan dari menu dropdown dan klik serta drag ke kanvas.

Shapes dan shortcut yang tersedia:

  • Rectangle: R
  • Line: L
  • Arrow: Shift L
  • Ellipse: O
  • Polygon
  • Star

Shape Tool juga memiliki opsi untuk menaruh images ke kanvas:

  • Mac: Shift + Command + K
  • Windows: Shift + Ctrl + K

> [!NOTE] > Tip : Untuk menggambar bentuk proporsional (seperti persegi atau lingkaran sempurna), tahan tombol Shift sambil drag di kanvas.

8. Text Tool

Text tool di Figma memungkinkan pengguna untuk menambahkan dan mengelola teks dalam desain mereka.

Untuk membuat layer teks instan, kalian bisa klik sekali pada kanvas. Jika kamu lebih suka layer teks dengan proporsi tetap, klik dan seret untuk mengatur ukurannya. Fleksibilitas dalam membangun lapisan teks ini menjamin bahwa informasi tekstual kamu sesuai dan menambah koherensi visual desain kamu.

> [!NOTE] > Tip : Kalian dapat menggunakan shortcut “T” untuk menggunakan Text Tool

9. Hand Tool

Hand tool adalah alat untuk navigasi yang lancar di dalam workspace, alat ini memungkinkan kamu untuk menavigasi tanpa sengaja memilih atau mengubah sesuatu. Untuk mengaktifkan Hand tool, cukup tekan dan tahan Spasi/Space.

10. Comment Tool

Comment tool di Figma, yang dapat diketahui dengan ikon bubble chat, memudahkan komunikasi lancar dengan tim kamu, Cocok untuk membahas perubahan, merespons umpan balik, dan menyempurnakan desain langsung di dalam file desain itu sendiri Setelah diaktifkan, kursor berubah menjadi ikon gelembung obrolan, memungkinkan pengguna mengklik di mana saja pada desain untuk meninggalkan komentar.

> [!NOTE] > Tip: Kalian dapat menggunakan Comment Tool dengan click “C” pada keyboard

Figma Design Panel

Design panel di Figma adalah area di dalam aplikasi Figma yang menyediakan berbagai pengaturan dan opsi untuk memodifikasi elemen-elemen yang ada di kanvas (canvas). Ketika tidak ada elemen yang dipilih di kanvas, design panel memberikan akses ke style dan variabel spesifik file, kemampuan untuk memperbarui warna latar belakang kanvas, serta opsi untuk mengekspor seluruh halaman.

Namun, ketika sebuah layer/elemen di kanvas dipilih, kemampuan design panel menjadi lebih luas. Pada layer yang terpilih, design panel menawarkan berbagai pengaturan seperti:

  1. Alignment dan distribution: Mengatur posisi elemen-elemen terkait satu sama lain.
  2. Position dan dimensions: Menetapkan parameter lokasi dan ukuran, termasuk rotasi.
  3. Constraints dan layout grid: Mendefinisikan perilaku responsif dan struktur tata letak.
  4. Properti dan instance komponen: Mengelola komponen yang dapat digunakan kembali dan instansinya.
  5. Auto layout: Mengotomatisasi jarak dan perataan elemen.
  6. Text, fill, stroke, dan efek: Mengustomisasi atribut visual seperti tipografi, warna, batas, dan bayangan.

Figma Layer Panel

Layers panel adalah komponen yang sangat penting untuk mengatur desain kamu. Panel ini menampilkan daftar semua elemen, seperti teks, bentuk, dan gambar, dalam proyek kamu dengan ikon spesifik yang mengindikasikan jenis mereka. Elemen-elemen ini ditampilkan dalam hierarki, yang berarti bagaimana mereka ditumpuk atau disarangkan.

Di Layers panel, kamu dapat memilih, menata ulang, mengelompokkan, atau menyembunyikan elemen-elemen. Untuk memilih beberapa layer sekaligus, tekan Shift atau Command (Mac) dan Ctrl (Windows). kamu juga dapat double-klik untuk mengganti nama elemen agar mudah diidentifikasi. Klik kanan pada sebuah elemen akan memberikan opsi tambahan seperti menggkamukan atau menghapus.

Layers panel adalah area yang sangat penting dalam aplikasi Figma, karena memungkinkan kamu untuk mengorganisir dan mengelola elemen-elemen desain kamu dengan efektif.

Berikut penjelasan lebih detailnya:

  1. Daftar Elemen:

    • Layers panel menampilkan daftar lengkap semua elemen yang ada dalam proyek kamu.
    • Elemen-elemen ini bisa berupa teks, bentuk, gambar, grup, frame, dan lainnya.
    • Setiap elemen memiliki ikon spesifik yang menunjukkan jenis elemennya.

  2. Hierarki dan Susunan:

    • Elemen-elemen dalam Layers panel ditampilkan dalam struktur hierarki.
    • Hal ini menunjukkan bagaimana elemen-elemen tersebut ditumpuk atau disarangkan di dalam proyek.
    • Urutan dan susunan elemen di Layers panel menentukan tata letak dan tampilan akhir di kanvas.

  3. Operasi pada Elemen:

    • Melalui Layers panel, kamu dapat memilih, menata ulang, mengelompokkan, dan menyembunyikan elemen-elemen.
    • Pilih beberapa elemen sekaligus dengan menekan Shift atau Command/Ctrl.
    • Klik double pada elemen untuk mengganti namanya agar lebih mudah diidentifikasi.
    • Klik kanan pada elemen untuk mendapatkan opsi tambahan seperti menggkamukan atau menghapus.

  4. Pengaturan Visual:

    • Terdapat pengaturan untuk menyorot elemen saat diarahkan kursor, di Menu > Preferences.
    • Ini membantu kamu dengan cepat menemukan elemen yang kamu inginkan di Layers panel.

Catatan akhir

Dengan mengetahui basic penggunaan Figma di atas, kalian bisa merealisasikan ide design kalian kedalam kanvas digital di mana kalian juga dapat berklaborasi dengan tim kalian. untuk penjelasain lebih, kalian bisa menunjungi folder figma_modul!

Tags

ui-ux design