Belajar Membuat Reusable Component di Penpot

Halo! Kamu mungkin pernah mendengar tentang Penpot sebagai alternatif gratis dari Figma. Tapi tahukah kamu bahwa Penpot punya salah satu fitur paling powerful untuk desainer yang ingin bekerja lebih efisien? Ya, itu namanya reusable component atau komponen yang bisa digunakan berkali-kali.

Di artikel ini, kita akan explore fitur reusable component di Penpot secara mendalam. Mulai dari apa itu reusable component, kenapa kita harus menggunakannya, hingga langkah-langkah praktis membuat reusable component yang bisa langsung kamu terapkan di project kamu. Siap? Yuk kita mulai!

Apa itu Reusable Component?

Reusable component adalah sebuah elemen desain atau sekumpulan elemen yang dibuat sekali, kemudian bisa digunakan berkali-kali di berbagai tempat dalam desain kamu. Bayangkan aja kamu punya satu master copy (kita sebut main component), dan kamu bisa membuat salinannya (instance) sebanyak yang kamu butuh tanpa perlu menggambar ulang dari awal.

Di Penpot, ketika kamu membuat reusable component, kamu sebenarnya membuat hubungan yang terhubung antara main component dengan semua copy-nya. Artinya, kalau kamu update main component-nya, semua copy akan otomatis ikut berubah. Ini adalah magic dari reusable component yang membuat workflow desain jadi jauh lebih efisien.

Kenapa Kita Harus Menggunakan Reusable Component?

Ada beberapa alasan mengapa reusable component adalah fitur yang sangat penting dan harus kamu kuasai:

1. Konsistensi Desain

Dengan menggunakan reusable component, kamu memastikan bahwa elemen yang sama akan selalu terlihat identik di seluruh desain. Misalnya, tombol "Add to Cart" di halaman product listing akan terlihat sama dengan tombol "Add to Cart" di halaman product detail. Ini penting banget untuk user experience yang konsisten dan brand identity yang kuat.

2. Hemat Waktu

Bayangkan kamu harus desain 50 halaman, dan setiap halaman punya 5 tombol yang sama. Kalau kamu bikin satu per satu, itu berarti 250 tombol yang harus dibuat. Dengan reusable component, kamu cukup bikin satu tombol sebagai main component, lalu copy-paste berkali-kali. Dalam hitungan menit, semua tombol sudah ada. Jauh lebih cepat!

3. Maintenance yang Mudah

Ini adalah benefit yang paling underrated tapi super valuable. Misalnya klien tiba-tiba minta ganti warna tombol dari biru jadi hijau. Kalau kamu punya reusable component, kamu tinggal edit main component sekali, dan semua 250 tombol langsung berubah. Nggak perlu cari-cari satu per satu dan edit manual. Dapat bayangkan betapa menghemat waktu ini?

4. Kolaborasi Tim yang Lebih Smooth

Kalau kamu kerja di tim, reusable component membuat collaboration jauh lebih mudah. Semua orang pake komponen yang sama, jadi nggak ada confusion atau miscommunication tentang bagaimana suatu elemen harus terlihat. Plus, kalau ada perubahan design decision, kamu bisa update sekali di main component dan semua orang langsung bisa lihat update-nya.

5. Scalability untuk Design System

Reusable component adalah foundation dari design system yang scalable. Dengan memanfaatkan components dengan baik, kamu bisa membangun design system yang bisa grow bersama produk kamu. Dari satu tombol, bisa berkembang menjadi button library, form library, card library, dan seterusnya.

6. Fleksibilitas dengan Override

Meskipun component-nya sama, kamu tetap bisa customize instance-nya sesuai kebutuhan. Kamu bisa ubah teks, warna, atau properties lainnya di satu instance tanpa mempengaruhi main component atau instance lainnya. Jadi kamu dapat the best of both worlds: konsistensi dan fleksibilitas.

Langkah-Langkah Pembuatan Reusable Component di Penpot

Sekarang kita akan masuk ke bagian praktis. Saya akan menunjukkan langkah-langkah membuat reusable component di Penpot dengan contoh yang sederhana tapi powerful: membuat button component.

Step 1: Buat Elemen yang Akan Dijadikan Component

