Alasan Membuat Perpustakaan Komponen

Untuk bekerja secara efisien, penting untuk membangun perpustakaan komponen. Ketika komponen yang sama digunakan kembali di berbagai proyek, perpustakaan memungkinkan Anda untuk mengelola komponen secara terpusat, memperbarui komponen sekaligus, dan menerapkan perubahan di semua lokasi yang menggunakan komponen tersebut. Dengan demikian, Anda dapat menghemat waktu dan menjaga desain yang konsisten terlepas dari skala.

Elemen Apa yang Dapat Dibuat Sebagai Komponen?

Di Framer, hampir semua elemen UI dari yang sederhana hingga yang kompleks dapat dibuat sebagai komponen.

• Tombol

• Footer

• Navigasi

• Bagian Halaman

• Grafik dan Elemen Interaktif

Catatan: Struktur yang rumit pun, jika sering digunakan, akan lebih efisien jika dibuat sebagai komponen.

Cara Menambahkan Komponen ke Perpustakaan

1. Klik tab Assets pada panel kiri

2. Pilih komponen yang ingin disimpan

3. Klik menu lebih banyak (⋯) di samping nama komponen, pilih Library > Add

Mengambil Komponen dari Perpustakaan

1. Buka Quick Menu dengan ⌘ + / (Mac) atau Ctrl + / (Windows)

2. Cari atau telusuri komponen yang tersedia

Memperbarui Komponen di Berbagai Proyek

Ketika Anda mengubah komponen yang telah terdaftar di perpustakaan, tombol Update akan diaktifkan di semua proyek yang menggunakan komponen tersebut.

1. Cari komponen yang akan diperbarui di tab Assets

2. Klik tombol Update

Anda dapat memperbarui semua komponen sekaligus tanpa pekerjaan manual hanya dengan mengklik tombol update.

Tips Manajemen Komponen

1. Menetapkan Konvensi Penamaan

• Gunakan tanda garis miring untuk folder.
  Misalnya, jika Anda menetapkan nama komponen menu, Navigation/Menu akan dikelompokkan di bawah folder "Navigasi".

• Tentukan nama komponen dengan struktur yang mencakup status, tema, dan varian.
  Contoh: Buttons/Navigation/PrimaryButton

2. Sentralisasi Komponen

• Simpan semua komponen dalam satu proyek untuk memudahkan pembaruan dan penggunaan kembali.

3. Membuat Varians Berdasarkan Breakpoint

• Coba sertakan Desktop, Tablet, Phone dalam nama varian komponen. FramerFramer secara otomatis memilih varian yang sesuai untuk perangkat.

4. Mengatur Constraints

• Tetapkan lebar dan tinggi minimum/maksimum dengan jelas. Ukuran komponen akan beradaptasi sesuai niat saat ukuran layar diubah.

Tulisan ini adalah terjemahan dan adaptasi dari konten blog resmi Framer berjudul ‘Best practices for setting up a component library’.