Автор XDA, который сделал крюк через Figma перед перестройкой своей панели Home Assistant, подчеркивал более глубокую идею, чем просто “сначала спроектируй панель”. Lovelace мощный, но его интерфейс редактирования на месте поощряет накопление — каждый новый датчик добавляет карточку, каждая карточка борется за внимание, и через полгода никто не помнит, для чего вообще нужна панель. Эскизирование целевого макета в настоящем инструменте дизайна вынуждает вас выбрать, что действительно должно быть на планшете на стене и что должно быть доступно одним касанием.
Мы протестировали семь приложений для дизайна на настольных компьютерах для планирования панелей Home Assistant перед тем, как вы коснетесь хотя бы одного блока YAML. Каждый выбор работает на Windows, macOS или Linux (Sketch только на Mac). Мы ранжировали их по тому, как быстро вы сможете перейти от чистого холста к макету панели с реальными значками Material, реальными виджетами погоды и макетом, который вы сможете передать редактору Lovelace.
На что обратить внимание при выборе инструмента для дизайна HA панели
- Бесплатный уровень, подходящий для хобби-проекта. Вы строите одну панель, а не выпускаете продукт. Все, что слишком агрессивно ограничивает количество артбордов, исключено.
- Библиотеки значков. Home Assistant использует Material Design Icons везде. Инструменты с плагинами MDI или легким экспортом значков экономят часы.
- Сетка и расстояние 8 пт. Lovelace использует сетку из 12 столбцов по умолчанию. Инструменты, которые упрощают работу с сеткой, ускоряют создание макетов.
- Экспорт в общую ссылку или встроенное содержимое. Вы хотите вставить макет на форум HA или поделиться им с семьей, которая будет использовать панель.
- Компонентная переиспользуемость. Карточки повторяются на разных панелях. Инструмент, который позволяет построить компонент карточки и переиспользовать его, работает быстрее, чем начинать с нуля на каждом экране.
Быстрое сравнение
| Приложение | Лучше всего для | Платформы | Бесплатный план | Начальная цена | Примечания |
|---|---|---|---|---|---|
| Figma | Полнофункциональный дизайн UI | Web/Win/Mac | 3 файла, неограниченные личные | 15 USD/мес Pro | Выбор статьи XDA |
| Penpot | Open-source 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, которые вы можете бросить в любой проект, и система сетки выравнивается чистко с 12-столбцовым макетом Lovelace. Компоненты и Auto Layout означают, что вы строите “карточку датчика” один раз и переиспользуете ее везде.
Где это не срабатывает: Ограничение в три файла для бесплатного плана срабатывает быстро, если вы держите отдельные файлы для каждой панели. Требует учетную запись (теперь принадлежит Adobe).
Цены:
- Бесплатно: 3 файла с неограниченными личными черновиками.
- Pro: 15 USD/мес на редактора за неограниченные файлы и командные библиотеки.
Платформы: Web, приложение для Windows, приложение для macOS.
Скачать: Официальный сайт Figma
Вывод: Наиболее поддерживаемый выбор. Если у вас уже есть учетная запись Figma, используйте ее. Если вы озабочены приватностью относительно облака Adobe/Figma, перейдите на Penpot.
2. Penpot — Лучший открытый эквивалент Figma
Penpot — это полностью открытый инструмент дизайна, который запускает тот же набор функций, что и Figma (Auto Layout, компоненты, совместная работа в реальном времени), либо через их размещенный сервис, либо через ваш собственный контейнер Docker. Для пользователя, самохостяемого Home Assistant, это выравнивание стоит стоимости настройки — ваши файлы дизайна и ваш стек умного дома живут на одной машине.
Где это не срабатывает: Экосистема плагинов значков тоньше. Некоторые рабочие процессы, специфичные для Figma (переменные, продвинутый Auto Layout), появились позже, чем в Figma.
Цены:
- Бесплатный уровень на размещенном Penpot с неограниченными файлами.
- Бесплатно навсегда, если вы самохостяетесь с Docker.
Платформы: Web, Windows, macOS, Linux, самохостяемый.
Скачать: Официальный сайт Penpot
Вывод: Инструмент дизайна, который соответствует этосу самохостинга Home Assistant. Распространяется везде, где Figma, без учетной записи Adobe.
3. Excalidraw — Лучше всего для быстрых эскизов
Excalidraw — это инструмент доски с рукописным стилем, который превращает пустую страницу в приблизительный макет примерно за 90 секунд. Идеально для первого прохода — вы пытаетесь не зафиксировать размеры карточек с точностью до пикселя, вы решаете, что куда идет. Сохраняйте файл локально как .excalidraw, делитесь ссылкой или экспортируйте в PNG или SVG.
Где это не срабатывает: Это не настоящий инструмент UI. После того как вы узнаете макет, вы захотите переделать его в Figma или Penpot для полированной версии.
Цены:
- Бесплатно и открытый исходный код под лицензией MIT.
- Excalidraw+ (размещено с совместной работой в реальном времени): 7 USD/мес.
Платформы: Web, Windows, macOS, Linux (как прогрессивное веб-приложение или Electron).
Скачать: Веб-приложение Excalidraw или GitHub Excalidraw
Вывод: Инструмент для первого прохода эскиза. Не для финального макета.
4. tldraw — Лучше всего для современной доски
tldraw — это современный инструмент доски с совместной работой в реальном времени, бесконечным холстом и языком дизайна где-то между Miro и Figma. Его функция Make Real (превратить эскизы в интерактивный HTML с LLM) забавна для создания прототипов карточек; библиотека фигур достаточно широкая для создания макетов панелей без переключения инструментов.
Где это не срабатывает: Не разработано как инструмент UI, поэтому дисциплина сетки на вас. Совместная работа в реальном времени требует размещенного сервиса.
Цены:
- Бесплатно и открытый исходный код под лицензией tldraw Standard (похожей на MIT).
- Самохостяемый или встроенный бесплатно.
Платформы: Web, Windows, macOS, Linux (PWA и Electron).
Скачать: Веб-приложение tldraw или GitHub tldraw
Вывод: Выбирайте, если Excalidraw слишком грубый, а Figma слишком тяжелый. Средняя доска.
5. Sketch — Лучший Mac-нативный инструмент дизайна
Sketch — это оригинальный инструмент дизайна UI на Mac. Производительность нативного приложения все еще впереди конкурентов на основе Electron, символы и библиотеки зрелые, и синхронизация Sketch Cloud опциональна (вы можете держать ваши файлы полностью локально). Для рабочих процессов только на Mac это все еще самый быстрый инструмент.
Где это не срабатывает: Только Mac. Нет приложений для Windows или Linux. Рынок в основном перешел на Figma.
Цены:
- 30-дневный бесплатный пробный период.
- 12 USD/мес Standard, 20 USD/мес Business.
- Лицензии для образования и открытого исходного кода доступны.
Платформы: только macOS (Sonoma или позже).
Скачать: Официальный сайт Sketch
Вывод: Выбор Mac-нативного инструмента, который все еще держится с современным Figma в производительности. Рекомендуется только если вы работаете только на Mac.
6. Whimsical — Лучше всего для гибрида макета + блок-схемы
Whimsical — это гибридный инструмент дизайна, который объединяет каркасирование, блок-схемы, ментальные карты и стикеры. Набор каркасов имеет достаточно встроенных компонентов для создания макета панели за десять минут, и режим блок-схемы полезен для планирования автоматизаций HA наряду с UI.
Где это не срабатывает: Бесплатный уровень ограничивает вас четырьмя досками. Не для работы с точностью до пикселя.
Цены:
- Бесплатно: 4 доски.
- Pro: 12 USD/мес на редактора.
Платформы: Веб-приложение, Windows, macOS, Linux (как PWA).
Скачать: Официальный сайт Whimsical
Вывод: Выбирайте, если вы хотите спроектировать панель И диаграмму автоматизаций в одном инструменте. Пропустите, если у вас уже есть Miro.
7. Adobe XD — Лучше всего для существующих рабочих процессов Adobe
Adobe XD был конкурентом Figma от Adobe. Разработка по сути остановлена, но приложение все еще работает, все еще экспортирует, все еще интегрируется с остальной 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? Penpot для полнофункционального дизайна UI, Excalidraw для быстрых эскизов. Оба бесплатны навсегда и открытый исходный код.
Могу ли я импортировать мой дизайн панели HA в Lovelace? Не напрямую. Инструменты дизайна экспортируют изображения или SVG; вы вручную перестраиваете макет в редакторе Lovelace. Некоторые инструменты сообщества переводят упрощенные макеты в YAML, но ничего идеального по рендерингу не существует.
Какой размер мне следует спроектировать? Соответствуйте дисплею, на котором вы покажете панель. Большинство кухонных настенных монтажей используют переработанный iPad (2048x1536) или планшет Amazon Fire (1280x800). Установите ваш артборд на эти размеры.
Где найти значки Home Assistant для макета?
Material Design Icons — это тот же набор, который использует Home Assistant. Figma имеет плагин MDI, Penpot имеет библиотеку MDI, Excalidraw и tldraw могут импортировать SVG. Префикс mdi: в вашей карточке Lovelace — это точное имя значка для поиска.
