Home Assistant panosunu yeniden oluşturmadan önce Figma’dan geçen XDA yazarı, “önce panonuzu tasarlayın” den daha büyük bir nokta yapıyordu. Lovelace güçlü ancak yerinde düzenleme UI’si birikimi teşvik ediyor — her yeni sensör bir kart ekler, her kart dikkat için rekabet ediyor ve altı ay sonra kimse panoyun ne için olduğunu bilmiyor. Gerçek bir tasarım aracında hedef düzeni taslaklandırma, duvara monte edilen iPad’de neyin gerçekten olması gerektiğini ve neyin bir dokunuş uzağında yaşaması gerektiğini seçmeye sizi zorlyor.
Bir YAML bloğuna dokunmadan önce Home Assistant panolarını planlamak için masaüstünde yedi tasarım uygulaması test ettik. Her seçenek Windows, macOS veya Linux’ta çalışır (Sketch sadece Mac). Bunları, boş kanvası gerçek Material simgeleri, gerçek hava durumu widget’ları ve Lovelace editörüne teslim edebileceğiniz bir düzen içeren bir pano mockup’ına ne kadar hızlı geçebileceğinize göre derledik.
HA panolar için tasarım aracında ne arayın
- Hobi projesi için uygun ücretsiz katman. Bir ürün oluşturuyor, göndermiyor musunuz. Artboard sayısını çok agresif bir şekilde sınırlandıran herhangi bir şey dışarıda.
- Simge kütüphaneleri. Home Assistant her yerde Material Design Icons kullanır. MDI eklentileri veya kopyaya uygun simge dışarı aktarmaları olan araçlar saatleri kazandırır.
- Izgara ve 8-pt aralığı. Lovelace varsayılan olarak 12 sütunlu bir ızgara kullanır. Izgara işini ağrısız yapan araçlar daha hızlı mockup’lar üretir.
- Paylaşılabilir görüntü veya eklenti halinde dışarı aktarma. Mockup’ı HA forumuna yapıştırmak veya panoya erişmesi gereken aileyle paylaşmak istiyorsunuz.
- Bileşen tabanlı yeniden kullanım. Kartlar panoları tekrarlamaktadır. Bir kartı bileşen oluşturmanıza ve yeniden kullanmanıza izin veren bir araç, her ekranda sıfırdan başlamaktan daha hızlıdır.
Hızlı karşılaştırma
| Uygulama | En iyi için | Platformlar | Ücretsiz plan | Başlangıç fiyatı | Notlar |
|---|---|---|---|---|---|
| Figma | Tam özellikli UI tasarımı | Web/Win/Mac | 3 dosya, sınırsız kişisel taslaklar | 15 USD/ay Pro | XDA makalesinin seçimi |
| Penpot | Açık kaynak Figma | Web/Win/Mac/Linux | Tüm özellikler ücretsiz | Ücretsiz (kendi kendine barındırılan) | Kendi kendine barındırılabilir, kilitleme yok |
| Excalidraw | Hızlı beyaz tahta çizimleri | Web/Win/Mac/Linux | Tüm özellikler ücretsiz | Ücretsiz | El çizimi estetik |
| tldraw | Modern beyaz tahta | Web/Win/Mac/Linux | Tüm özellikler ücretsiz | Ücretsiz | Gerçek zamanlı işbirliği |
| Sketch | Mac-yerli tasarım | Mac | 30 günlük deneme | 12 USD/ay | Sadece Mac |
| Whimsical | Düzen + akış şeması melez | Web/Win/Mac/Linux | 4 tahta | 12 USD/ay | Yerleşik tel taslağı kiti |
| Adobe XD | Adobe yığını entegrasyonu | Win/Mac | Ücretsiz (dondurulmuş) | CC’ye dahil | Geliştirme donmuş ama hâlâ çalışıyor |
Uygulamalar
1. Figma — Tam özellikli UI tasarımı için en iyi
Figma, XDA makalesinin kullandığı araçtır ve nedenli olarak. Ücretsiz plan üç dosyayı sınırsız kişisel taslaklar ile kapsar, topluluk sahip olduğu Material Design Icon kütüphaneleri herhangi bir projeye düşürebilirsiniz ve ızgara sistemi Lovelace’ın 12 sütunlu düzeni ile düzgün bir şekilde hizalanır. Bileşenler ve Otomatik Düzen, bir “sensör kartı” bir kez oluştur anlamına gelir ve bunu her yerde yeniden kullanırsınız.
Başarısız olduğu yer: Ücretsiz üç dosya sınırı, pano başına ayrı dosyalar tutarsanız hızla vurulur. Bir hesap gerektirir (şimdi Adobe’ye ait).
Fiyatlandırma:
- Ücretsiz: Sınırsız kişisel taslaklar içeren 3 dosya.
- Pro: Sınırsız dosyalar ve takım kütüphaneleri için editör başına 15 USD/ay.
Platformlar: Web, Windows masaüstü uygulaması, macOS masaüstü uygulaması.
İndir: Figma resmi sitesi
Özet: En desteklenen seçim. Zaten bir Figma hesabınız varsa kullanın. Adobe/Figma bulut hakkında gizlilik açısından endişe duyuyorsanız Penpot’a geçin.
2. Penpot — En iyi açık kaynak Figma eşdeğeri
Penpot, Figma ile aynı özellik setini çalıştıran tam açık kaynak tasarım aracıdır (Otomatik Düzen, bileşenler, gerçek zamanlı işbirliği) ya barındırılan hizmetleri aracılığıyla ya da kendi Docker konteyneriniz aracılığıyla. Kendi kendine barındırılan bir Home Assistant kullanıcısı için, bu hizalama kurulum maliyetini değerli kılar — tasarım dosyalarınız ve akıllı ev yığınız aynı makinede yaşıyor.
Başarısız olduğu yer: Simge eklentisi ekosistemi daha incedir. Bazı Figma-yerli iş akışları (değişkenler, gelişmiş Otomatik Düzen) Figma’dan daha sonra indi.
Fiyatlandırma:
- Barındırılan Penpot’ta ücretsiz katman sınırsız dosyayla.
- Docker ile kendi kendine barındırırsanız sonsuza kadar ücretsiz.
Platformlar: Web, Windows, macOS, Linux, kendi kendine barındırılan.
İndir: Penpot resmi sitesi
Özet: Home Assistant’ın kendi kendine barındırma etiğiyle eşleşen tasarım aracı. Figma Adobe hesabı olmadan her yerde gönderilir.
3. Excalidraw — Hızlı çizimler için en iyi
Excalidraw, boş bir sayfayı yaklaşık 90 saniyede kaba bir düzene dönüştüren el çizimi beyaz tahta aracıdır. İlk geçiş için mükemmeldir — kart boyutlarını mükemmel bir şekilde sabitlemekte değilsiniz, neyin nereye gitmesi gerektiğine karar veriyorsunuz. Dosyayı .excalidraw olarak yerel olarak kaydedin, bir bağlantıyla paylaşın veya PNG veya SVG’ye dışarı aktarın.
Başarısız olduğu yer: Gerçek bir UI aracı değil. Düzeni öğrendikten sonra, son sürüm için Figma veya Penpot’da yeniden çizmek isteyeceksiniz.
Fiyatlandırma:
- MIT lisansı altında ücretsiz ve açık kaynak.
- Excalidraw+ (gerçek zamanlı işbirliğiyle barındırılan): 7 USD/ay.
Platformlar: Web, Windows, macOS, Linux (Progressive Web App veya Electron olarak).
İndir: Excalidraw web uygulaması veya Excalidraw GitHub
Özet: İlk çizim geçişi için araç. Son mockup için değil.
4. tldraw — En iyi modern beyaz tahta
tldraw, gerçek zamanlı işbirliği, sonsuz tuval ve Miro ile Figma arasında bir yerde tasarım dili olan modern beyaz tahta aracıdır. Make Real özelliği (çizimleri LLM ile etkileşimli HTML’e dönüştürün) kartları prototipleştirmek için eğlencelidir; şekil kütüphanesi araçları değiştirmeden pano mockup’ları oluşturmak için yeterince geniştir.
Başarısız olduğu yer: UI aracı olarak tasarlanmamış, bu yüzden ızgara disiplini sizde. Gerçek zamanlı işbirliği barındırılan hizmeti gerektirir.
Fiyatlandırma:
- tldraw Standart Lisansı (MIT benzeri) altında ücretsiz ve açık kaynak.
- Kendi kendine barındırılan veya gömülü ücretsiz.
Platformlar: Web, Windows, macOS, Linux (PWA ve Electron).
İndir: tldraw web uygulaması veya tldraw GitHub
Özet: Excalidraw çok kaba ve Figma çok ağırsa bunu seçin. Orta noktası beyaz tahta.
5. Sketch — En iyi Mac-yerli tasarım aracı
Sketch, Mac’te orijinal UI tasarım aracıdır. Yerli uygulama performansı hâlâ Electron tabanlı rakiplerinin ilerisindedir, semboller ve kütüphaneler olgunlaşmıştır ve Sketch Cloud sinkronizasyonu isteğe bağlıdır (dosyalarınızı tamamen yerel tutabilirsiniz). Sadece Mac iş akışları için hâlâ en hızlı araçtır.
Başarısız olduğu yer: Sadece Mac. Windows veya Linux uygulaması yok. Pazar büyük ölçüde Figma’ya geçti.
Fiyatlandırma:
- 30 günlük ücretsiz deneme.
- 12 USD/ay Standart, 20 USD/ay İşletme.
- Eğitim ve açık kaynak lisansları mevcuttur.
Platformlar: Yalnızca macOS (Sonoma veya sonrası).
İndir: Sketch resmi sitesi
Özet: Performansta modern Figma ile hâlâ asılı duran Mac-yerli seçim. Yalnızca sadece Mac mağazasında iseniz önerilir.
6. Whimsical — En iyi düzen + akış şeması melez
Whimsical, tel taslamayı, akış şemalarını, zihin haritalarını ve yapışkan notları birleştiren melez tasarım aracıdır. Tel taslağı kiti on dakikada pano mockup oluşturmak için yeterince önceden oluşturulmuş bileşene sahiptir ve akış şeması modu UI ile birlikte HA otomasyonları planlamak için faydalıdır.
Başarısız olduğu yer: Ücretsiz katman sizi dört tahta ile sınırlar. Piksel mükemmel tasarım çalışması için değil.
Fiyatlandırma:
- Ücretsiz: 4 tahta.
- Pro: Editör başına 12 USD/ay.
Platformlar: Web uygulaması, Windows, macOS, Linux (PWA olarak).
İndir: Whimsical resmi sitesi
Özet: Panoy ve aynı araçta otomasyonları diyagramlamak istiyorsanız bunu seçin. Zaten Miro’nuz varsa atlayın.
7. Adobe XD — Mevcut Adobe iş akışları için en iyi
Adobe XD, Adobe’nin Figma rakipiydi. Geliştirme esasen durmuştur, ancak uygulama hâlâ çalışır, hâlâ dışarı aktarır, hâlâ Creative Cloud’un geri kalanıyla entegre olur ve lisanslı CC abone bunları planlarının bir parçası olarak alırlar. Zaten Adobe’ye aylık ödeme yapıyorsanız, ücretsizdir.
Başarısız olduğu yer: Adobe 2023’te aktif geliştirmeyi durdurmadı. Figma ile özellik paritesi geride ve boşluk her yıl genişliyor.
Fiyatlandırma:
- Ücretsiz sürüm hâlâ mevcuttur.
- Adobe Creative Cloud’a paketli (54,99 USD/ay).
Platformlar: Windows ve macOS.
İndir: Adobe XD
Özet: Yalnızca zaten Creative Cloud aboneliğiniz varsa seçim. Herkes diğer başlamalı Figma veya Penpot ile.
Doğru olanı seçme
En basit seçeneği isterseniz: Figma. Home Assistant kurulumunuzu eşleştirmek için kendi kendine barındırmak istiyorsanız: Penpot. Hızlı çizmek ve devam etmek istiyorsanız: Excalidraw.
Excalidraw’dan biraz daha parlak modern beyaz tahta istiyorsanız: tldraw. Sadece Mac iseniz ve yerli performans istiyorsanız: Sketch. Panoy ve otomasyonları birlikte diyagramlamak istiyorsanız: Whimsical. Zaten Adobe ödüyorsanız: Adobe XD bonus olarak, ancak bunun için CC aboneliği satın almayın.
SSS
Home Assistant panoya inşa etmek için tasarım aracına ihtiyacım var mı? Hayır — Lovelace’i doğrudan tarayıcıda düzenleyebilirsiniz. Ancak panonuz zaten çok doluysa (XDA makalesinin norm olduğunu savunduğu), YAML’yi düzenlemeden önce hedef düzeni taslaklandırma temizliği çok daha hızlı yapar.
HA panolarını tasarlamak için en iyi ücretsiz araç nedir? Tam UI tasarım özellikleri için Penpot, hızlı çizimler için Excalidraw. Her ikisi de sonsuza kadar ücretsiz ve açık kaynaktır.
HA pano tasarımımı Lovelace’e aktarabilirim? Doğrudan değil. Tasarım araçları görüntü veya SVG dışarı aktarır; Lovelace editöründe düzeni el ile yeniden oluşturursunuz. Bazı topluluk araçları basitleştirilmiş düzenleri YAML’ye çevirirler, ancak render-mükemmel hiçbir şey yok.
Hangi boyut için tasarım yapmalıyım? Panoya göstereceğiniz ekranla eşleş. Çoğu mutfak duvarına montajı, geri dönüştürülmüş bir iPad (2048x1536) veya Amazon Fire tableti (1280x800) kullanır. Artboard’ınızı bu boyutlara ayarlayın.
Mockup için Home Assistant simgelerini nerede bulurum?
Material Design Icons, Home Assistant’ın kullandığı aynı settir. Figma’nın bir MDI eklentisi var, Penpot’un bir MDI kütüphanesi var, Excalidraw ve tldraw SVG içe aktarabilir. Lovelace kartınızdaki mdi: öneki, aranacak kesin simge adıdır.
