Planificación de diseño de panel de Home Assistant con herramientas de escritorio

El escritor de XDA que hizo un desvío por Figma antes de reconstruir su panel de Home Assistant estaba haciendo un punto más grande que “diseña tu panel primero”. Lovelace es poderoso, pero su interfaz de edición en el lugar fomenta la acumulación — cada nuevo sensor añade una tarjeta, cada tarjeta compite por la atención, y después de seis meses nadie sabe para qué es el panel. Esbozar un diseño objetivo en una herramienta de diseño real te obliga a elegir qué debe estar realmente en el iPad montado en la pared y qué debe vivir un toque lejos.

Probamos siete aplicaciones de diseño en escritorio para planificar paneles de Home Assistant antes de tocar un único bloque YAML. Cada opción funciona en Windows, macOS o Linux (Sketch solo en Mac). Las clasificamos por lo rápido que puede pasar de un lienzo en blanco a un mockup de panel con iconos de Material reales, widgets de clima reales y un diseño que puede entregar al editor de Lovelace.

Qué buscar en una herramienta de diseño para paneles HA

Comparación rápida

Aplicación Mejor para Plataformas Plan gratuito Precio inicial Notas
Figma Diseño de UI completo Web/Win/Mac 3 archivos, borradores personales ilimitados 15 USD/mes Pro Opción del artículo XDA
Penpot Figma de código abierto Web/Win/Mac/Linux Todas las funciones gratis Gratis (auto-alojado) Auto-alojable, sin bloqueo
Excalidraw Esbozos de pizarra rápidos Web/Win/Mac/Linux Todas las funciones gratis Gratis Estética dibujada a mano
tldraw Pizarra moderna Web/Win/Mac/Linux Todas las funciones gratis Gratis Colaboración en tiempo real
Sketch Herramienta de diseño nativa de Mac Mac Prueba de 30 días 12 USD/mes Solo Mac
Whimsical Híbrido de diseño + diagrama de flujo Web/Win/Mac/Linux 4 tableros 12 USD/mes Kit de estructura integrado
Adobe XD Integración de pila Adobe Win/Mac Gratis (congelado) Incluido en CC Desarrollo congelado pero aún funciona

Las aplicaciones

1. Figma — Mejor para diseño de UI completo

Figma es la herramienta que usó el artículo de XDA, y con razón. El plan gratuito cubre tres archivos con borradores personales ilimitados, la comunidad tiene bibliotecas de iconos de Material Design que puedes soltar en cualquier proyecto, y el sistema de cuadrícula se alinea perfectamente con el diseño de 12 columnas de Lovelace. Los componentes y Auto Layout significan que construyes una “tarjeta de sensor” una vez y la reutilizas en todas partes.

Dónde falla: El límite gratuito de tres archivos se alcanza rápidamente si mantienes archivos separados por panel. Requiere una cuenta (ahora propiedad de Adobe).

Precios:

Plataformas: Web, aplicación de escritorio de Windows, aplicación de escritorio de macOS.

Descargar: Sitio oficial de Figma

Conclusión: La opción más respaldada. Si ya tienes una cuenta de Figma, úsala. Si te preocupa la privacidad respecto a la nube de Adobe/Figma, ve a Penpot.

2. Penpot — Mejor equivalente de Figma de código abierto

Penpot es la herramienta de diseño completamente de código abierto que ejecuta el mismo conjunto de funciones que Figma (Auto Layout, componentes, colaboración en tiempo real) a través de su servicio alojado o tu propio contenedor Docker. Para un usuario de Home Assistant auto-alojado, esa alineación vale la pena del costo de configuración — tus archivos de diseño y tu pila de hogar inteligente viven en la misma máquina.

Dónde falla: El ecosistema de complementos de iconos es más delgado. Algunos flujos de trabajo nativos de Figma (variables, Auto Layout avanzado) llegaron más tarde que en Figma.

Precios:

Plataformas: Web, Windows, macOS, Linux, auto-alojado.

Descargar: Sitio oficial de Penpot

Conclusión: La herramienta de diseño que coincide con la ética de auto-alojamiento de Home Assistant. Se envía a todas partes donde Figma lo hace, sin cuenta de Adobe.

3. Excalidraw — Mejor para esbozos rápidos

Excalidraw es la herramienta de pizarra dibujada a mano que convierte una página en blanco en un diseño aproximado en unos 90 segundos. Perfecto para el primer paso — no estás tratando de fijar tamaños de tarjeta a la perfección, estás tratando de decidir qué va dónde. Guarda el archivo localmente como .excalidraw, comparte con un enlace, o exporta a PNG o SVG.

Dónde falla: No es una herramienta de UI real. Una vez que conoces el diseño, querrás redibujarla en Figma o Penpot para la versión pulida.

Precios:

Plataformas: Web, Windows, macOS, Linux (como Aplicación Web Progresiva o Electron).

Descargar: Aplicación web Excalidraw o GitHub de Excalidraw

Conclusión: La herramienta para el primer paso de esbozo. No para la maqueta final.

4. tldraw — Mejor pizarra moderna

