The XDA writer who took a Figma detour before rebuilding their Home Assistant dashboard was making a bigger point than “design your dashboard first.” Lovelace is powerful but its edit-in-place UI encourages accretion — every new sensor adds a card, every card fights for attention, and after six months nobody knows what the dashboard is even for. Sketching a target layout in a real design tool forces you to pick what actually belongs on the wall-mounted iPad and what should live one tap away.
We tested seven design apps on desktop for planning Home Assistant dashboards before you touch a single YAML block. Every pick works on Windows, macOS, or Linux (Sketch is Mac-only). We ranked by how quickly you can go from blank canvas to a dashboard mockup with real Material icons, real weather widgets, and a layout you can hand to your Lovelace editor.
What to look for in a design tool for HA dashboards
- Free tier that fits a hobby project. You’re building one dashboard, not shipping a product. Anything that gates artboard count too aggressively is out.
- Icon libraries. Home Assistant uses Material Design Icons everywhere. Tools with MDI plugins or copy-friendly icon exports save hours.
- Grid and 8-pt spacing. Lovelace uses a 12-column grid by default. Tools that make grid work painless produce faster mockups.
- Export to shareable image or embed. You want to paste the mockup into the HA forum or share it with the family that has to use the dashboard.
- Component-based reuse. Cards repeat across dashboards. A tool that lets you build a card component and reuse it is faster than starting from scratch every screen.
Quick comparison
| App | Best for | Platforms | Free plan | Starting price | Notes |
|---|---|---|---|---|---|
| Figma | Full-fledged UI design | Web/Win/Mac | 3 files, unlimited personal | 15 USD/mo Pro | The XDA article’s pick |
| Penpot | Open-source Figma | Web/Win/Mac/Linux | Full features free | Free (self-host) | Self-hostable, no lock-in |
| Excalidraw | Fast whiteboard sketches | Web/Win/Mac/Linux | Full features free | Free | Hand-drawn aesthetic |
| tldraw | Modern whiteboard | Web/Win/Mac/Linux | Full features free | Free | Real-time collaboration |
| Sketch | Mac-native design | Mac | 30-day trial | 12 USD/mo | Mac-only |
| Whimsical | Layout + flowchart hybrid | Web/Win/Mac/Linux | 4 boards | 12 USD/mo | Wireframe kit built in |
| Adobe XD | Adobe stack integration | Win/Mac | Free (frozen) | Included in CC | Development frozen but still runs |
The apps
1. Figma — Best for full-fledged UI design
Figma is the tool the XDA piece used, and for good reason. The free plan covers three files with unlimited personal drafts, the community has Material Design Icon libraries you drop into any project, and the grid system lines up cleanly with Lovelace’s 12-column layout. Components and Auto Layout mean you build a “sensor card” once and reuse it everywhere.
Where it falls short: The three-file free limit hits fast if you keep separate files per dashboard. Requires an account (Adobe-owned now).
Pricing:
- Free: 3 files with unlimited personal drafts.
- Pro: 15 USD/mo per editor for unlimited files and team libraries.
Platforms: Web, Windows desktop app, macOS desktop app.
Download: Figma official site
Bottom line: The best-supported pick. If you already have a Figma account, use it. If you’re privacy-conscious about Adobe/Figma cloud, jump to Penpot.
2. Penpot — Best open-source Figma equivalent
Penpot is the fully open-source design tool that runs the same feature set as Figma (Auto Layout, components, real-time collab) either through their hosted service or your own Docker container. For a self-hosting Home Assistant user, that alignment is worth the setup cost — your design files and your smart home stack live on the same machine.
Where it falls short: Icon plugin ecosystem is thinner. Some Figma-native workflows (variables, advanced Auto Layout) landed later than in Figma.
Pricing:
- Free tier on hosted Penpot with unlimited files.
- Free forever if you self-host with Docker.
Platforms: Web, Windows, macOS, Linux, self-hosted.
Download: Penpot official site
Bottom line: The design tool that matches Home Assistant’s self-hosting ethos. Ships everywhere Figma does, without the Adobe account.
3. Excalidraw — Best for fast sketches
Excalidraw is the hand-drawn whiteboard tool that turns a blank page into a rough layout in about 90 seconds. Perfect for the first pass — you’re not trying to pixel-nail card sizes, you’re trying to decide what goes where. Save the file locally as .excalidraw, share it with a link, or export to PNG or SVG.
Where it falls short: Not a real UI tool. Once you know the layout you’ll want to redraw it in Figma or Penpot for the polished version.
Pricing:
- Free and open-source under the MIT license.
- Excalidraw+ (hosted with real-time collab): 7 USD/mo.
Platforms: Web, Windows, macOS, Linux (as Progressive Web App or Electron).
Download: Excalidraw web app or Excalidraw GitHub
Bottom line: The tool for the first sketch pass. Not for the final mockup.
4. tldraw — Best modern whiteboard
tldraw is the modern whiteboard tool with real-time collaboration, infinite canvas, and a design language somewhere between Miro and Figma. Its Make Real feature (turn sketches into interactive HTML with an LLM) is fun for prototyping cards; the shape library is broad enough to mock up dashboards without switching tools.
Where it falls short: Not designed as a UI tool, so grid discipline is on you. Real-time collab requires the hosted service.
Pricing:
- Free and open-source under the tldraw Standard License (MIT-like).
- Self-hosted or embedded free.
Platforms: Web, Windows, macOS, Linux (PWA and Electron).
Download: tldraw web app or tldraw GitHub
Bottom line: Pick this if Excalidraw is too rough and Figma is too heavy. The middle-ground whiteboard.
5. Sketch — Best Mac-native design tool
Sketch is the OG UI design tool on Mac. Native app performance is still ahead of Electron-based competitors, symbols and libraries are mature, and the Sketch Cloud sync is optional (you can keep your files entirely local). For Mac-only workflows it’s still the fastest tool.
Where it falls short: Mac only. No Windows or Linux app. The market has largely moved to Figma.
Pricing:
- 30-day free trial.
- 12 USD/mo Standard, 20 USD/mo Business.
- Educational and open-source licenses available.
Platforms: macOS only (Sonoma or later).
Download: Sketch official site
Bottom line: The Mac-native pick that still hangs with modern Figma on performance. Only recommended if you’re a Mac-only shop.
6. Whimsical — Best layout + flowchart hybrid
Whimsical is a hybrid design tool that combines wireframing, flowcharts, mind maps, and sticky notes. The wireframing kit has enough pre-built components to mock a dashboard in ten minutes, and the flowchart mode is useful for planning HA automations alongside the UI.
Where it falls short: Free tier caps you at four boards. Not for pixel-perfect design work.
Pricing:
- Free: 4 boards.
- Pro: 12 USD/mo per editor.
Platforms: Web app, Windows, macOS, Linux (as PWA).
Download: Whimsical official site
Bottom line: Pick this if you want to design the dashboard AND diagram the automations in the same tool. Skip if you already have Miro.
7. Adobe XD — Best for existing Adobe workflows
Adobe XD was Adobe’s Figma competitor. Development has essentially stopped, but the app still runs, still exports, still integrates with the rest of Creative Cloud, and licensed CC subscribers get it as part of their plan. If you already pay Adobe monthly, it’s free.
Where it falls short: Adobe stopped active development in 2023. Feature parity with Figma is behind and the gap widens every year.
Pricing:
- Free version still available.
- Bundled with Adobe Creative Cloud (54.99 USD/mo).
Platforms: Windows and macOS.
Download: Adobe XD
Bottom line: The pick only if you already have a Creative Cloud subscription. Everyone else should start with Figma or Penpot.
How to pick the right one
If you want the simplest option: Figma. If you want to self-host to match your Home Assistant setup: Penpot. If you want to sketch fast and move on: Excalidraw.
If you want a modern whiteboard with a bit more polish than Excalidraw: tldraw. If you’re Mac-only and want native performance: Sketch. If you want to design the dashboard and diagram the automations together: Whimsical. If you already pay Adobe: Adobe XD as a bonus, but don’t buy the CC subscription for it.
FAQ
Do I need a design tool to build a Home Assistant dashboard? No — you can edit Lovelace directly in the browser. But if your dashboard is already too crowded (which the XDA piece argued is the norm), sketching a target layout before editing YAML makes cleanup much faster.
What is the best free tool for designing HA dashboards? Penpot for full UI-design features, Excalidraw for fast sketches. Both are free forever and open-source.
Can I import my HA dashboard design into Lovelace? Not directly. Design tools export images or SVGs; you manually rebuild the layout in the Lovelace editor. Some community tools translate simplified layouts to YAML, but nothing rendering-perfect exists.
What size should I design for? Match the display you’ll show the dashboard on. Most kitchen wall-mounts use a repurposed iPad (2048x1536) or an Amazon Fire tablet (1280x800). Set your artboard to those dimensions.
Where do I find Home Assistant icons for the mockup?
Material Design Icons is the same set Home Assistant uses. Figma has an MDI plugin, Penpot has an MDI library, Excalidraw and tldraw can import SVG. The mdi: prefix in your Lovelace card is the exact icon name to search.
