Penpot bertemu dengan sumber terbuka dan alat desain – Beragampengetahuan

Artikel ini disponsori oleh Penpot

Penpot adalah alat desain sumber terbuka gratis yang memungkinkan kolaborasi nyata antara desainer dan pengembang. Desainer dapat membuat prototipe interaktif dan sistem desain dalam skala besar, sementara pengembang dapat menikmati kode siap pakai dan membuat alur kerja mereka sederhana dan cepat karena dibuat menggunakan teknologi web dan dijalankan di browser, serta telah menerima 33 ribu peluncuran di GitHub.

Antarmuka pengguna terasa intuitif dan membuat pekerjaan selesai dengan mudah, bahkan untuk non-desainer (bersalah!). Anda dapat menyelesaikan pekerjaan dengan cara yang sama dan kualitas yang sama menggunakan alat sumber tertutup lain yang lebih populer seperti Figma.

Mengapa sumber terbuka itu penting

Sebagai seseorang yang menggunakan open source komersial setiap hari, saya sangat yakin ini adalah cara untuk lebih dekat dengan pengguna dan membuka tingkat pengiriman baru. Open source menghadirkan tingkat tanggung jawab dan fleksibilitas baru pada alat.

Pengembang adalah tipe pengguna yang berbeda. Ketika kami menemukan kekhasan atau kesenjangan dalam pengalaman pengguna, naluri pertama kami adalah bermain detektif dan mencari tahu mengapa pola ini menyusahkan apa yang telah kami lakukan. Ketika kode bersifat open source, kami biasanya langsung masuk ke kode sumber dan mengajukan pertanyaan serta memberikan saran tentang cara memperbaikinya. Setidaknya, itulah mimpinya.

Yang terpenting, open source memungkinkan Anda dan tim Anda melakukannya Dihosting sendirimemberi Anda lapisan privasi dan kontrol ekstra, atau setidaknya solusi yang lebih hemat biaya jika Anda memiliki waktu dan keterampilan untuk melakukan DIY.

Jika segala sesuatunya dilakukan dengan benar dan tim mampu mendapatkan keuntungan jangka panjang, open source komersial adalah strategi yang saling menguntungkan.

Memperkenalkan: Sistem plug-in Penpot

Berbicara tentang skalabilitas open source, Penpot memiliki PenpotHub Open Source Home templat dan baru dirilis plugin galeri. Jadi sekarang, jika ada fitur yang hilang, Anda tidak perlu langsung beralih ke basis kode – Anda dapat membuat plugin untuk mengimplementasikan fungsionalitas yang Anda perlukan. Anda bahkan dapat menyajikannya dari localhost!

Buat plugin Penpot

Dalam hal plugin, membuatnya sangatlah ergonomis. Pertama-tama, beberapa kerangka kerja sudah memiliki templat tetap. Saya membuat templat untuk SolidJS di PR ini – kekuatan sumber terbuka!

Saat menggunakan Vite, plug-in adalah aplikasi satu halaman; jika Anda pernah membuat aplikasi Hello World menggunakan Vite, Anda sudah memiliki kemampuan yang diperlukan untuk membuat plug-in. Yang terbaik dari semuanya, tim Penpot memiliki beberapa paket untuk memberi Anda permulaan dalam prosesnya:

npm install @penpot/plugin-styles

Ini akan memungkinkan Anda menggunakan pemuat CSS untuk mengimpor ke atau dari CSS @penpot/plugin-styles/styles.css. JavaScript API tersedia melalui objek window, tetapi jika plugin Anda menggunakan TypeScript, Anda perlu mengajarkannya:

npm add -D @penpot/plugin-types

dengan tipe kamu yang seperti ini node_modulesAnda dapat muncul tsconfig.json dan tambahkan types tiba compilerOptions.

{
  "compilerOptions": {
    "types": ["@penpot/plugin-types"]
  }
}

