XDA लेखक जिन्होंने अपने Home Assistant डैशबोर्ड को फिर से बनाने से पहले Figma के माध्यम से एक मोड़ लिया, वह “पहले अपने डैशबोर्ड को डिज़ाइन करें” से अधिक बड़ा बिंदु बना रहे थे। Lovelace शक्तिशाली है लेकिन इसका संपादन-स्थान UI संचय को प्रोत्साहित करता है — हर नया सेंसर एक कार्ड जोड़ता है, हर कार्ड ध्यान के लिए प्रतिस्पर्धा करता है, और छह महीने बाद कोई नहीं जानता कि डैशबोर्ड किस लिए है। एक वास्तविक डिज़ाइन टूल में लक्ष्य लेआउट को स्केच करना आपको चुनने के लिए मजबूर करता है कि दीवार पर लगे iPad पर क्या होना चाहिए और क्या एक स्पर्श दूर रहना चाहिए।
हमने Home Assistant डैशबोर्ड की योजना बनाने के लिए डेस्कटॉप पर सात डिज़ाइन ऐप्स का परीक्षण किया इससे पहले कि आप एक भी YAML ब्लॉक को छुएं। प्रत्येक विकल्प Windows, macOS या Linux पर काम करता है (Sketch केवल Mac)। हमने इस बात से रैंक किया कि आप कितनी जल्दी वास्तविक Material आइकन, वास्तविक मौसम विजेट और एक लेआउट के साथ एक डैशबोर्ड मॉकअप तक पहुंच सकते हैं जो आप Lovelace संपादक को दे सकते हैं।
HA डैशबोर्ड के लिए डिज़ाइन टूल में क्या देखें
- एक शौक परियोजना के अनुरूप मुक्त स्तर। आप एक पণ्य पर काम कर रहे हैं, उसे भेज नहीं रहे। कुछ भी जो आर्टबोर्ड की संख्या को बहुत आक्रामक तरीके से सीमित करता है वह बाहर है।
- आइकन लाइब्रेरी। Home Assistant सर्वत्र Material Design Icons का उपयोग करता है। MDI प्लगइन या कॉपी-मित्रवत आइकन निर्यात के साथ टूल्स घंटों बचाते हैं।
- ग्रिड और 8-pt रिक्ति। Lovelace डिफ़ॉल्ट रूप से 12-कॉलम ग्रिड का उपयोग करता है। टूल्स जो ग्रिड कार्य को दर्द-मुक्त बनाते हैं तेजी से मॉकअप बनाते हैं।
- साझा करने योग्य छवि या एम्बेड को निर्यात करें। आप मॉकअप को HA फोरम पर पेस्ट करना चाहते हैं या इसे परिवार के साथ साझा करना चाहते हैं जिसे डैशबोर्ड का उपयोग करना है।
- घटक-आधारित पुन: उपयोग। कार्ड डैशबोर्ड में दोहराते हैं। एक ऐसा टूल जो आपको एक कार्ड घटक बनाने और इसे पुन: उपयोग करने देता है हर स्क्रीन पर शुरुआत से तेजी से है।
त्वरित तुलना
| ऐप | सर्वश्रेष्ठ के लिए | प्लेटफॉर्म | मुक्त योजना | प्रारंभिक कीमत | नोट्स |
|---|---|---|---|---|---|
| Figma | पूर्ण UI डिज़ाइन | Web/Win/Mac | 3 फाइलें, असीमित व्यक्तिगत | 15 USD/माह Pro | XDA लेख की पसंद |
| Penpot | ओपन-सोर्स Figma | Web/Win/Mac/Linux | सभी सुविधाएं मुक्त | मुक्त (स्व-होस्ट) | स्व-होस्टेबल, कोई लॉकइन नहीं |
| Excalidraw | तेजी से व्हाइटबोर्ड स्केच | Web/Win/Mac/Linux | सभी सुविधाएं मुक्त | मुक्त | हाथ से खींचा सौंदर्य |
| tldraw | आधुनिक व्हाइटबोर्ड | Web/Win/Mac/Linux | सभी सुविधाएं मुक्त | मुक्त | रीयल-टाइम सहयोग |
| Sketch | Mac-नेटिव डिज़ाइन | Mac | 30-दिन का परीक्षण | 12 USD/माह | केवल Mac |
| Whimsical | लेआउट + फ्लोचार्ट हाइब्रिड | Web/Win/Mac/Linux | 4 बोर्ड | 12 USD/माह | बिल्ट-इन वायरफ्रेम किट |
| Adobe XD | Adobe स्टैक एकीकरण | Win/Mac | मुक्त (जमे हुए) | CC में शामिल | विकास जमे हुए लेकिन अभी भी चलता है |
ऐप्स
1. Figma — पूर्ण UI डिज़ाइन के लिए सर्वश्रेष्ठ
Figma वह टूल है जो XDA पीस ने उपयोग किया, और अच्छे कारण के लिए। मुक्त योजना तीन फाइलों को असीमित व्यक्तिगत ड्राफ्ट के साथ कवर करती है, समुदाय के पास Material Design Icon लाइब्रेरी हैं जो आप किसी भी प्रोजेक्ट में डाल सकते हैं, और ग्रिड सिस्टम Lovelace के 12-कॉलम लेआउट के साथ साफ सुथरा संरेखित करता है। घटक और ऑटो लेआउट का मतलब है कि आप एक बार “सेंसर कार्ड” बनाते हैं और इसे हर जगह पुन: उपयोग करते हैं।
जहां यह विफल हो जाता है: तीन-फाइल मुक्त सीमा तेजी से मारा जाता है यदि आप प्रति डैशबोर्ड अलग फाइलें रखते हैं। एक खाते की आवश्यकता है (अब Adobe द्वारा स्वामित्व)।
मूल्य निर्धारण:
- मुक्त: 3 फाइलें असीमित व्यक्तिगत ड्राफ्ट के साथ।
- Pro: प्रति संपादक असीमित फाइलों और टीम लाइब्रेरी के लिए 15 USD/माह।
प्लेटफॉर्म: वेब, Windows डेस्कटॉप ऐप, macOS डेस्कटॉप ऐप।
डाउनलोड: Figma आधिकारिक साइट
निष्कर्ष: सबसे अच्छी तरह से समर्थित विकल्प। यदि आपके पास पहले से Figma खाता है, तो इसका उपयोग करें। यदि आप Adobe/Figma क्लाउड के बारे में गोपनीयता से जागरूक हैं, तो Penpot पर जाएं।
2. Penpot — सर्वश्रेष्ठ ओपन-सोर्स Figma समकक्ष
Penpot पूरी तरह से ओपन-सोर्स डिज़ाइन टूल है जो Figma के समान फीचर सेट चलाता है (ऑटो लेआउट, घटक, रीयल-टाइम कोलाब) या तो उनकी होस्टेड सेवा के माध्यम से या आपके स्वयं के Docker कंटेनर के माध्यम से। एक स्व-होस्टिंग Home Assistant उपयोगकर्ता के लिए, वह संरेखण सेटअप लागत के लायक है — आपकी डिज़ाइन फाइलें और आपका स्मार्ट होम स्टैक एक ही मशीन पर रहते हैं।
जहां यह विफल हो जाता है: आइकन प्लगइन पारिस्थितिकी तंत्र पतला। कुछ Figma-नेटिव वर्कफ़्लो (चर, उन्नत ऑटो लेआउट) Figma में बाद में उतरे।
मूल्य निर्धारण:
- होस्टेड Penpot पर मुक्त स्तर असीमित फाइलें।
- यदि आप Docker के साथ स्व-होस्ट करते हैं तो हमेशा मुक्त।
प्लेटफॉर्म: वेब, Windows, macOS, Linux, स्व-होस्टेड।
डाउनलोड: Penpot आधिकारिक साइट
निष्कर्ष: डिज़ाइन टूल जो Home Assistant की स्व-होस्टिंग नैतिकता से मेल खाता है। Figma के बिना हर जगह भेज दिया गया Adobe खाता।
3. Excalidraw — तेजी से स्केच के लिए सर्वश्रेष्ठ
Excalidraw हाथ से खींचा व्हाइटबोर्ड टूल है जो एक खाली पृष्ठ को लगभग 90 सेकंड में एक खुरदुरी लेआउट में बदल देता है। पहली पास के लिए आदर्श — आप कार्ड के आकार को नेल करने की कोशिश नहीं कर रहे, आप तय करने की कोशिश कर रहे हैं कि क्या कहां जाता है। फाइल को .excalidraw के रूप में स्थानीय रूप से सहेजें, लिंक के साथ साझा करें, या PNG या SVG को निर्यात करें।
जहां यह विफल हो जाता है: एक वास्तविक UI टूल नहीं। एक बार जब आप लेआउट जानते हैं तो आप इसे Figma या Penpot में पॉलिशड संस्करण के लिए पुन: खींचना चाहेंगे।
मूल्य निर्धारण:
- MIT लाइसेंस के तहत मुक्त और ओपन-सोर्स।
- Excalidraw+ (रीयल-टाइम कोलाब के साथ होस्ट): 7 USD/माह।
प्लेटफॉर्म: वेब, Windows, macOS, Linux (प्रगतिशील वेब ऐप या Electron के रूप में)।
डाउनलोड: Excalidraw वेब ऐप या Excalidraw GitHub
निष्कर्ष: पहली स्केच पास के लिए टूल। अंतिम मॉकअप के लिए नहीं।
4. tldraw — सर्वश्रेष्ठ आधुनिक व्हाइटबोर्ड
tldraw आधुनिक व्हाइटबोर्ड टूल है जिसमें रीयल-टाइम सहयोग, अनंत कैनवास और Miro और Figma के बीच कहीं डिज़ाइन भाषा है। इसकी Make Real सुविधा (स्केच को LLM के साथ इंटरैक्टिव HTML में बदल दें) कार्ड को प्रोटोटाइप करने के लिए मजेदार है; आकार पुस्तकालय टूल स्विच करने के बिना डैशबोर्ड मॉकअप करने के लिए काफी व्यापक है।
जहां यह विफल हो जाता है: UI टूल के रूप में डिज़ाइन नहीं किया गया, तो ग्रिड अनुशासन आप पर है। रीयल-टाइम कोलाब को होस्टेड सेवा की आवश्यकता है।
मूल्य निर्धारण:
- tldraw Standard License (MIT-जैसे) के तहत मुक्त और ओपन-सोर्स।
- स्व-होस्टेड या एम्बेड मुक्त।
प्लेटफॉर्म: वेब, Windows, macOS, Linux (PWA और Electron)।
डाउनलोड: tldraw वेब ऐप या tldraw GitHub
निष्कर्ष: यदि Excalidraw बहुत खुरदुरा है और Figma बहुत भारी है तो इसे चुनें। मध्य-बिंदु व्हाइटबोर्ड।
5. Sketch — सर्वश्रेष्ठ Mac-नेटिव डिज़ाइन टूल
Sketch Mac पर मूल UI डिज़ाइन टूल है। नेटिव ऐप प्रदर्शन अभी भी Electron-आधारित प्रतियोगियों से आगे है, प्रतीक और लाइब्रेरी परिपक्व हैं, और Sketch Cloud सिंक वैकल्पिक है (आप अपनी फाइलों को पूरी तरह स्थानीय रख सकते हैं)। Mac-केवल वर्कफ़्लो के लिए यह अभी भी सबसे तेजी से टूल है।
जहां यह विफल हो जाता है: केवल Mac। कोई Windows या Linux ऐप नहीं। बाजार बड़े पैमाने पर Figma में स्थानांतरित हो गया है।
मूल्य निर्धारण:
- 30-दिन की मुक्त परीक्षा।
- 12 USD/माह Standard, 20 USD/माह Business।
- शैक्षणिक और ओपन-सोर्स लाइसेंस उपलब्ध।
प्लेटफॉर्म: केवल macOS (Sonoma या बाद में)।
डाउनलोड: Sketch आधिकारिक साइट
निष्कर्ष: Mac-नेटिव चुनाव जो प्रदर्शन में आधुनिक Figma के साथ अभी भी लटका है। केवल यदि आप Mac-केवल की दुकान हैं।
6. Whimsical — सर्वश्रेष्ठ लेआउट + फ्लोचार्ट हाइब्रिड
Whimsical एक हाइब्रिड डिज़ाइन टूल है जो वायरफ्रेमिंग, फ्लोचार्ट, मानसिक नक्शे और स्टिकी नोट्स को जोड़ता है। वायरफ्रेमिंग किट में दस मिनट में एक डैशबोर्ड मॉकअप बनाने के लिए पर्याप्त पूर्व-निर्मित घटक हैं, और फ्लोचार्ट मोड UI के साथ HA ऑटोमेशन की योजना बनाने के लिए उपयोगी है।
जहां यह विफल हो जाता है: मुक्त स्तर आपको चार बोर्डों तक सीमित करता है। पिक्सल-परफेक्ट डिज़ाइन कार्य के लिए नहीं।
मूल्य निर्धारण:
- मुक्त: 4 बोर्ड।
- Pro: 12 USD/माह प्रति संपादक।
प्लेटफॉर्म: वेब ऐप, Windows, macOS, Linux (PWA के रूप में)।
डाउनलोड: Whimsical आधिकारिक साइट
निष्कर्ष: यदि आप डैशबोर्ड और एक ही टूल में डायग्राम ऑटोमेशन चाहते हैं तो इसे चुनें। यदि आपके पास पहले से Miro है तो छोड़ दें।
7. Adobe XD — मौजूदा Adobe वर्कफ़्लो के लिए सर्वश्रेष्ठ
Adobe XD Adobe का Figma प्रतिद्वंद्वी था। विकास अनिवार्य रूप से बंद हो गया है, लेकिन ऐप अभी भी चलता है, अभी भी निर्यात करता है, अभी भी Creative Cloud के बाकी हिस्सों के साथ एकीकृत करता है, और लाइसेंस प्राप्त CC ग्राहक इसे अपनी योजना के भाग के रूप में प्राप्त करते हैं। यदि आप पहले से ही Adobe को मासिक भुगतान करते हैं, तो यह मुक्त है।
जहां यह विफल हो जाता है: Adobe ने 2023 में सक्रिय विकास बंद किया। Figma के साथ फीचर समानता पिछड़ी हुई है और अंतर हर साल व्यापक होता है।
मूल्य निर्धारण:
- मुक्त संस्करण अभी भी उपलब्ध है।
- Adobe Creative Cloud में बंडल किया गया (54.99 USD/माह)।
प्लेटफॉर्म: Windows और macOS।
डाउनलोड: Adobe XD
निष्कर्ष: विकल्प केवल यदि आपके पास पहले से Creative Cloud सदस्यता है। सभी को Figma या Penpot के साथ शुरुआत करनी चाहिए।
सही चुनने के तरीके
यदि आप सबसे सरल विकल्प चाहते हैं: Figma। यदि आप अपने Home Assistant सेटअप से मेल खाने के लिए स्व-होस्ट करना चाहते हैं: Penpot। यदि आप तेजी से स्केच करना चाहते हैं और आगे बढ़ना चाहते हैं: Excalidraw।
यदि आप Excalidraw की तुलना में थोड़ी अधिक पॉलिश के साथ एक आधुनिक व्हाइटबोर्ड चाहते हैं: tldraw। यदि आप केवल Mac हैं और नेटिव प्रदर्शन चाहते हैं: Sketch। यदि आप डैशबोर्ड डिज़ाइन करना चाहते हैं और एक साथ ऑटोमेशन डायग्राम: Whimsical। यदि आप पहले से Adobe भुगतान करते हैं: Adobe XD बोनस के रूप में, लेकिन इसके लिए CC सदस्यता न खरीदें।
अक्सर पूछे जाने वाले प्रश्न
क्या मुझे Home Assistant डैशबोर्ड बनाने के लिए डिज़ाइन टूल की आवश्यकता है? नहीं — आप सीधे ब्राउज़र में Lovelace संपादित कर सकते हैं। लेकिन अगर आपका डैशबोर्ड पहले से ही बहुत भीड़ भरा है (जो XDA पीस का तर्क था आदर्श), YAML संपादित करने से पहले लक्ष्य लेआउट को स्केच करना सफाई को बहुत तेजी से बनाता है।
HA डैशबोर्ड डिज़ाइन करने के लिए सबसे अच्छा मुक्त टूल क्या है? पूर्ण UI डिज़ाइन सुविधाओं के लिए Penpot, तेजी से स्केच के लिए Excalidraw। दोनों हमेशा के लिए मुक्त हैं और ओपन-सोर्स हैं।
क्या मैं अपने HA डैशबोर्ड डिज़ाइन को Lovelace में आयात कर सकता हूं? सीधे नहीं। डिज़ाइन टूल छवियों या SVG को निर्यात करते हैं; आप Lovelace संपादक में मैन्युअल रूप से लेआउट पुन: बनाते हैं। कुछ समुदाय उपकरण सरलीकृत लेआउट को YAML में अनुवाद करते हैं, लेकिन कुछ भी रेंडर-परफेक्ट नहीं है।
मुझे किस आकार के लिए डिज़ाइन करना चाहिए? उस डिस्प्ले से मेल खाएं जो आप डैशबोर्ड पर दिखाएंगे। अधिकांश रसोई की दीवार के माउंट एक पुनर्निर्मित iPad (2048x1536) या अमेज़न फायर टैबलेट (1280x800) का उपयोग करते हैं। अपनी आर्टबोर्ड को उन आयामों पर सेट करें।
मुझे मॉकअप के लिए Home Assistant आइकन कहां मिलते हैं?
Material Design Icons वही सेट है जो Home Assistant उपयोग करता है। Figma में एक MDI प्लगइन है, Penpot में एक MDI लाइब्रेरी है, Excalidraw और tldraw SVG आयात कर सकते हैं। आपके Lovelace कार्ड में mdi: उपसर्ग खोज करने के लिए सटीक आइकन नाम है।