tldraw es la herramienta de pizarra moderna con colaboración en tiempo real, lienzo infinito y un lenguaje de diseño entre Miro y Figma. Su función Make Real (convierte esbozos en HTML interactivo con un LLM) es divertida para crear prototipos de tarjetas; la biblioteca de formas es lo suficientemente amplia para crear maquetas de paneles sin cambiar de herramientas.

Dónde falla: No está diseñado como herramienta de UI, así que la disciplina de cuadrícula depende de ti. La colaboración en tiempo real requiere el servicio alojado.

Precios:

Plataformas: Web, Windows, macOS, Linux (PWA y Electron).

Descargar: Aplicación web de tldraw o GitHub de tldraw

Conclusión: Elige esto si Excalidraw es demasiado áspero y Figma es demasiado pesado. La pizarra de punto medio.

5. Sketch — Mejor herramienta de diseño nativa de Mac

Sketch es la herramienta de diseño de UI original en Mac. El rendimiento de la aplicación nativa sigue por delante de los competidores basados en Electron, los símbolos y las bibliotecas están maduros, y la sincronización de Sketch Cloud es opcional (puedes mantener tus archivos completamente locales). Para flujos de trabajo solo de Mac, sigue siendo la herramienta más rápida.

Dónde falla: Solo Mac. Sin aplicación de Windows o Linux. El mercado se ha trasladado principalmente a Figma.

Precios:

Plataformas: solo macOS (Sonoma o posterior).

Descargar: Sitio oficial de Sketch

Conclusión: La opción nativa de Mac que aún se mantiene con Figma moderno en rendimiento. Solo se recomienda si eres una tienda solo Mac.

6. Whimsical — Mejor híbrido de diseño + diagrama de flujo

Whimsical es una herramienta de diseño híbrida que combina wireframing, diagramas de flujo, mapas mentales y notas adhesivas. El kit de wireframing tiene suficientes componentes preconstridos para crear una maqueta de panel en diez minutos, y el modo de diagrama de flujo es útil para planificar automatizaciones de HA junto con la UI.

Dónde falla: El nivel gratuito te limita a cuatro tableros. No para trabajo de diseño perfecto en píxeles.

Precios:

Plataformas: Aplicación web, Windows, macOS, Linux (como PWA).

Descargar: Sitio oficial de Whimsical

Conclusión: Elige esto si quieres diseñar el panel Y diagramar las automatizaciones en la misma herramienta. Salta si ya tienes Miro.

7. Adobe XD — Mejor para flujos de trabajo de Adobe existentes

Adobe XD fue el competidor de Figma de Adobe. El desarrollo se ha detenido esencialmente, pero la aplicación aún funciona, aún exporta, aún se integra con el resto de Creative Cloud, y los suscriptores de CC licenciados lo obtienen como parte de su plan. Si ya pagas a Adobe mensualmente, es gratis.

Dónde falla: Adobe detuvo el desarrollo activo en 2023. La paridad de funciones con Figma está rezagada y la brecha se amplía cada año.

Precios:

Plataformas: Windows y macOS.

Descargar: Adobe XD

Conclusión: La opción solo si ya tienes una suscripción a Creative Cloud. Todos los demás deberían comenzar con Figma o Penpot.

Cómo elegir la correcta

Si deseas la opción más simple: Figma. Si deseas auto-alojar para que coincida con tu configuración de Home Assistant: Penpot. Si deseas esbozar rápido y continuar: Excalidraw.

Si deseas una pizarra moderna con un poco más de pulimiento que Excalidraw: tldraw. Si eres solo Mac y deseas rendimiento nativo: Sketch. Si deseas diseñar el panel y diagramar las automatizaciones juntas: Whimsical. Si ya pagas a Adobe: Adobe XD como bonificación, pero no compres la suscripción de CC para ello.

Preguntas frecuentes

¿Necesito una herramienta de diseño para construir un panel de Home Assistant? No — puedes editar Lovelace directamente en el navegador. Pero si tu panel ya está demasiado abarrotado (lo que el artículo de XDA argumentaba es la norma), esbozar un diseño objetivo antes de editar YAML hace que la limpieza sea mucho más rápida.

¿Cuál es la mejor herramienta gratuita para diseñar paneles de HA? Penpot para funciones de diseño de UI completo, Excalidraw para esbozos rápidos. Ambos son gratis para siempre y de código abierto.

¿Puedo importar mi diseño de panel de HA a Lovelace? No directamente. Las herramientas de diseño exportan imágenes o SVG; reconstruyes manualmente el diseño en el editor de Lovelace. Algunas herramientas comunitarias traducen diseños simplificados a YAML, pero nada de renderizado perfecto existe.

¿Qué tamaño debo diseñar? Coincide con la pantalla en la que mostrarás el panel. La mayoría de los montajes en pared de cocina utilizan un iPad reutilizado (2048x1536) o una tableta Amazon Fire (1280x800). Establece tu artboard en esas dimensiones.

¿Dónde encuentro iconos de Home Assistant para la maqueta? Material Design Icons es el mismo conjunto que usa Home Assistant. Figma tiene un complemento MDI, Penpot tiene una biblioteca MDI, Excalidraw y tldraw pueden importar SVG. El prefijo mdi: en tu tarjeta de Lovelace es el nombre de icono exacto a buscar.