Selamat datang di dunia Penpot! Kalau kamu baru mulai belajar desain UI/UX atau lagi nyari alternatif tool desain yang powerful tapi gratis, kamu ada di tempat yang tepat. Penpot punya segudang fitur keren yang bakal bikin workflow desainmu makin lancar dan menyenangkan. Di artikel ini, kita akan bahas fitur-fitur utama Penpot yang wajib kamu kuasai sebagai desainer UI/UX. Yuk, langsung aja kita mulai!
Komponen dan Sistem Komponen
Contoh pembuatan komponen
Komponen di Penpot adalah elemen yang bisa kamu gunakan berkali-kali tanpa bikin ulang. Buat komponen dengan Ctrl+K, kemudian drag ke canvas kapan pun butuh. Yang seru, kalau kamu edit main component, semua salinannya akan update otomatis.
Sebelum master component diganti
Setelah master component diganti, child akan mengikuti
Kamu juga bisa override properties di salinan komponen. Misalnya, tombol biru di satu tempat tapi perlu merah di tempat lain, tinggal override warnanya aja. Penpot juga support nested components, jadi kamu bisa gabung komponen dalam komponen lain untuk struktur yang lebih complex.
Contoh: Buat komponen button sekali, gunakan di ratusan halaman. Kalau design ganti, edit satu kali dan semua otomatis terupdate.
Manfaat: Hemat waktu, konsistensi terjaga, kolaborasi lebih mudah.
Variant Komponen
Variant memungkinkan kamu punya beberapa versi dari satu komponen tanpa bikin komponen terpisah. Misalnya, satu komponen button dengan variant: size (small/medium/large) dan state (default/hover/pressed/disabled).
Untuk membuat variant, buat main component, lalu buat duplicate sebagai variant pertama. Kelompokkan dengan memberi nama property dan values-nya. Ketika pakai komponen, tinggal pilih kombinasi yang sesuai dari dropdown.
Contoh lain: Kartu berita dengan 3 property: ada_gambar (yes/no), ada_button (yes/no), ukuran (compact/spacious). Cukup satu komponen dengan 8 kombinasi variant.
Manfaat: Design system lebih scalable, dokumentasi jelas, lebih sedikit komponen di Assets panel.
Prototyping dan Interactive Flows
Fitur ini bikin kamu bisa membuat simulasi interaksi sebelum di-develop. Buka tab Prototype, pilih elemen (misalnya tombol), drag lingkaran yang muncul ke board tujuan. Done! Kamu bisa add triggers (click, hover, dll) dan actions (navigate, overlay, close, dll).
Penpot juga support transitions (dissolve, slide, push) untuk membuat prototype lebih hidup. Fitur overlay berguna untuk modal, popup, atau tooltip. Setelah selesai, share link untuk di-review orang lain.
Contoh: Onboarding app dengan 4 screen: welcome → signup → permission → success. Link setiap button dengan transition slide. Stakeholder bisa interact dengan prototype sebelum development dimulai.
Manfaat: Komunikasi ide lebih efektif, feedback lebih awal, user testing lebih cepat.
Kolaborasi Real-Time
Beberapa orang bisa design di file yang sama secara bersamaan, seperti Google Docs untuk desain. Kamu bisa lihat cursor teman-teman, lihat perubahan mereka instant, dan semua ter-sync real-time.
Fitur comments memungkinkan feedback langsung di desain. Mention orang dengan @, resolve comment setelah diimplementasikan. Kamu juga bisa share link dengan permission: can edit, can comment, atau can view. Yang keren, unlimited seats di plan gratis!
Contoh: Tim 3 desainer + 1 PM. Desainer A fokus hero section, B fokus features, C fokus footer. PM lihat progress real-time dan comment langsung di elemen yang perlu revise. Designer langsung tahu dan bisa adjust.
Manfaat: Workflow lebih cepat, feedback langsung, nggak perlu back-and-forth chat panjang.
CSS Flex dan Grid Layout
Ini fitur yang beda dari tool lain. Penpot pakai CSS Flexbox dan Grid untuk layout, yang artinya desainmu akan sama dengan implementasi di code.
Untuk Flex Layout (satu dimensi): pilih container, klik + di Layouts, pilih Flex. Atur flow direction, alignment, justification, gap. Untuk Grid Layout (dua dimensi): pilih Grid, define columns dan rows, atur properties.
Yang paling seru, code CSS yang kamu buat di Penpot bisa di-copy langsung ke codebase! Developer nggak perlu guess atau re-implement ulang.
Contoh: Design card blog. Apply Flex dengan direction column. Gambar, judul, excerpt, author info, tombol tersusun vertical dengan spacing konsisten. Kalau ukuran card berubah, semua elemen auto-adjust. Responsive design sungguhan!
Manfaat: Design benar-benar responsive, accurate ke implementasi, handoff developer jadi smooth.
Design Tokens
Design tokens adalah variables untuk design decisions: colors, typography, spacing, shadows, dll. Misal, daripada pakai #0066FF di berbagai tempat, buat token color.primary dengan value tersebut. Kalau perlu ganti warna, edit satu kali di token, semua elemen otomatis update.
Naming pakai hierarchical: color.brand.primary, spacing.medium, typography.heading.large. Penpot juga support aliasing (satu token reference token lain), token sets untuk group berbeda, dan themes untuk light/dark mode.
Contoh: App dengan light dan dark mode. Buat token color.background: light mode value #FFFFFF, dark mode value #1A1A1A. Semua elemen reference token ini. Switch theme? Seluruh desain berubah otomatis!
Manfaat: Consistency maksimal, collaboration designer-developer lebih mudah, scaling design system jadi simple.
Shared Libraries dan Templates
Library adalah file Penpot yang di-publish biar bisa diakses di project lain. Buat satu library dengan components, tokens, assets favorit kamu, publish, lalu semua project bisa gunakan. Kalau ada update di library, semua project bisa update.
Penpot juga punya public libraries dan templates siap pakai dari community. Atau buat template sendiri sebagai starting point untuk project baru.
Contoh: Tim punya 10 project client berbeda, tapi semua butuh button, form input, card yang sama. Bikin satu "Company UI Kit" library. Semua project connect ke library ini. Fix bug di button? Update library sekali, semua 10 project otomatis dapat fix tersebut.
Manfaat: Consistency across products, mengurangi duplicate work, onboarding designer baru lebih mudah.
Inspect Mode dan Code Generation
Fitur yang developer sangat suka. Klik tab Inspect, lalu click elemen di canvas. Penpot menampilkan properties lengkap (dimensions, colors, typography, dll) dan code yang sudah di-generate: CSS, HTML, SVG.
Developer tinggal copy code dan paste ke codebase. Nggak perlu guess atau re-implement, karena Penpot generate code yang sesuai dengan web standards (Flexbox, CSS Grid, standard CSS properties).
Contoh: Homepage design sudah selesai. Developer buka file, Inspect Mode, click hero section. Penpot tunjukkan CSS Flex properties yang sudah di-generate. Developer copy-paste CSS, layout langsung match dengan desain. Smooth!
Manfaat: Design-to-development handoff lebih smooth, error berkurang, implementasi lebih cepat.
Kesimpulan
Penpot adalah tool powerful dengan fitur-fitur yang dirancang untuk modern design workflow. Dari components yang scalable, prototyping untuk interactive experiences, kolaborasi real-time, CSS layouts untuk responsive design, design tokens untuk consistency, libraries untuk reusability, hingga inspect mode untuk smooth handoff—semuanya gratis dan open-source.
Selamat mulai dengan Penpot! Happy designing!
Created by Arief Taufik Rahman