Penyedia layanan bahasa dan kompiler TypeScript di editor sekarang akan menerima penpot sebagai namespace yang valid, dan Anda akan menyelesaikan Penpot API secara otomatis di seluruh proyek Anda. Misalnya, mendefinisikan plugin Anda akan terlihat seperti ini:

penpot.ui.open("Your Plugin Name", "", {
  width: 500,
  height: 600
})

Langkah terakhir adalah mendefinisikan manifes plugin manifest.json file dan pastikan itu terletak di direktori outpot Vite. Manifes akan menunjukkan lokasi setiap aset dan izin apa yang diperlukan plugin Anda agar berfungsi:

{
  "name": "Your Plugin Name",
  "description": "A Super plugin that will win Penpot Plugin Contest",
  "code": "/plugin.js",
  "icon": "/icon.png",
  "permissions": [
    "content:read",
    "content:write",
    "library:read",
    "library:write",
    "user:read",
    "comment:read",
    "comment:write",
    "allow:downloads"
  ]
}

Setelah pengaturan awal selesai, komunikasi antara Penpot API dan antarmuka plug-in akan dilakukan melalui sistem pesan dua arah, tidak jauh berbeda dengan komunikasi menggunakan Web-Worker.

Jadi untuk mengirim pesan dari plugin Anda ke Penpot API Anda dapat melakukan hal berikut:

penpot.ui.sendMessage("Hello from my Plugin");

Untuk menerimanya kembali, Anda perlu meminta window Objek plugin (cakupan tingkat atas):

window.addEventListener("message", event => {
  console.log("Received from Pendpot::: ", event.data);
})

Kiat kinerja cepat: Jika Anda membuat plugin yang lebih kompleks dengan tampilan atau bahkan rute berbeda, Anda memerlukan logika pembersihan. Sebagian besar kerangka kerja memberikan ergonomi yang baik untuk melakukan hal ini; React, misalnya, melakukan hal ini melalui pernyataan return mereka.

useEffect(() => {
  function handleMessage(e) {
    console.log("Received from Pendpot::: ", event.data);
  }
  window.addEventListener('message', handleMessage);

  return () => window.removeEventListener('message', handleMessage);
}, []);

Padat punya onMount Dan onCleanup Pembantunya:

onMount(() => {
  function handleMessage(e) {
    console.log("Received from Penpot::: ", event.data);
  }
  window.addEventListener('message', handleMessage);
})

onCleanup(() => {
  window.removeEventListener('message', handleMessage);
})

atau dengan @solid-primitive/event-listener Pustaka tambahan, sehingga akan otomatis dibuang:

import { makeEventListener } from "@solid-primitives/event-listener";

function Component() {

  const clear = makeEventListener(window, "message", handleMessage);

  // ...
  return (<span>Hello!</span>)
}

Dalam dokumentasi resmi, terdapat panduan langkah demi langkah yang memandu Anda melalui proses pembuatan, pengujian, dan penerbitan plugin Anda. Bahkan mungkin membantu Anda.

Jadi tunggu apa lagi?

Kontes Plugin: Bayangkan, Bangun, Menangkan

Nah, mungkin Anda sedang menunggu dorongan motivasi itu. Tim Penpot memikirkan hal ini, itulah sebabnya mereka meluncurkan kontes plugin!

Untuk kompetisi ini, mereka menginginkan plugin yang berfungsi penuh; plugin tersebut harus open source dan menyertakan dokumentasi yang komprehensif. Pengenalan mendetail tentang fungsi, instalasi, dan penggunaannya. Hadiah pertama bernilai US$1.000 dan akan dinilai berdasarkan inovasi, fungsionalitas, kegunaan, kinerja, dan kualitas kode. Kompetisi akan diadakan mulai 15 November hingga 15 Desember.

pemikiran terakhir

Jika Anda memutuskan untuk membuat sebuah plugin, saya ingin tahu apa yang sedang Anda buat dan tumpukan apa yang Anda pilih. Beri tahu saya di komentar di bawah atau di BlueSky!

Hasilkan $200 seminggu
Dikutip dari artikel di Smashing Magazine – Untuk Desainer dan Pengembang Web