Penulis XDA yang mengambil jalan memutar melalui Figma sebelum membangun ulang dashboard Home Assistant mereka membuat poin yang lebih besar daripada “desain dashboard Anda terlebih dahulu.” Lovelace adalah alat yang kuat tetapi UI edit-in-place-nya mendorong akumulasi — setiap sensor baru menambahkan kartu, setiap kartu bersaing untuk perhatian, dan setelah enam bulan tidak ada yang tahu dashboard itu untuk apa. Membuat sketsa tata letak target dalam alat desain asli memaksa Anda untuk memilih apa yang benar-benar harus ada di iPad yang dipasang di dinding dan apa yang harus hidup satu sentuhan jauh.
Kami menguji tujuh aplikasi desain di desktop untuk merencanakan dashboard Home Assistant sebelum Anda menyentuh blok YAML tunggal. Setiap pilihan bekerja di Windows, macOS, atau Linux (Sketch hanya Mac). Kami mengeringkat berdasarkan seberapa cepat Anda dapat pergi dari kanvas kosong ke mockup dashboard dengan ikon Material asli, widget cuaca asli, dan tata letak yang dapat Anda serahkan kepada editor Lovelace.
Apa yang harus dicari dalam alat desain untuk dashboard HA
- Tingkat gratis yang cocok untuk proyek hobi. Anda membangun satu dashboard, bukan mengirimkan produk. Apa pun yang membatasi jumlah artboard terlalu agresif tidak termasuk.
- Perpustakaan ikon. Home Assistant menggunakan Material Design Icons di mana-mana. Alat dengan plugin MDI atau ekspor ikon yang ramah salinan menghemat berjam-jam.
- Grid dan spasi 8pt. Lovelace menggunakan grid 12 kolom secara default. Alat yang membuat pekerjaan grid tanpa rasa sakit menghasilkan mockup yang lebih cepat.
- Ekspor ke gambar yang dapat dibagikan atau sematkan. Anda ingin menempelkan mockup ke forum HA atau membagikannya dengan keluarga yang harus menggunakan dashboard.
- Penggunaan kembali berbasis komponen. Kartu berulang di seluruh dashboard. Alat yang memungkinkan Anda membangun komponen kartu dan menggunakannya kembali lebih cepat daripada memulai dari awal setiap layar.
Perbandingan cepat
| Aplikasi | Terbaik untuk | Platform | Paket gratis | Harga awal | Catatan |
|---|---|---|---|---|---|
| Figma | Desain UI berfitur lengkap | Web/Win/Mac | 3 file, draft pribadi tak terbatas | 15 USD/bln Pro | Pilihan artikel XDA |
| Penpot | Figma open-source | Web/Win/Mac/Linux | Semua fitur gratis | Gratis (self-host) | Dapat di-self-host, tanpa kunci |
| Excalidraw | Sketsa whiteboard cepat | Web/Win/Mac/Linux | Semua fitur gratis | Gratis | Estetika tangan-diatur |
| tldraw | Whiteboard modern | Web/Win/Mac/Linux | Semua fitur gratis | Gratis | Kolaborasi real-time |
| Sketch | Desain asli Mac | Mac | Uji coba 30 hari | 12 USD/bln | Hanya Mac |
| Whimsical | Hibrida tata letak + flowchart | Web/Win/Mac/Linux | 4 papan | 12 USD/bln | Kit kerangka kerja bawaan |
| Adobe XD | Integrasi tumpukan Adobe | Win/Mac | Gratis (beku) | Termasuk dalam CC | Pengembangan beku tetapi masih berjalan |
Aplikasinya
1. Figma — Terbaik untuk desain UI berfitur lengkap
Figma adalah alat yang digunakan oleh artikel XDA, dan dengan alasan yang bagus. Paket gratis mencakup tiga file dengan draft pribadi tak terbatas, komunitas memiliki perpustakaan ikon Material Design yang dapat Anda letakkan di proyek apa pun, dan sistem grid selaras rapi dengan tata letak 12 kolom Lovelace. Komponen dan Auto Layout berarti Anda membangun “kartu sensor” sekali dan menggunakannya kembali di mana-mana.
Di mana ini kurang: Batas file gratis tiga file berhasil dengan cepat jika Anda menyimpan file terpisah per dashboard. Memerlukan akun (sekarang dimiliki Adobe).
Harga:
- Gratis: 3 file dengan draft pribadi tak terbatas.
- Pro: 15 USD/bln per editor untuk file tak terbatas dan perpustakaan tim.
Platform: Web, aplikasi desktop Windows, aplikasi desktop macOS.
Unduh: Situs resmi Figma
Garis bawah: Pilihan yang paling didukung. Jika Anda sudah memiliki akun Figma, gunakannya. Jika Anda peduli privasi tentang cloud Adobe/Figma, lompati ke Penpot.
2. Penpot — Setara Figma open-source terbaik
Penpot adalah alat desain open-source sepenuhnya yang menjalankan rangkaian fitur yang sama dengan Figma (Auto Layout, komponen, kolaborasi real-time) baik melalui layanan terhosting mereka atau wadah Docker Anda sendiri. Untuk pengguna Home Assistant yang self-host, keselarasan itu layak dengan biaya penyiapan — file desain Anda dan tumpukan rumah pintar Anda hidup di mesin yang sama.
Di mana ini kurang: Ekosistem plugin ikon lebih tipis. Beberapa alur kerja asli Figma (variabel, Auto Layout lanjutan) mendarat lebih lambat daripada di Figma.
Harga:
- Tingkat gratis di Penpot terhosting dengan file tak terbatas.
- Gratis selamanya jika Anda self-host dengan Docker.
Platform: Web, Windows, macOS, Linux, self-hosted.
Unduh: Situs resmi Penpot
Garis bawah: Alat desain yang cocok dengan ethos self-hosting Home Assistant. Dikirim di mana pun Figma berada, tanpa akun Adobe.
3. Excalidraw — Terbaik untuk sketsa cepat
Excalidraw adalah alat whiteboard bergaya tangan-diatur yang mengubah halaman kosong menjadi tata letak kasar dalam sekitar 90 detik. Sempurna untuk lintasan pertama — Anda tidak mencoba menguncikan ukuran kartu dengan sempurna, Anda mencoba memutuskan apa yang harus pergi ke mana. Simpan file secara lokal sebagai .excalidraw, bagikan dengan tautan, atau ekspor ke PNG atau SVG.
Di mana ini kurang: Bukan alat UI asli. Setelah Anda mengetahui tata letaknya, Anda akan ingin menggambarnya ulang di Figma atau Penpot untuk versi yang dipoles.
Harga:
- Gratis dan open-source di bawah lisensi MIT.
- Excalidraw+ (dihosting dengan kolaborasi real-time): 7 USD/bln.
Platform: Web, Windows, macOS, Linux (sebagai Progressive Web App atau Electron).
Unduh: Aplikasi web Excalidraw atau GitHub Excalidraw
Garis bawah: Alat untuk lintasan sketsa pertama. Bukan untuk mockup akhir.
4. tldraw — Whiteboard modern terbaik
tldraw adalah alat whiteboard modern dengan kolaborasi real-time, kanvas tak terbatas, dan bahasa desain di antara Miro dan Figma. Fitur Make Real-nya (ubah sketsa menjadi HTML interaktif dengan LLM) menyenangkan untuk membuat prototipe kartu; perpustakaan bentuknya cukup luas untuk membuat mockup dashboard tanpa beralih alat.
Di mana ini kurang: Tidak dirancang sebagai alat UI, jadi disiplin grid ada pada Anda. Kolaborasi real-time memerlukan layanan terhosting.
Harga:
- Gratis dan open-source di bawah Lisensi Standar tldraw (serupa MIT).
- Self-hosted atau tertanam gratis.
Platform: Web, Windows, macOS, Linux (PWA dan Electron).
Unduh: Aplikasi web tldraw atau GitHub tldraw
Garis bawah: Pilih ini jika Excalidraw terlalu kasar dan Figma terlalu berat. Whiteboard kelas menengah.
5. Sketch — Alat desain asli Mac terbaik
Sketch adalah alat desain UI asli di Mac. Kinerja aplikasi asli masih unggul dari pesaing berbasis Electron, simbol dan perpustakaan matang, dan sinkronisasi Sketch Cloud bersifat opsional (Anda dapat menyimpan file Anda sepenuhnya secara lokal). Untuk alur kerja Mac-only masih alat tercepat.
Di mana ini kurang: Hanya Mac. Tidak ada aplikasi Windows atau Linux. Pasar sebagian besar telah pindah ke Figma.
Harga:
- Uji coba gratis 30 hari.
- 12 USD/bln Standar, 20 USD/bln Bisnis.
- Lisensi pendidikan dan open-source tersedia.
Platform: hanya macOS (Sonoma atau lebih baru).
Unduh: Situs resmi Sketch
Garis bawah: Pilihan asli Mac yang masih sebanding dengan Figma modern dalam kinerja. Hanya direkomendasikan jika Anda toko Mac-only.
6. Whimsical — Hibrida tata letak + flowchart terbaik
Whimsical adalah alat desain hibrida yang menggabungkan wireframing, flowchart, peta pikiran, dan catatan lengket. Kit wireframing memiliki cukup komponen pra-bangun untuk membuat mockup dashboard dalam sepuluh menit, dan mode flowchart berguna untuk merencanakan otomasi HA di samping UI.
Di mana ini kurang: Tingkat gratis membatasi Anda pada empat papan. Bukan untuk pekerjaan desain yang sempurna piksel.
Harga:
- Gratis: 4 papan.
- Pro: 12 USD/bln per editor.
Platform: Aplikasi web, Windows, macOS, Linux (sebagai PWA).
Unduh: Situs resmi Whimsical
Garis bawah: Pilih ini jika Anda ingin mendesain dashboard DAN diagram otomasi dalam alat yang sama. Lewati jika Anda sudah memiliki Miro.
7. Adobe XD — Terbaik untuk alur kerja Adobe yang sudah ada
Adobe XD adalah pesaing Figma Adobe. Pengembangan pada dasarnya telah berhenti, tetapi aplikasi masih berjalan, masih mengekspor, masih terintegrasi dengan Creative Cloud lainnya, dan pelanggan CC berlisensi mendapatkannya sebagai bagian dari paket mereka. Jika Anda sudah membayar Adobe setiap bulan, itu gratis.
Di mana ini kurang: Adobe menghentikan pengembangan aktif pada 2023. Paritas fitur dengan Figma tertinggal dan kesenjangan melebar setiap tahun.
Harga:
- Versi gratis masih tersedia.
- Bundel dengan Adobe Creative Cloud (54,99 USD/bln).
Platform: Windows dan macOS.
Unduh: Adobe XD
Garis bawah: Pilihan hanya jika Anda sudah memiliki langganan Creative Cloud. Semua orang lain harus mulai dengan Figma atau Penpot.
Cara memilih yang benar
Jika Anda menginginkan opsi paling sederhana: Figma. Jika Anda ingin self-host untuk mencocokkan penyiapan Home Assistant Anda: Penpot. Jika Anda ingin sketsa cepat dan bergerak maju: Excalidraw.
Jika Anda menginginkan whiteboard modern dengan sedikit lebih banyak kecerahan daripada Excalidraw: tldraw. Jika Anda hanya Mac dan menginginkan kinerja asli: Sketch. Jika Anda ingin mendesain dashboard dan diagram otomasi bersama-sama: Whimsical. Jika Anda sudah membayar Adobe: Adobe XD sebagai bonus, tetapi jangan beli langganan CC untuk itu.
Tanya jawab
Apakah saya memerlukan alat desain untuk membangun dashboard Home Assistant? Tidak — Anda dapat mengedit Lovelace langsung di browser. Tetapi jika dashboard Anda sudah terlalu penuh (yang dikatakan artikel XDA sebagai norma), membuat sketsa tata letak target sebelum mengedit YAML membuat pembersihan jauh lebih cepat.
Apa alat gratis terbaik untuk mendesain dashboard HA? Penpot untuk fitur desain UI lengkap, Excalidraw untuk sketsa cepat. Keduanya gratis selamanya dan open-source.
Dapatkah saya mengimpor desain dashboard HA saya ke Lovelace? Tidak langsung. Alat desain mengekspor gambar atau SVG; Anda secara manual membangun kembali tata letak di editor Lovelace. Beberapa alat komunitas menerjemahkan tata letak sederhana ke YAML, tetapi tidak ada yang sempurna rendering ada.
Ukuran apa yang harus saya desain? Sesuaikan dengan tampilan yang akan Anda tunjukkan dashboard. Sebagian besar pemasangan dinding dapur menggunakan iPad yang digunakan kembali (2048x1536) atau tablet Amazon Fire (1280x800). Atur artboard Anda ke dimensi tersebut.
Di mana saya menemukan ikon Home Assistant untuk mockup?
Material Design Icons adalah himpunan yang sama yang digunakan Home Assistant. Figma memiliki plugin MDI, Penpot memiliki perpustakaan MDI, Excalidraw dan tldraw dapat mengimpor SVG. Awalan mdi: di kartu Lovelace Anda adalah nama ikon yang tepat untuk mencari.
