L’écrivain XDA qui a fait un détour par Figma avant de reconstruire son tableau de bord Home Assistant faisait un point plus grand que « conçois d’abord ton tableau de bord ». Lovelace est puissant, mais son interface d’édition en place encourage l’accumulation — chaque nouveau capteur ajoute une carte, chaque carte rivalise pour l’attention, et après six mois, personne ne sait à quoi sert le tableau de bord. Esquisser une mise en page cible dans un vrai outil de conception te force à choisir ce qui doit vraiment se trouver sur l’iPad mural et ce qui devrait vivre à un appui de distance.
Nous avons testé sept applications de conception sur le bureau pour planifier des tableaux de bord Home Assistant avant de toucher à un seul bloc YAML. Chaque choix fonctionne sur Windows, macOS ou Linux (Sketch Mac uniquement). Nous les avons classées par la rapidité avec laquelle vous pouvez passer d’une toile vierge à une maquette de tableau de bord avec de vrais icônes Material, de vrais widgets météo et une mise en page que vous pouvez remettre à l’éditeur Lovelace.
Ce qu’il faut rechercher dans un outil de conception pour les tableaux de bord HA
- Un niveau gratuit qui convient à un projet de loisir. Tu construis un tableau de bord, pas un produit en production. Tout ce qui limite trop agressivement le nombre de plans de travail est exclu.
- Bibliothèques d’icônes. Home Assistant utilise les icônes Material Design partout. Les outils avec les plugins MDI ou les exportations d’icônes faciles à copier économisent des heures.
- Grille et espacement de 8 pt. Lovelace utilise par défaut une grille de 12 colonnes. Les outils qui rendent le travail de grille sans douleur produisent des maquettes plus rapides.
- Exporter vers une image partageable ou une intégration. Tu veux coller la maquette sur le forum HA ou la partager avec la famille qui doit utiliser le tableau de bord.
- Réutilisation basée sur les composants. Les cartes se répètent sur les tableaux de bord. Un outil qui te permet de construire un composant de carte et de le réutiliser est plus rapide que de recommencer à zéro à chaque écran.
Comparaison rapide
| Application | Meilleur pour | Plateformes | Plan gratuit | Prix de départ | Notes |
|---|---|---|---|---|---|
| Figma | Conception UI complète | Web/Win/Mac | 3 fichiers, brouillons personnels illimités | 15 USD/mois Pro | Choix de l’article XDA |
| Penpot | Figma open-source | Web/Win/Mac/Linux | Toutes les fonctionnalités gratuites | Gratuit (auto-hébergé) | Auto-hébergeable, sans verrouillage |
| Excalidraw | Croquis de tableau blanc rapides | Web/Win/Mac/Linux | Toutes les fonctionnalités gratuites | Gratuit | Esthétique dessiné à la main |
| tldraw | Tableau blanc moderne | Web/Win/Mac/Linux | Toutes les fonctionnalités gratuites | Gratuit | Collaboration en temps réel |
| Sketch | Outil de conception natif Mac | Mac | Essai gratuit de 30 jours | 12 USD/mois | Mac uniquement |
| Whimsical | Hybrid maquette + organigramme | Web/Win/Mac/Linux | 4 tableaux | 12 USD/mois | Kit de wireframe intégré |
| Adobe XD | Intégration de pile Adobe | Win/Mac | Gratuit (gelé) | Inclus dans CC | Développement gelé mais fonctionne toujours |
Les applications
1. Figma — Meilleur pour la conception UI complète
Figma est l’outil utilisé par l’article XDA, et avec raison. Le plan gratuit couvre trois fichiers avec des brouillons personnels illimités, la communauté dispose de bibliothèques d’icônes Material Design que tu peux intégrer à n’importe quel projet, et le système de grille s’aligne parfaitement avec la mise en page de 12 colonnes de Lovelace. Les composants et la mise en page automatique signifient que tu construis une « carte de capteur » une fois et la réutilises partout.
Où cela échoue : La limite gratuite de trois fichiers se heurte rapidement si vous conservez des fichiers séparés par tableau de bord. Nécessite un compte (maintenant propriété d’Adobe).
Tarification :
- Gratuit : 3 fichiers avec brouillons personnels illimités.
- Pro : 15 USD/mois par rédacteur pour les fichiers illimités et les bibliothèques d’équipe.
Plateformes : Web, application de bureau Windows, application de bureau macOS.
Télécharger : Site officiel de Figma
Résumé : Le choix le plus soutenu. Si tu as déjà un compte Figma, utilise-le. Si tu t’inquiètes pour la confidentialité concernant le cloud Adobe/Figma, passe à Penpot.
2. Penpot — Meilleur équivalent Figma open-source
Penpot est l’outil de conception complètement open-source qui exécute le même ensemble de fonctionnalités que Figma (mise en page automatique, composants, collaboration en temps réel) soit via leur service hébergé, soit via ton propre conteneur Docker. Pour un utilisateur Home Assistant auto-hébergé, cet alignement vaut le coût de la configuration — tes fichiers de conception et ta pile de maison intelligente vivent sur la même machine.
Où cela échoue : L’écosystème des plugins d’icônes est plus fin. Certains flux de travail natifs de Figma (variables, mise en page automatique avancée) sont arrivés plus tard que dans Figma.
Tarification :
- Niveau gratuit sur Penpot hébergé avec fichiers illimités.
- Gratuit à vie si tu t’auto-héberges avec Docker.
Plateformes : Web, Windows, macOS, Linux, auto-hébergé.
Télécharger : Site officiel de Penpot
Résumé : L’outil de conception qui correspond à l’éthique d’auto-hébergement de Home Assistant. S’expédie partout où Figma le fait, sans compte Adobe.
3. Excalidraw — Meilleur pour les croquis rapides
Excalidraw est l’outil de tableau blanc dessiné à la main qui transforme une page vierge en une mise en page approximative en environ 90 secondes. Parfait pour le premier passage — tu ne cherches pas à fixer les tailles de cartes à la perfection, tu cherches à décider ce qui va où. Enregistre le fichier localement en tant que .excalidraw, partage avec un lien, ou exporte en PNG ou SVG.
Où cela échoue : Ce n’est pas un vrai outil d’UI. Une fois que tu connais la mise en page, tu voudras la redessiner dans Figma ou Penpot pour la version polie.
Tarification :
- Gratuit et open-source sous licence MIT.
- Excalidraw+ (hébergé avec collaboration en temps réel) : 7 USD/mois.
Plateformes : Web, Windows, macOS, Linux (comme Progressive Web App ou Electron).
Télécharger : Application web Excalidraw ou GitHub Excalidraw
Résumé : L’outil pour le premier passage de croquis. Pas pour la maquette finale.
4. tldraw — Meilleur tableau blanc moderne
tldraw est l’outil de tableau blanc moderne avec collaboration en temps réel, toile infinie et un langage de conception quelque part entre Miro et Figma. Sa fonction Make Real (convertir les croquis en HTML interactif avec un LLM) est amusante pour prototyper des cartes ; la bibliothèque de formes est assez large pour créer des maquettes de tableaux de bord sans changer d’outil.
Où cela échoue : Non conçu comme un outil d’UI, donc la discipline de grille t’incombe. La collaboration en temps réel nécessite le service hébergé.
Tarification :
- Gratuit et open-source sous la licence tldraw Standard (de type MIT).
- Auto-hébergé ou intégré gratuitement.
Plateformes : Web, Windows, macOS, Linux (PWA et Electron).
Télécharger : Application web tldraw ou GitHub tldraw
Résumé : Choisis cela si Excalidraw est trop brut et Figma trop lourd. Le tableau blanc du point médian.
5. Sketch — Meilleur outil de conception natif Mac
Sketch est l’outil original de conception d’UI sur Mac. Les performances de l’application native surpassent toujours les concurrents basés sur Electron, les symboles et les bibliothèques sont matures, et la synchronisation Sketch Cloud est optionnelle (tu peux garder tes fichiers entièrement en local). Pour les flux de travail Mac uniquement, c’est toujours l’outil le plus rapide.
Où cela échoue : Mac uniquement. Pas d’application Windows ou Linux. Le marché s’est largement déplacé vers Figma.
Tarification :
- Essai gratuit de 30 jours.
- 12 USD/mois Standard, 20 USD/mois Business.
- Licences éducatives et open-source disponibles.
Plateformes : macOS uniquement (Sonoma ou ultérieur).
Télécharger : Site officiel de Sketch
Résumé : Le choix natif Mac qui se compare toujours avec le Figma moderne en termes de performance. Recommandé uniquement si tu es une boutique Mac uniquement.
6. Whimsical — Meilleur hybrid maquette + organigramme
Whimsical est un outil de conception hybride qui combine les maquettes, organigrammes, cartes mentales et notes autocollantes. Le kit de wireframe dispose de suffisamment de composants préconstruits pour créer une maquette de tableau de bord en dix minutes, et le mode organigramme est utile pour planifier les automatisations de HA aux côtés de l’UI.
Où cela échoue : Le niveau gratuit te limite à quatre tableaux. Pas pour un travail de conception parfait au pixel.
Tarification :
- Gratuit : 4 tableaux.
- Pro : 12 USD/mois par rédacteur.
Plateformes : Application web, Windows, macOS, Linux (comme PWA).
Télécharger : Site officiel de Whimsical
Résumé : Choisis cela si tu veux concevoir le tableau de bord ET diagrammer les automatisations dans le même outil. Saute si tu as déjà Miro.
7. Adobe XD — Meilleur pour les flux de travail Adobe existants
Adobe XD était le concurrent Figma d’Adobe. Le développement s’est essentiellement arrêté, mais l’application fonctionne toujours, s’exporte toujours, s’intègre toujours au reste de Creative Cloud, et les abonnés CC sous licence l’obtiennent dans le cadre de leur plan. Si tu paies déjà Adobe mensuellement, c’est gratuit.
Où cela échoue : Adobe a arrêté le développement actif en 2023. La parité des fonctionnalités avec Figma est à la traîne et l’écart s’élargit chaque année.
Tarification :
- Version gratuite toujours disponible.
- Inclus dans Adobe Creative Cloud (54,99 USD/mois).
Plateformes : Windows et macOS.
Télécharger : Adobe XD
Résumé : Le choix uniquement si tu as déjà un abonnement Creative Cloud. Tous les autres devraient commencer par Figma ou Penpot.
Comment choisir la bonne
Si tu veux l’option la plus simple : Figma. Si tu veux t’auto-héberger pour correspondre à ta configuration Home Assistant : Penpot. Si tu veux esquisser rapidement et continuer : Excalidraw.
Si tu veux un tableau blanc moderne avec un peu plus de finition qu’Excalidraw : tldraw. Si tu es Mac uniquement et veux des performances natives : Sketch. Si tu veux concevoir le tableau de bord et diagrammer les automatisations ensemble : Whimsical. Si tu paies déjà Adobe : Adobe XD en bonus, mais n’achète pas l’abonnement CC pour cela.
FAQ
Ai-je besoin d’un outil de conception pour construire un tableau de bord Home Assistant ? Non — tu peux éditer Lovelace directement dans le navigateur. Mais si ton tableau de bord est déjà trop encombré (ce que l’article XDA arguait être la norme), esquisser une mise en page cible avant d’éditer YAML rend le nettoyage beaucoup plus rapide.
Quel est le meilleur outil gratuit pour concevoir des tableaux de bord HA ? Penpot pour les fonctionnalités de conception UI complètes, Excalidraw pour les croquis rapides. Les deux sont gratuits à vie et open-source.
Puis-je importer ma conception de tableau de bord HA dans Lovelace ? Pas directement. Les outils de conception exportent des images ou des SVG ; tu reconstruis manuellement la mise en page dans l’éditeur Lovelace. Certains outils communautaires traduisent les mises en page simplifiées en YAML, mais rien de parfait n’existe.
Quelle taille dois-je concevoir ? Correspond à l’affichage sur lequel tu afficheras le tableau de bord. La plupart des montages muraux de cuisine utilisent un iPad réutilisé (2048x1536) ou une tablette Amazon Fire (1280x800). Définis ton plan de travail sur ces dimensions.
Où trouver les icônes Home Assistant pour la maquette ?
Material Design Icons est le même ensemble que Home Assistant utilise. Figma a un plugin MDI, Penpot a une bibliothèque MDI, Excalidraw et tldraw peuvent importer du SVG. Le préfixe mdi: dans ta carte Lovelace est le nom d’icône exact à rechercher.
