Berbagi Komponen di Framer

Di Framer, dengan membagikan komponen ke pustaka, Anda dapat menggunakannya kembali dengan mudah dalam berbagai proyek tanpa perlu membuat elemen UI yang sama berulang kali. Fitur ini sangat bermanfaat jika Anda bekerja dalam tim atau mengelola sistem desain. Berikut dijelaskan cara berbagi/menyisipkan/memperbarui dan mengambil komponen secara efisien.

1. Menambahkan Komponen ke Pustaka

Jika Anda ingin komponen yang dibuat dalam satu proyek dapat digunakan kembali di semua proyek dalam ruang kerja, Anda dapat menambahkannya ke pustaka.

Cara Menambahkan ke Pustaka

1. Buka panel Assets.

2. Klik ikon lebih lanjut ··· di sebelah nama komponen.

3. Pilih Library > Add dari dropdown yang muncul.

2. Menyisipkan Komponen

Komponen yang ditambahkan ke pustaka dapat digunakan di semua proyek dalam ruang kerja, dan Anda dapat mencari komponen tertentu berdasarkan namanya.

Mencari Komponen di Pustaka

1. Tekan ⌘ K (untuk Windows tekan Ctrl + K) untuk membuka jendela Quick Actions.

2. Pilih Browse Library.

Lencana nama ruang kerja yang sedang dilihat akan ditampilkan di atas kotak pencarian. Anda dapat bergerak dengan tombol panah dan menekan Enter untuk menyisipkan komponen ke kanvas.

3. Memperbarui Komponen

Jika Anda mengubah komponen utama (Primary), Anda dapat memuat versi terbaru di semua proyek yang menggunakan instansi komponen tersebut tanpa perlu mempublikasikan ulang secara manual. Klik tombol “Update” di panel Assets, perubahan akan diterapkan ke setiap komponen. Anda juga bisa membatalkan pembaruan jika diperlukan.

Note: Pembaruan perubahan komponen berlaku hanya jika instansi komponen tidak dipisahkan (Detach), jadi harap diperhatikan.

4. Menambahkan Komponen dengan URL (Salin URL)

1. Klik ikon lebih lanjut ··· di panel Assets untuk komponen tersebut.

2. Pilih “Copy URL”.

3. Tempel URL yang disalin ke kanvas proyek baru.

Saat Anda mencoba untuk memodifikasi komponen dengan mengklik dua kali di kanvas, popup yang menanyakan “Unlink Instance” akan muncul, dan jika koneksi diputus, komponen tersebut akan ditambahkan ke pustaka aset.

5. Mengimpor Komponen dari Kode atau Proyek React

Komponen yang dibuat di Framer dapat digunakan di lingkungan React di luar Framer.

Cara Penggunaan

1. Pilih “Copy Import” dari menu lebih lanjut ··· untuk komponen tersebut.

2. Tempel kode import yang telah disalin ke kode React Anda.

Misalnya, jika Anda ingin mendesain tombol di Framer dan membuatnya muncul hanya berdasarkan kondisi tertentu (seperti parameter URL atau lokasi pengguna), Anda dapat menggunakan opsi "Copy Import" untuk menyertakan tombol tersebut dalam kode React Anda. Anda dapat meletakkannya di depan fungsi utama komponen atau menimpanya untuk mengustomisasi perilaku tombol.

Jika masalah terus berlanjut setelah melakukan langkah-langkah ini, silakan hubungi kami melalui halaman kontak Framer.

Pertanyaan yang Sering Diajukan (FAQ)

P. Apakah hanya pengelola ruang kerja yang dapat mengedit komponen pustaka?

• Ya. Anda memerlukan izin Edit di ruang kerja untuk dapat mengedit dan memperbarui, sedangkan Viewer tidak dapat melakukan ini.

P. Tidak bisa memperbarui perubahan jika instansinya diedit?

• Ya. Instansi yang dipisahkan (Detache) sepenuhnya terpisah dari komponen utama, jadi tidak akan terpengaruh oleh pembaruan.

P. Apakah data CMS yang terhubung ke komponen juga dibagikan saat membagikan komponen?

• Tidak. CMS adalah per proyek dan tidak dibagikan dengan komponen, oleh karena itu data CMS tidak akan dibagikan.

Artikel ini adalah terjemahan dan adaptasi dari konten blog resmi Framer ‘Sharing Components’.