Planejamento de design de painel Home Assistant com ferramentas de desktop

O escritor da XDA que fez um desvio pelo Figma antes de reconstruir seu painel Home Assistant estava fazendo um ponto maior do que “projete seu painel primeiro”. Lovelace é poderoso, mas sua interface de edição in-place encoraja a acumulação — cada novo sensor adiciona um cartão, cada cartão compete por atenção, e depois de seis meses ninguém sabe para que é o painel. Esboçar um layout objetivo em uma ferramenta de design real o força a escolher o que realmente pertence ao iPad montado na parede e o que deve ficar a um toque de distância.

Testamos sete aplicativos de design em desktop para planejar painéis Home Assistant antes de tocar um único bloco YAML. Cada opção funciona no Windows, macOS ou Linux (Sketch apenas Mac). Nós os classificamos por quanto rápido você pode ir de uma tela em branco para um mockup de painel com ícones Material reais, widgets de clima reais e um layout que você pode entregar ao editor Lovelace.

O que procurar em uma ferramenta de design para painéis HA

Comparação rápida

Aplicativo Melhor para Plataformas Plano gratuito Preço inicial Notas
Figma Design de UI completo Web/Win/Mac 3 arquivos, rascunhos pessoais ilimitados 15 USD/mês Pro Escolha do artigo XDA
Penpot Figma de código aberto Web/Win/Mac/Linux Todos os recursos grátis Gratuito (auto-hospedado) Auto-hospedável, sem bloqueio
Excalidraw Esboços de quadro branco rápidos Web/Win/Mac/Linux Todos os recursos grátis Gratuito Estética desenhada à mão
tldraw Quadro branco moderno Web/Win/Mac/Linux Todos os recursos grátis Gratuito Colaboração em tempo real
Sketch Ferramenta de design nativa do Mac Mac Teste gratuito de 30 dias 12 USD/mês Apenas Mac
Whimsical Layout híbrido + fluxograma Web/Win/Mac/Linux 4 quadros 12 USD/mês Kit de wireframe integrado
Adobe XD Integração de pilha Adobe Win/Mac Gratuito (congelado) Incluído em CC Desenvolvimento congelado mas ainda funciona

Os aplicativos

1. Figma — Melhor para design de UI completo

Figma é a ferramenta que o artigo da XDA usou, e com razão. O plano gratuito cobre três arquivos com rascunhos pessoais ilimitados, a comunidade tem bibliotecas de ícones Material Design que você pode colocar em qualquer projeto, e o sistema de grade se alinha perfeitamente com o layout de 12 colunas do Lovelace. Componentes e Auto Layout significam que você constrói um “cartão de sensor” uma vez e o reutiliza em toda parte.

Onde falha: O limite gratuito de três arquivos é atingido rapidamente se você manter arquivos separados por painel. Requer uma conta (agora propriedade da Adobe).

Preços:

Plataformas: Web, aplicativo de desktop Windows, aplicativo de desktop macOS.

Download: Site oficial do Figma

Conclusão: A escolha mais apoiada. Se você já tem uma conta Figma, use-a. Se você se preocupa com privacidade com relação à nuvem Adobe/Figma, passe para Penpot.

2. Penpot — Melhor equivalente Figma de código aberto

Penpot é a ferramenta de design completamente de código aberto que executa o mesmo conjunto de recursos que Figma (Auto Layout, componentes, colaboração em tempo real) através do seu serviço hospedado ou seu próprio contêiner Docker. Para um usuário Home Assistant auto-hospedado, esse alinhamento vale o custo da configuração — seus arquivos de design e sua pilha de casa inteligente vivem na mesma máquina.

Onde falha: O ecossistema de plugins de ícones é mais fino. Alguns fluxos de trabalho nativos do Figma (variáveis, Auto Layout avançado) chegaram mais tarde do que no Figma.

Preços:

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

Download: Site oficial do Penpot

Conclusão: A ferramenta de design que corresponde à ética de auto-hospedagem do Home Assistant. É enviada em qualquer lugar que Figma esteja, sem conta Adobe.

3. Excalidraw — Melhor para esboços rápidos

Excalidraw é a ferramenta de quadro branco desenhada à mão que transforma uma página em branco em um layout aproximado em cerca de 90 segundos. Perfeito para a primeira passagem — você não está tentando fixar tamanhos de cartão perfeitamente, está tentando decidir o que vai aonde. Salve o arquivo localmente como .excalidraw, compartilhe com um link ou exporte para PNG ou SVG.

Onde falha: Não é uma ferramenta de UI real. Depois de conhecer o layout, você vai querer redesenhá-lo no Figma ou Penpot para a versão polida.

Preços:

Plataformas: Web, Windows, macOS, Linux (como Progressive Web App ou Electron).

Download: Aplicativo web Excalidraw ou GitHub Excalidraw

Conclusão: A ferramenta para a primeira passagem de esboço. Não para o mockup final.

4. tldraw — Melhor quadro branco moderno

