00:00:00Ini adalah Penpot, alat desain open-source yang bersaing dengan alat seperti Figma.
00:00:05Memang, awalnya terlihat seperti Figma, tapi perilakunya tidak sama sama sekali.
00:00:10Karena sebenarnya, alat ini menggunakan CSS asli, bukan sesuatu yang harus Anda konversi nanti.
00:00:15Dan itu mengubah masalah serah terima (handoff) secara besar-besaran.
00:00:18Biar saya tunjukkan apa maksud saya.
00:00:20Penpot adalah alat desain UI dan pembuatan prototipe berbasis browser.
00:00:29Sekilas, ya, terdengar seperti Figma atau Sketch.
00:00:32Tapi sebenarnya, inilah perbedaan utamanya.
00:00:35Penpot 100% open-source dan dibangun di atas standar web asli.
00:00:40SVG, CSS Flexbox, Grid, dan HTML.
00:00:43Jadi daripada mendesain di dalam sesuatu yang harus Anda dekode dan destruktur nanti,
00:00:49Anda sudah lebih dekat dengan cara kerja web yang sebenarnya.
00:00:52Anda bisa melakukan hosting sendiri dengan Docker dalam satu perintah,
00:00:54yang akan saya lakukan di video ini, karena itulah yang saya sukai.
00:00:58Versi open-source dari berbagai alat dan melihat bagaimana perbandingannya.
00:01:01Nah dengan Penpot, desainer tetap mendapatkan komponen, tata letak, dan prototipe.
00:01:06Tapi pengembang mendapatkan bagian yang benar-benar penting, output yang terlihat seperti kode asli.
00:01:11Tidak ada lapisan perantara yang aneh, tidak perlu menebak apa yang terjadi.
00:01:14Dan ini gratis.
00:01:15File tak terbatas, kolaborator tak terbatas, itulah mengapa orang peduli dengan ini.
00:01:20Jika Anda menyukai alat open-source dan tips coding yang mempercepat alur kerja Anda,
00:01:23pastikan untuk berlangganan saluran ini.
00:01:25Kami sering merilis video baru.
00:01:27Nah, Penpot adalah alat desain.
00:01:28Jadi mengapa Anda harus peduli, terutama jika Anda seorang pengembang?
00:01:31Karena ini memperbaiki masalah yang sangat spesifik.
00:01:34Masalah saat menyerahkan proyek atau mengubah desain menjadi kode asli.
00:01:39Penpot membuat desain terasa asli untuk web.
00:01:42Jadi saat Anda memeriksa sesuatu, Anda tidak menebak, Anda membacanya.
00:01:46Biar saya tunjukkan.
00:01:48Baik, saatnya demo singkat, teman-teman.
00:01:50Ini berjalan langsung di instance Penpot yang saya host sendiri.
00:01:54Saya menjalankan ini dengan satu perintah Docker Compose up menggunakan file
00:01:58Docker Compose resmi yang baru saja kita konfigurasikan.
00:02:00Ini luar biasa.
00:02:02Jadi butuh beberapa waktu untuk menjalankannya, tapi sekarang setelah aktif, semuanya berfungsi dengan baik.
00:02:07Dan kita mendapatkan halaman arahan yang bagus di sini, tampilan bersih di mana saya bisa membuat proyek baru.
00:02:12Sekarang mari kita buat sesuatu, kartu sederhana saja, tidak ada yang mewah.
00:02:16Hanya sebuah wadah, atur ke flexbox, tambahkan beberapa padding.
00:02:21Saya akan memasukkan judul, teks, dan tombol.
00:02:24Mungkin tambahkan lagi di sini, kartu lain, saya bisa menyalin dan menempelnya.
00:02:28Saya akan melakukan beberapa pengeditan cepat.
00:02:30Kita akan beralih ke mode inspeksi.
00:02:32Dan ini adalah bagian yang penting.
00:02:33Anda mendapatkan struktur yang bersih di CSS asli, properti flexbox, spasi, tata letak.
00:02:39Bukan terjemahan kasar, ini adalah sesuatu yang sudah Anda pahami.
00:02:42Anda bisa menyalin ini dan memasukkannya langsung ke proyek Anda.
00:02:46Anda juga punya varian, token, alur prototipe, dan ekspor sebagai SVG.
00:02:51Itulah hal besarnya di sini.
00:02:52Ini menghilangkan banyak hambatan untuk
00:02:54tim pengembang, terutama ketika Anda mengelola seluruh stack sendiri.
00:02:58Sekarang mari kita bicara tentang bagian di mana sebagian besar pengembang menjadi skeptis.
00:03:02Awalnya, ini terdengar seperti, keren, satu lagi alat desain.
00:03:06Tapi perbedaannya bukan pada tampilannya, melainkan cara kerjanya.
00:03:09Figma mensimulasikan tata letak.
00:03:12Autolayout terinspirasi oleh flexbox, tetapi Anda masih harus menerjemahkan semua ini di
00:03:16kepala Anda.
00:03:17Penpot dimulai jauh lebih dekat dengan CSS asli, jadi
00:03:21ada lebih sedikit konversi mental antara desain dan kode.
00:03:25Lalu ada masalah ketergantungan (lock-in), bukan?
00:03:26Figma menggunakan file eksklusif.
00:03:29Kita punya model harga berbasis kursi.
00:03:31Penpot, open-source, jadi Anda bisa melakukan hosting sendiri.
00:03:34Data Anda tetap dalam format SVG, CSS, dan JSON.
00:03:38Serah terimanya juga berbeda karena di Figma rasanya seperti lapisan tambahan, kan?
00:03:42Mode dev, plugin, langkah tambahan.
00:03:45Di Penpot, semuanya sudah terpasang langsung.
00:03:47Tampilan inspeksi sudah lebih dekat dengan apa yang sebenarnya kita butuhkan.
00:03:50Dan jujur saja, Figma itu hebat.
00:03:53Saya menggunakannya, ini besar, ini adalah ekosistem yang terpoles.
00:03:56Tapi Penpot jelas dibangun dengan mempertimbangkan pengembang sejak awal.
00:04:00Jadi apa yang sebenarnya disukai pengembang tentang ini?
00:04:02Ya, hal terbesar yang sudah saya katakan, bukan?
00:04:04Sederhana, masalah serah terima menjadi lebih kecil.
00:04:07Itu sangat besar bagi kita.
00:04:08Anda tidak perlu lagi melakukan rekayasa balik tata letak.
00:04:11Anda membaca sesuatu yang dipetakan langsung ke CSS.
00:04:15Itu juga muncul di token desain.
00:04:18Warna, spasi, tipografi, semuanya disusun dengan cara yang terasa lebih dekat dengan
00:04:22bagaimana Anda sudah berpikir dalam kode.
00:04:24Dan hosting sendiri adalah masalah besar bagi beberapa tim.
00:04:27Jika Anda peduli dengan privasi, alat internal, CI/CD, semua ini penting, bukan?
00:04:33Tapi open-source, tidak sempurna, tidak ada alat yang sempurna, bahkan Figma, kan?
00:04:37Tapi Penpot bisa kesulitan dengan file yang sangat besar.
00:04:40Ekosistem pluginnya jauh lebih kecil.
00:04:43Dan jika Anda sudah sangat terbiasa dengan Figma, maka akan ada kurva pembelajaran,
00:04:47tapi jujur, sangat mudah untuk dipelajari karena ini adalah cara berpikir yang berbeda.
00:04:51Jadi ya, kurang terpoles di beberapa area, tapi kesenjangan antara desain dan
00:04:56pengembangan jauh lebih kecil, yang sejujurnya adalah apa yang dicari banyak dari kita.
00:04:59Nah, apakah layak digunakan?
00:05:01Menurut saya iya.
00:05:02Itu sangat menyenangkan.
00:05:02Saya menikmati alat seperti ini.
00:05:03Jadi bagi banyak dari Anda pengembang, ya.
00:05:06Jika Anda sedang mengerjakan proyek sampingan atau apa pun yang berat di coding, ini masuk akal,
00:05:10terutama jika Anda peduli untuk menghemat uang, bukan?
00:05:12Anda sedang membangun MVP, Anda membangun sesuatu seperti ini,
00:05:14Anda mencoba menghindari lock-in, dan
00:05:16Anda ingin mendapatkan desain yang diterjemahkan dengan bersih ke dalam kode.
00:05:19Nah, jika Anda berada di perusahaan besar dengan sistem desain yang masif,
00:05:23Anda sudah terbiasa dengan Figma.
00:05:24Jadi Anda mungkin tidak akan beralih ke ini, setidaknya tidak dalam semalam, tapi
00:05:28bukan itu intinya.
00:05:29Penpot tidak perlu menggantikan segalanya agar berguna.
00:05:31Bagi banyak tim, bagi banyak dari Anda, ini mencakup sebagian besar yang Anda butuhkan,
00:05:35ini membuat pengembangan lebih cepat.
00:05:36Dan itulah mengapa lebih banyak pengembang mulai benar-benar mencobanya.
00:05:39Ini memangkas semua waktu serah terima yang diperlukan untuk membawa desain ke kode.
00:05:45Jika Anda ingin mencobanya, mudah.
00:05:46Kunjungi Penpot app, gunakan versi cloud, atau lakukan seperti yang saya lakukan.
00:05:50Host sendiri dengan Docker jika Anda ingin lebih banyak kontrol seperti di sini.
00:05:54Jika Anda menikmati alat open-source dan tips coding seperti ini,
00:05:57pastikan untuk berlangganan saluran Better Stack.
00:05:59Sampai jumpa di video berikutnya.