Gunakan slot untuk membangun komponen yang fleksibel di Figma

Sebelum Memulai

Fitur ini tersedia di Figma Design pada semua paket. Siapa pun dengan akses edit ke file desain dapat menambahkan slot ke komponen. Baru belajar membuat komponen? Lihat panduan komponen untuk memulai.

Kasus Penggunaan Umum

Elemen Berulang

Komponen yang berisi elemen berulang—seperti daftar tugas, kolom input pada formulir, dan daftar putar musik—mungkin tidak memiliki jumlah kemunculan tetap. Saat membuat komponen dengan slot, Anda dapat menambahkan item berulang sebanyak yang diperlukan tanpa melepas instance dari komponen utama.

Tata Letak Bebas

Komponen dasar tertentu memiliki banyak variasi penampilan—seperti modal dan kartu. Mereka memerlukan fleksibilitas dalam penataan tata letak dan jenis konten yang dikandungnya. Dengan slot, Anda dapat mengubah ukuran dan menyusun ulang item sesuai kebutuhan serta menyisipkan lapisan dari semua jenis—seperti instance, teks, gambar, dan lainnya.

Menambahkan dan Mengedit Slot

Slot dapat diterapkan pada lapisan yang bersarang di dalam komponen utama atau di dalam varian dari set komponen yang sama. Anda tidak dapat mengikat properti komponen ke lapisan tingkat atas suatu komponen. Komponen dengan slot dapat dipublikasikan dalam keadaan kosong atau dengan konten default yang sudah diisi sebelumnya. Ada beberapa cara untuk menambahkan slot ke komponen utama.

Mengubah Bingkai Menjadi Slot

1. Pilih bingkai bersarang di dalam komponen utama.
2. Pilih salah satu opsi berikut: Klik kanan dan pilih Convert to slot, gunakan pintasan ⌘Command⇧Shift S (Mac) atau ⌃Control⇧Shift S (Windows), atau dari panel kanan klik Convert to slot lalu pilih properti slot yang ada dari dropdown atau buat yang baru.

Bingkai akan diubah menjadi slot, dan properti slot baru akan dibuat. Dari bagian Properties di panel kanan, klik Edit slot property untuk memperbarui nama slot, menambahkan deskripsi, dan mengatur instance pilihan.

Membungkus Obyek dalam Slot Baru

1. Dari komponen utama, pilih obyek non-bingkai atau beberapa lapisan.
2. Klik kanan dan pilih Wrap in new slot.

Ini akan membuat slot baru dan menempatkan pilihan Anda ke dalamnya, dan properti slot baru akan dibuat. Dari bagian Properties panel kanan, klik Edit slot property untuk memperbarui nama, deskripsi, dan instance pilihan.

Membuat Properti Slot, Lalu Terapkan ke Lapisan

1. Pilih komponen utama di kanvas.
2. Klik Create property dan pilih Slot dari panel kanan.
3. Modal pengaturan akan muncul, di mana Anda dapat memperbarui nama slot, menambahkan dokumentasi, dan mengatur instance pilihan.
4. Ini akan membuat properti slot, tetapi tidak mendefinisikan area slot pada lapisan sampai Anda menetapkannya ke bingkai. Saat siap, pilih bingkai lalu klik Convert to slot di sidebar kanan, lalu pilih properti slot yang ada dari dropdown.

Mengonfigurasi Properti Slot

Anda dapat membiarkan slot kosong atau menambahkan lapisan sebagai konten default. Slot dapat memiliki sebagian besar properti yang sama dengan bingkai, seperti tata letak otomatis horizontal dan vertikal, dimensi minimum dan maksimum, isian warna, efek, dan variabel. Untuk mengedit properti slot yang ada, pilih komponen utama dan temukan slot di panel kanan. Arahkan kursor ke properti slot lalu klik Edit property. Dari sana Anda dapat memperbarui nama, deskripsi, dan mengatur instance pilihan.

Mengatur Instance Pilihan

Mengatur instance pilihan untuk slot memungkinkan tim Anda memilih dari serangkaian komponen terkurasi saat menambahkan aset ke slot. Ini adalah langkah opsional untuk mengurangi tebakan dengan memandu desainer menuju komponen yang direkomendasikan atau paling sering digunakan.

Catatan tentang Properti Komponen di Slot

Properti komponen tidak dapat diterapkan ke lapisan di dalam slot dari komponen utama, meskipun lapisan tersebut adalah instance komponen. Namun, jika Anda menyisipkan instance komponen ke dalam slot—baik slot tersebut berada di komponen utama maupun instance—properti komponen yang diterapkan akan tetap ada dan tersedia. Untuk menjaga fleksibilitas lapisan di slot komponen utama, Anda dapat menjajaki pengikatan variabel sebagai gantinya. Pelajari cara mengikat variabel ke instance varian dari artikel pusat bantuan terkait dan video tutorial.

Menghapus Slot

Peringatan: Menghapus properti slot dari komponen utama adalah tindakan destruktif. Jika instance telah dimodifikasi menggunakan slot dan properti slot dihapus dari komponen utama, area slot instance tersebut akan diatur ulang ke keadaan default. Ada beberapa cara untuk menghapus slot dari komponen utama: Untuk menghapus properti slot beserta isinya, seret slot keluar dari komponen utama lalu hapus. Untuk menghapus properti slot tetapi mempertahankan isinya, pilih komponen utama lalu di panel kanan klik ikon di samping nama properti slot, atau gunakan pintasan ⌘Command⇧Shift G (MacOS) atau Ctrl⇧Shift G (Windows).

Bekerja dengan Slot di Instance

Menambahkan Konten ke Slot

Setelah komponen utama disiapkan dengan slot, Anda dapat mengambil instance dan mulai menambahkan konten ke dalam slot. Batas merah muda akan muncul di sekitar slot saat Anda memilih atau mengarahkan kursor ke komponen tingkat atasnya. Semua jenis lapisan dapat ditambahkan ke slot. Beberapa cara untuk menyisipkan konten: Seret obyek dari kanvas atau panel Aset ke dalam slot. Arahkan kursor ke slot dan klik Add instances. Duplikat lapisan di dalam slot. Gunakan alat apa pun untuk menambahkan lapisan langsung ke slot.

Mengatur Ulang Slot

Mengatur ulang slot akan membatalkan semua perubahan pada slot dan mengembalikannya ke tampilan seperti di komponen utama. Pilih lapisan slot, klik More actions dan pilih Reset slot.

Membersihkan Slot

Membersihkan slot akan menghapus semua lapisan di dalam slot sehingga Anda dapat memulai dari awal. Pilih lapisan slot, klik More actions dan pilih Delete contents.

Serah Terima ke Pengembang

Petakan konten terstruktur dari komponen Figma langsung ke contoh kode Anda menggunakan Code Connect. Ini memungkinkan representasi konten anak yang fleksibel seperti teks, lapisan, atau komponen bersarang, di dalam potongan kode. Pelajari lebih lanjut tentang Code Connect.

Sumber Daya

Siap melanjutkan perjalanan dengan slot? Lihat sumber daya berikut: Pelajari cara memigrasi pustaka yang ada untuk menggunakan slot, pahami perbedaan antara slot, instance swap, dan varian, dapatkan latihan langsung dengan file playground slot, lihat slot dalam aksi dalam tutorial video 4 menit, dan baca blog Figma tentang cara meningkatkan sistem desain dengan slot.