Figma

Figma - Membuat Vektor dan Vector Networks dengan Pencil Tool, dan Pen Tools

Untuk membuat objek dalam Figma, kita dapat memanfaatkan fitur Shape tool. Namun demikian, pilihan objek yang dapat dibuat dengan Shape tool terbatas pada objek dengan tipe geometris (regular). Bagaimana jika kita ingin membuat objek yang organik? tidak usah khawatir, Figma menyediakan Pencil dan Pen Tools yang memungkinkan kita membuat bentuk jaringan vektor (vector networks) yang dinamis. Pada tutorial kali ini, kita akan membahas penggunaan Pencil dan Pen Tools.

Membuat Sketsa di Kanvas dengan Alat Pensil (Pencil Tool)

Kita dapat menggunakan Pencil tool untuk membuat sketsa di kanvas atau pada objek lain. Penggunaan Pencil tool merupakan cara yang mudah untuk menarik perhatian pada suatu objek di kanvas atau untuk menggambar bentuk baru lainnya.

Menggunakan Pencil Tool

Secara default, Pencil tool membuat sketsa dengan tebal goresan sebesar 3px dengan warna hitam, kecuali jika kita membuat sketsa pada kanvas atau bingkai gelap, warna yang digunakan adalah warna terang. Properti ini dapat disesuaikan sebelum atau setelah kita mulai membuat sketsa.

Untuk mulai menggambar menggunakan Pencil tool, ikuti langkah-langkah berikut:

  1. Klik logo pensil pada toolbar atas atau tekan ⇧ (Shift) + P untuk shortcut.
  2. Pilih isian warna, ketebalan goresan, dan gaya titik akhir dari bagian Stroke di sidebar kanan pada panel properties.
  3. Klik dan seret kanvas untuk membuat sketsa.

Pencil tool tetap aktif sampai kita memilih alat lain atau menekan Esc. Untuk menggambar garis lurus, tahan/tekan Shift saat menggambar.

Mengedit Sketsa Pensil

Ketika kita membuat sketsa pada kanvas dengan menggunakan Pencil tool, kita dapat melakukan pengeditan baik warna, stroke (goresan), maupun bentuk gaya ujung dari path yang terbentuk.

Properties fill dan stroke (warna & goresan)

Kita dapat mengubah warna sketsa pensil, menambahkan gaya warna, gaya ujung, dan ketebalan goresan kapan saja.

  1. Pilih sketsa di kanvas.
  2. Edit isian warna, ketebalan goresan, dan gaya titik ujung dari bagian Stroke pada sidebar kanan. Kita juga dapat mengklik ikon tiga titik untuk mengubah gaya garis menjadi tanda hubung, atau membuat gaya khusus.

Dimensi

Untuk mengubah dimensi sketsa pensil, lakukan langkah berikut:

  1. Pilih layer yang ingin disesuaikan.
  2. Seret sisi atau sudut kotak pembatas sketsa untuk mengubah ukuran dimensinya.

Kita dapat mengubah ukuran secara proporsional dengan menekan ⇧ (Shift) sambil menyeret.

Menghapus sketsa pensil

Untuk menghapus sketsa pensil lakukan langkah berikut:

  1. Pilih sketsa yang ingin kita hapus dari kanvas atau panel Layers.
  2. Kemudian tekan Delete.

Pen Tool & Vector Networks

Vector Networks (Jaringan vektor) adalah salah satu fitur paling unik di Figma. Ketika kita menggunakan Pen Tool, sebagian besar yang dilakukan adalah kita membuat path dalam satu lingkaran dengan arah yang ditentukan, dan menyambung kembali ke titik asalnya. Namun demikian, kita dapat membuat path yang komleks sehingga membentuk jaringan vektor (vector networks). Jaringan vektor tidak memiliki arah dan dapat bercabang ke arah yang berbeda tanpa memerlukan objek path yang terpisah untuk dibuat. Objek kompleks kemudian dapat dibuat dalam objek yang sama dan dengan properti yang sama jauh lebih cepat daripada yang dapat digambar menggunakan path vektor tradisional.

Menggunakan Pen Tool

Untuk menggunakan Pen Tool, lakukan langkah berikut:

  • Pilih menu Pen Tool pada toolbar, atau dengan menekan huruf P pada keyboard.
  • Klik pada kanvas, lalu mulai membuat objek
  • Klik pada titik path, kemudian pilih Move Tool (V) untuk melakukan penggeseran objek

Membuat jaringan vektor