tldraw é a ferramenta de quadro branco moderno com colaboração em tempo real, tela infinita e linguagem de design entre Miro e Figma. Seu recurso Make Real (transforme esboços em HTML interativo com um LLM) é divertido para prototipar cartões; a biblioteca de formas é ampla o suficiente para criar mockups de painéis sem trocar de ferramentas.

Onde falha: Não foi projetado como ferramenta de UI, então a disciplina de grade é com você. A colaboração em tempo real requer o serviço hospedado.

Preços:

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

Download: Aplicativo web tldraw ou GitHub tldraw

Conclusão: Escolha isso se Excalidraw for muito áspero e Figma for muito pesado. O quadro branco do meio.

5. Sketch — Melhor ferramenta de design nativa do Mac

Sketch é a ferramenta original de design de UI no Mac. O desempenho do aplicativo nativo ainda está à frente dos concorrentes baseados em Electron, símbolos e bibliotecas são maduros, e a sincronização do Sketch Cloud é opcional (você pode manter seus arquivos totalmente locais). Para fluxos de trabalho apenas Mac, ainda é a ferramenta mais rápida.

Onde falha: Apenas Mac. Sem aplicativo Windows ou Linux. O mercado se mudou principalmente para Figma.

Preços:

Plataformas: apenas macOS (Sonoma ou posterior).

Download: Site oficial do Sketch

Conclusão: A escolha nativa do Mac que ainda se compara com o Figma moderno em desempenho. Recomendado apenas se você for uma loja apenas Mac.

6. Whimsical — Melhor layout híbrido + fluxograma

Whimsical é uma ferramenta de design híbrida que combina wireframing, fluxogramas, mapas mentais e notas adesivas. O kit de wireframe tem componentes pré-construídos suficientes para criar um mockup de painel em dez minutos, e o modo fluxograma é útil para planejar automações HA junto com a UI.

Onde falha: O nível gratuito o limita a quatro quadros. Não para trabalho de design perfeito em pixels.

Preços:

Plataformas: Aplicativo web, Windows, macOS, Linux (como PWA).

Download: Site oficial do Whimsical

Conclusão: Escolha isso se você quer projetar o painel E diagramar as automações na mesma ferramenta. Pule se você já tem Miro.

7. Adobe XD — Melhor para fluxos de trabalho Adobe existentes

Adobe XD foi o concorrente Figma da Adobe. O desenvolvimento essencialmente parou, mas o aplicativo ainda funciona, ainda exporta, ainda se integra com o resto do Creative Cloud, e os assinantes CC licenciados o obtêm como parte do seu plano. Se você já paga Adobe mensalmente, é gratuito.

Onde falha: Adobe parou o desenvolvimento ativo em 2023. A paridade de recursos com Figma fica para trás e a lacuna aumenta a cada ano.

Preços:

Plataformas: Windows e macOS.

Download: Adobe XD

Conclusão: A escolha apenas se você já tem uma assinatura Creative Cloud. Todos os outros devem começar com Figma ou Penpot.

Como escolher a correta

Se você quer a opção mais simples: Figma. Se você quer auto-hospedar para corresponder à sua configuração Home Assistant: Penpot. Se você quer esboçar rapidamente e prosseguir: Excalidraw.

Se você quer um quadro branco moderno com um pouco mais de polimento que Excalidraw: tldraw. Se você é apenas Mac e quer desempenho nativo: Sketch. Se você quer projetar o painel e diagramar as automações juntas: Whimsical. Se você já paga Adobe: Adobe XD como bônus, mas não compre a assinatura CC para isso.

Perguntas frequentes

Preciso de uma ferramenta de design para construir um painel Home Assistant? Não — você pode editar Lovelace diretamente no navegador. Mas se seu painel já está muito cheio (o que o artigo da XDA argumentava ser a norma), esboçar um layout objetivo antes de editar YAML torna a limpeza muito mais rápida.

Qual é a melhor ferramenta gratuita para projetar painéis HA? Penpot para recursos de design de UI completos, Excalidraw para esboços rápidos. Ambos são gratuitos para sempre e de código aberto.

Posso importar meu design de painel HA para Lovelace? Não diretamente. Ferramentas de design exportam imagens ou SVG; você reconstrói manualmente o layout no editor Lovelace. Algumas ferramentas da comunidade traduzem layouts simplificados para YAML, mas nada de renderização perfeita existe.

Qual tamanho devo projetar? Corresponda ao display em que você mostrará o painel. A maioria das montagens em parede da cozinha usam um iPad reciclado (2048x1536) ou um tablet Amazon Fire (1280x800). Defina seu artboard para essas dimensões.

Onde encontro ícones Home Assistant para o mockup? Material Design Icons é o mesmo conjunto que Home Assistant usa. Figma tem um plugin MDI, Penpot tem uma biblioteca MDI, Excalidraw e tldraw podem importar SVG. O prefixo mdi: em seu cartão Lovelace é o nome de ícone exato para procurar.