Advertisement
  1. Web Design
  2. Figma

Kiat-kiat Komponen di Figma

Scroll to top
Read Time: 2 min
This post is part of a series called Figma Tips and Tricks.
Figma Vector Tips
Figma Layout Tips

Indonesian (Bahasa Indonesia) translation by Sela Sinta (you can also view the original English article)

Figma memungkinkan kita untuk mendesain dengan banyak komponen (components); repeatable object yang berperilaku sesuai dengan set aturan yang kita definisikan. Mari kita membahas beberapa tips and trick untuk membantu Anda memaksimalkan banyak komponen.

Tonton Tipsnya

1. Kombinasikan Kanyak Komponen untuk Mendistribusikan Perubahan dengan Mudah

Sebuah tombo, misalnya, mungkin merupakan komponen yang terdiri dari objek shape dan objek teks. Kami memiliki beberapa contoh tombol berikut, masing-masing sedikit berbeda tetapi semuanya mengikuti basic layout dan rules dalam tampilannya. Pada beberapa contoh, kita mungkin ingin untuk menghapus fill, hanya menyisakan stroke, dalam kasus lain kita akan mengganti fill color. Jika ini terjadi, jika kita mengubah fill color dari beberapa komponen, semua instance akan mencerminkan perubahan tersebut, kecuali yang di mana kami memilih untuk mengesampingkan fill-nya.

Tetapi jika kita mengubah property yang belum diganti, perubahan tersebut akan terlihat di semua contoh tombol tersebut

Cara bekerja seperti ini dapat menjadi pola pikir yang sangat membantu ketika membangun desain UI.

Combine Components to Propagate Changes EasilyCombine Components to Propagate Changes EasilyCombine Components to Propagate Changes Easily

2. Buat Simetri dengan Membalik Komponen

Jika Anda ingin membuat simetri atau pencerminan (mirroring), buatlah komponen setengah bagian dari sesuatu yang ingin Anda gunakan. Buat instance kedua dengan menahan ALT dan menyeret aslinya, lalu tekan SHIFT + H untuk membalik duplikatnya. Sekarang, setiap kali Anda mengubah yang asli, duplikatnya juga akan berubah, tetapi dengan cara sebaliknya.

Create Symmetry by Flipping Components in FigmaCreate Symmetry by Flipping Components in FigmaCreate Symmetry by Flipping Components in Figma

3. Buat Pola Pengulangan dengan Komponen Tiling

Anda dapat menggunakan banyak komponen untuk membuat background dan pola pengulangan yang mulus. Mulailah dengan membuat sebuah komponen tile (ubin) dengan ukuran apa saja yang Anda butuhkan, kemudian buat lebih banyak contoh dengan menahan ALT dan menyeret yang aslinya, sebaiknya lakukan beberapa kali di sepanjang setiap sumbu. Kemudian, ubah tile yang asli untuk menerapkan perubahan Anda semua tile-nya, sampai pola-pola tersebut match dengan mulus.

Selanjutnya Anda akan dapat mengekspor tile asli tersebut sebagai gambar yang berdiri sendiri, untuk menggunakannya di mana pun Anda membutuhkan tiling yang sempurna.

Create Repeating Patterns by Tiling ComponentsCreate Repeating Patterns by Tiling ComponentsCreate Repeating Patterns by Tiling Components

Sumber-sumber untuk Belajar Figma

Itulah beberapa kiat cepat untuk bekerja dengan banyak project, page, dan artboard di Figma. Untuk membantu Anda membawa banyak hal ke tingkat berikutnya, kami memiliki serangkaian kursus Figma di Tuts+:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.