Kita dapat menggunakan Pen tool, atau salah satu dari Shape tool untuk membuat layer vektor baru. Saat menggunakan alat Shape tool, kita dapat menahan tombol pengubah untuk menggambarnya dengan cara tertentu, contoh:

  • Tahan ⇧ Shift sambil membuat bentuk untuk mengunci rasio aspek bentuk menjadi 1:1.
  • Tahan ⌥ Option/Alt sambil membuat bentuk untuk membuatnya berskala relatif terhadap pusatnya daripada relatif terhadap sudut kiri atas.
  • Saat kita mengklik dan menyeret untuk membuat bentuk, tahan Spasi untuk memindahkan bentuk di sekitar kanvas sebelum melepaskan klik pada mouse kita.

Mengedit jaringan vektor

Mode edit vektor memungkinkan kita memilih, menyesuaikan, atau mengubah properti titik, garis, atau seluruh bentuk individual. Saat kita mengedit objek, kita bisa berinteraksi dengan titik yang ada dan garis di antara mereka. Kita juga dapat menggunakan Pen tool untuk memplot poin tambahan dan memanipulasinya juga.

Untuk masuk ke mode edit vektor, kita dapat melakukannya dengan dua cara, yaitu:

  • Pilih path/jalur dan tekan Return/Enter, atau
  • Klik tombol Edit object pada toolbar

Untuk keluar dari mode edit vektor, tekan Return/ Enter lagi, atau klik Done pada toolbar.

Menambahkan Warna (Fills)

Tambahkan warna ke wilayah tertutup dari jaringan vektor.

  1. Pilih jaringan vektor.
  2. Klik tombol Edit object pada toolbar atau tekan Return/Enter untuk masuk ke mode edit.
  3. Klik tombol Paint Bucket pada toolbar atau tekan B untuk memilih alat ember cat.
  4. Klik area jaringan vektor tertutup untuk menambahkan warna.

Kita dapat menambahkan isian yang berbeda ke wilayah terpisah dari jaringan vektor selama itu adalah wilayah tertutup yang terpisah.

Kurva Bezier

Untuk mengakses handel Bézier suatu titik:

  1. Pilih jaringan vektor.
  2. Klik tombol Edit object pada toolbar atau tekan Return/Enter untuk masuk ke mode edit.
  3. Jika sebuah objek adalah kurva, pegangannya sudah akan terlihat. Jika objek tersebut adalah sudut tanpa pegangan, tekan Bend tool di toolbar atau tahan ⌘ Command/Control dan klik titik untuk menunjukkan pegangan dan membuat kurva cermin.
  4. Klik dan seret pegangan untuk menyesuaikan path dari kurva.

Sudut Bulat

Titik perantara apa pun pada sebuah path dapat dibulatkan melalui properti radius sudut pada panel sisi kanan. Jika kita memilih seluruh path, maka akan membulatkan semua sudut ke derajat yang sama. Jika kita masuk ke mode edit, kita dapat memilih poin individual dan membulatkannya secara terpisah.

Titik terminal pada path terbuka hanya dapat dibulatkan melalui batas akhir.

Caps

Kita dapata menambahkan gaya ke titik akhir dari setiap path yang terbuka. Figma menampilkan properti cap secara berbeda tergantung pada jenis path dari vektor yang dipilih.

Path vektor dengan dua titik akhir

Figma akan menampilkan properti cap di sidebar kanan jika path vektor dengan dua titik akhir dipilih. Kita dapat mengatur setiap tutup ujung secara independen dari yang lain.

Path vektor dengan lebih dari dua titik akhir

Figma akan menampilkan properti cap di menu stroke lanjutan jika path vektor dengan lebih dari dua titik akhir dipilih.

Kita tidak dapat mengedit batas akhir (titik ujung) secara independen saat seluruh path vektor dipilih. Untuk mengedit huruf besar secara mandiri, pilih satu titik vektor saat dalam mode edit vektor.

Jenis Caps

Pilih dari:

  • Tidak ada: Tidak menambahkan batas ke ujung path. Ujung path dikuadratkan, tanpa menambahkan panjang apa pun ke jalan.
  • Panah garis: Menambahkan dua garis 45 derajat ke kedua sisi titik akhir. Ini menggunakan bobot stroke yang sama dengan path itu sendiri. Kita tidak dapat mengubah panjang garis kepala panah.
  • Panah segitiga: Tambahkan panah segitiga ke kedua titik akhir. Kita harus masuk ke mode edit objek untuk menerapkan panah ke salah satu ujung path saja.
  • Segitiga terbalik: Versi panah segitiga terbalik atau terbalik, dengan titik panah menghadap ke dalam menuju jalan.
  • Panah berlian: Tutup berlian padat.
  • Round (default): Menambahkan batas setengah dari berat goresan, serta membulatkan titik akhir path menjadi 50% lebarnya.
  • Kotak: Menambahkan cap setengah dari berat goresan, sambil mengkuadratkan titik akhir path.

Referensi

Diterjemahkan dari Laman Dokumentasi Figma dengan beberapa pengubahan. All Credits for Figma Authors.

 

Comments

Related posts