Pertama-tama, kamu perlu membuat elemen yang ingin dijadikan component. Dalam contoh kita, kita akan membuat sebuah button.

• Buka Penpot dan buat file baru atau buka file yang sudah ada.
• Di canvas, buat shape rectangle untuk button background. Misalnya, ukuran 120x48 pixels dengan warna biru (#0066FF).
• Tambahkan text di dalam rectangle tersebut. Ketik "Click Me" atau teks lainnya. Sesuaikan ukuran font dan warna agar terlihat baik.
• Pastikan rectangle dan text sudah di-group (Ctrl+G atau right-click → Group).
• Sekarang kamu punya satu button yang siap dijadikan component.

Tips: Jangan langsung create component jika buttonnya masih belum sempurna. Pastikan dulu styling-nya sudah benar, spacing-nya bagus, dan semuanya terlihat professional.

Step 2: Create Component dari Elemen

Sekarang kita akan convert elemen button yang sudah kita buat menjadi reusable component.

• Pastikan button (group yang sudah dibuat) masih ter-select.
• Ada dua cara untuk create component. Pilih salah satu:
  • Cara 1 (Keyboard Shortcut): Tekan Ctrl+K (Windows) atau Cmd+K (Mac).
  • Cara 2 (Right-click Menu): Right-click di layer, pilih "Create component".
  
• Setelah kamu create component, kamu akan melihat layer button berubah menjadi component (ada icon component di samping layer name-nya).
• Di sidebar sebelah kanan, kamu akan lihat panel Design menunjukkan bahwa ini adalah main component.

Selamat! Kamu sudah create main component pertama kamu. Ini adalah source of truth dari component kamu. Semua perubahan yang kamu buat di main component akan reflected di semua instance-nya.

Step 3: Rename Component untuk Organisasi yang Lebih Baik

Sekarang mari kita rename component agar mudah dicari dan diorganisir kemudian.

• Component baru kamu mungkin bernama "Group" atau sesuatu yang generic. Kita perlu rename ini menjadi nama yang lebih descriptive.
• Right-click di main component (di sidebar kiri atau di canvas), pilih rename (atau dobel-klik di layer name).
• Rename menjadi sesuatu yang descriptive. Misal: "Button/Primary" atau "Button Primary".

• Best practice adalah menggunakan slash (/) untuk group related components. Jadi kalau kamu punya button dengan variant berbeda, kamu bisa namain "Button/Primary", "Button/Secondary", "Button/Tertiary", dan seterusnya.
• Setelah rename, component-nya akan terorganisir lebih baik di Assets panel.

Step 4: Akses Component dari Assets Panel

Sekarang component kamu siap digunakan. Mari kita lihat dimana component itu berada.

• Lihat sidebar sebelah kiri. Klik tab "Assets" (sebelah tab "Layers").
• Di Assets panel, kamu akan melihat main component yang baru aja kamu buat di bawah kategori "Components".

• Kamu bisa lihat thumbnail dari component kamu di sini. Kalau component kamu punya nama dengan slash (seperti "Button/Primary"), component-nya akan digroup dan lebih mudah ditemukan.

Step 5: Gunakan Component dengan Drag and Drop

Sekarang mari kita gunakan component yang sudah dibuat.

• Di canvas, buat area baru atau halaman baru untuk testing.
• Buka Assets panel dan cari component button yang sudah dibuat.
• Drag component tersebut ke canvas di mana kamu ingin menempatkan button.
• Poof! Sebuah instance dari button component sudah muncul di canvas. Ini adalah copy yang linked ke main component.
• Ulangi langkah di atas untuk membuat beberapa instance button di tempat berbeda. Kamu bisa drag berkali-kali dari Assets panel.

Step 6: Override Instance untuk Customization

Salah satu fitur powerful dari reusable component adalah kamu bisa customize instance tanpa mengubah main component.

• Pilih salah satu instance button yang sudah kamu buat.
• Double-click untuk masuk ke "edit mode" dari instance tersebut.
• Sekarang kamu bisa edit elemen yang ada di dalamnya. Misalnya, kamu bisa:
  • Ubah text "Click Me" menjadi "Add to Cart"
  • Ubah warna background dari biru menjadi hijau
  • Ubah ukuran padding atau styling lainnya
• Setelah selesai edit, klik outside atau tekan Escape untuk exit edit mode.
• Perubahan yang kamu buat hanya akan affect instance tersebut, bukan main component-nya. Instance lainnya akan tetap sama.

Tips: Kamu bisa juga lihat override yang sudah kamu buat di Design panel. Ada section "Overrides" yang menunjukkan property apa saja yang sudah di-override.

Step 7: Update Main Component dan Lihat Magic Terjadi

Ini adalah momen yang paling satisfying. Sekarang kita akan update main component dan lihat semua instance yang tidak di-override akan berubah secara otomatis.

• Pergi ke main component. Kamu bisa klik "Show main component" di Design panel ketika instance ter-select, atau cari di Assets panel dan double-click.

• Sekarang kamu bisa edit main component. Misalnya, kita mau ubah default border-radius menjadi lebih rounded.
• Klik background rectangle dari button, di Design panel ubah border-radius menjadi 8px (atau value lain yang kamu inginkan).
• Sekarang lihatlah! Kalau kamu kembali ke canvas dimana kamu punya multiple instances, semua instance yang belum di-override akan mengikuti perubahan border-radius tersebut. Tapi instance yang kamu ubah warnanya tadi akan tetap dengan warna override-nya (karena warna adalah property yang di-override, bukan border-radius).

Ini adalah power dari reusable component di Penpot. Maintenance jadi super mudah!

Step 8: Reset Override (Optional)

Kalau kamu sudah override instance tapi kemudian berubah pikiran dan ingin back to the main component styling, Penpot punya fitur untuk ini.

• Pilih instance yang sudah di-override.
• Di Design panel, kamu akan lihat section "Overrides" menunjukkan apa yang sudah di-override.

• Klik icon "Reset" atau right-click di instance dan pilih "Reset overrides" untuk remove semua customization dan back to main component state.

Step 9: Nested Components (Advanced)

Kalau kamu ingin bikin component yang lebih complex, kamu bisa nest component di dalam component. Misal, kamu bisa bikin Button component, Icon component, dan Label component, lalu gabung mereka menjadi Card component.

• Buat button component terlebih dahulu (atau gunakan yang sudah ada).
• Buat component baru untuk card yang berisi text.

• Double-click card component untuk masuk ke dalamnya.
• Dari Assets panel, drag button component ke dalam card component.
• Sekarang card component contain button component. Ini adalah nested component.
• Ketika kamu edit main button component, perubahan akan reflected di button yang ada di dalam card component juga.

Nested component sangat useful untuk membuat complex UI patterns sambil maintain consistency di setiap level.

Step 10: Component Grouping untuk Organization

Kalau kamu sudah punya banyak component, akan sangat helpful untuk organize mereka dengan grouping.

• Di Assets panel, right-click di component yang ingin di-group.
• Pilih "Rename component" atau cukup ubah nama component di Design panel.
• Gunakan slash (/) untuk create groups. Misal, kalau kamu punya button dengan berbagai state, kamu bisa rename mereka:
  • Button/Primary
  • Button/Secondary
  • Button/Disabled
• Atau kalau kamu punya berbagai jenis component, kamu bisa organize dengan:
  • Input/Text
  • Input/Checkbox
  • Input/Radio
  • Card/Product
  • Card/User
• Penpot akan automatically create folder structure di Assets panel berdasarkan nama component kamu. Ini membuat navigation jauh lebih mudah, terutama kalau kamu punya ratusan component.

Conclusion

Reusable component adalah fundamental building block dari efficient design workflow dan scalable design system di Penpot. Dengan memahami konsep dan langkah-langkah pembuatan reusable component, kamu sudah siap untuk take your design game ke level berikutnya.

Yang paling penting diingat:

1. Create main component yang well-thought-out dan complete.
2. Gunakan naming convention yang descriptive dan organized (gunakan slash untuk grouping).
3. Leverage override feature untuk customization tanpa breaking the connection ke main component.
4. Update main component ketika ada design change dan lihat semua instance update automatically.
5. Organize component dengan grouping kalau jumlahnya sudah banyak.

Mulai sekarang, jangan bikin elemen yang sama berkali-kali manual. Gunakan reusable component dan rasakan bagaimana design workflow kamu menjadi jauh lebih produktif dan konsisten!

Happy designing dengan Penpot!

Created by Arief Taufik Rahman