Что это
LayerX - это бесплатная утилита для macOS, которая позволяет отображать любое изображение в полупрозрачном виде поверх других окон. Главное применение - помощь разработчикам и дизайнерам в pixel-perfect-сравнении макетов и их реализации. Открыли макет в LayerX, выставили прозрачность 50%, наложили поверх симулятора или браузера - и сразу видно где реализация отклоняется от дизайна.
Программа написана на Swift нативно, размер 2 Mb. Простой минималистичный интерфейс - окно с изображением + ползунок прозрачности + кнопка always-on-top. Никаких сложных функций, только то что нужно для основной задачи.
На GitHub проект имеет 190+ звёзд, открытый код, последний релиз - апрель 2021. Лицензия не указана явно, что юридически делает её «по умолчанию закрытой» - но в практике использования утилита распространяется как бесплатное приложение для личного и коммерческого использования (исходный код доступен для аудита).
LayerX решает узкую но болезненную задачу. Когда дизайнер и разработчик утверждают что они «оба видят одно», а на самом деле макет и реализация имеют двухпиксельные различия в отступах - LayerX делает эти различия очевидными за секунду.
Кому подойдёт
В первую очередь - iOS/macOS-разработчикам, работающим в командах с высокими требованиями к pixel-perfect. В банковских, медицинских, государственных и enterprise-проектах дизайнеры обычно очень требовательны к точности воспроизведения макета. LayerX позволяет проверить себя до того как дизайнер найдёт расхождения и придёт с замечаниями.
Во вторую - фронтенд-разработчикам, которые верстают веб-страницы по макетам Figma или Sketch. Открыл макет в LayerX, наложил поверх своего рендера в Chrome/Safari - сразу видно где margin отличается, где padding не совпадает, где font-size меньше нужного.
В третью - дизайнерам, которые сами проверяют качество реализации перед тем как принимать работу разработчиков. Можно показывать конкретные расхождения с макетом не словами, а наглядно через скриншот наложения.
В четвёртую - тестировщикам визуального QA, которым важно соответствие интерфейса дизайн-спецификации. LayerX даёт быстрый способ проверить подозрительные экраны без ручного измерения отступов в Photoshop или DevTools.
В пятую - студентам, изучающим UI/UX-дизайн и фронтенд-разработку. Понимание что такое pixel-perfect - один из ключевых навыков, и LayerX помогает увидеть разницу между «приблизительно» и «точно» в дизайне.
Ключевые возможности
Загрузка изображения
LayerX поддерживает все основные форматы изображений: PNG, JPG, GIF, BMP, TIFF. Перетащите файл из Finder в окно программы или используйте File menu. Изображение откроется в новом окне с теми же пропорциями.
Регулируемая прозрачность
Ползунок прозрачности от 0% (полностью прозрачное окно, видно только нижележащее) до 100% (полностью непрозрачный макет). Оптимально для сравнения - 30-60%. На 50% видно одинаково и макет, и реализацию.
Always on top режим
Кнопка фиксирует окно LayerX поверх всех других окон. Это значит что вы можете переключаться между симулятором и браузером, между Xcode и Chrome - макет всегда виден сверху.
Click-through режим
В обычном режиме клики по окну LayerX взаимодействуют с самим окном (двигают его, меняют размер). Включите click-through, и клики начнут «проходить» через окно в нижележащее приложение. Это позволяет интерактивно работать с приложением - кликать кнопки, скроллить, печатать - не закрывая макет.
Изменение размера окна
Перетаскивание углов окна меняет размер изображения. Удобно когда макет в одном масштабе, а ваш рендер в другом - можно подогнать размером. Опционально можно зафиксировать пропорции, чтобы не искажать макет.
Перемещение окна
Drag за любую часть окна перемещает его по экрану. Точное позиционирование важно для сравнения - даже если все размеры совпадают, но макет смещён на 5px, общая картина не совпадёт.
Множественные окна
Можно открыть несколько изображений одновременно в разных окнах. Удобно когда сравниваете несколько экранов одновременно или хотите наложить несколько слоёв макета (отдельно текст, отдельно иллюстрации).
Native Swift, маленький размер
Программа написана на чистом Swift без использования сторонних рантаймов. 2 Mb на диске. Расход памяти - около 30 Mb (зависит от размера загруженного изображения). Не нагружает CPU когда не используется.
Плюсы и минусы
Плюсы:
- Полностью бесплатно.
- Открытый исходный код (доступен для аудита на GitHub).
- Простой минималистичный UI, не нужно учиться.
- Native Swift - быстрая работа, маленький размер (2 Mb).
- Click-through режим для интерактивной работы поверх приложения.
- Множественные окна для сравнения нескольких макетов.
- Поддержка всех популярных форматов изображений.
- Никаких подписок, реклам, ограничений.
Минусы:
- Лицензия явно не указана - юридически непрозрачно для коммерческого использования.
- Последний релиз - апрель 2021, обновления редкие.
- Только Mac - нет версии для Windows или Linux.
- Не имеет интеграции с Figma/Sketch (нельзя автоматически загрузить макет из плагина).
- Нет grid-overlay для измерения расстояний.
- Не поддерживает SVG (только растровые форматы).
- Не поддерживает blend modes (multiply, difference) для расширенного сравнения.
Как установить и использовать
Скачайте LayerX со страницы программы на mac-soft.ru. Программа распространяется как .app.zip с GitHub Releases - нет Homebrew Cask и нет Mac App Store-версии.
Распакуйте архив, перетащите LayerX.app в Applications. При первом запуске macOS может предупредить что приложение не подписано (программа архивирована, разработчик не обновляет подпись). Кликните правой кнопкой по иконке в Applications, выберите Open в контекстном меню, согласитесь с предупреждением.
После запуска появится окно LayerX. Перетащите в него изображение макета (PNG/JPG из Figma export или Photoshop save). Изображение появится в окне с прозрачностью 100% (непрозрачное).
Переместите окно LayerX поверх вашего работающего приложения - это может быть iOS Simulator с iPhone-приложением, Chrome с веб-страницей, превью в Xcode и так далее. Подгоните размер окна LayerX чтобы макет совпадал по масштабу с вашим рендером.
Уменьшите прозрачность до 50%. Сразу станет видно где реализация отличается от макета. Сравните отступы, шрифты, цвета, размеры элементов.
Для интерактивной работы (например прокрутить список, кликнуть кнопку) включите click-through режим. Окно LayerX останется поверх, но ваше приложение будет реагировать на клики.
Если макет высокий (длинный экран сайта или приложения), проскролльте ваше приложение вниз, потом проскролльте окно LayerX тоже вниз - сравнение должно совпадать.
Для сохранения настроек: LayerX запоминает позицию и прозрачность окна между сессиями. Если откроете тот же файл повторно - получите ту же настройку.
Альтернативы
Если LayerX не подходит - есть альтернативы:
- PerfectPixel (расширение Chrome / Firefox) - аналог для веб-разработчиков, работает в браузере. Бесплатно.
- Figma Inspect - встроенная функция Figma, показывает CSS-параметры элементов. Не позволяет наложить макет, но показывает все размеры.
- Zeplin - платная платформа для handoff между дизайнером и разработчиком.
- Sip или ColorSnapper - инструменты для проверки цветов конкретно (LayerX более общий).
- macOS Screenshot Markup - можно делать скриншоты и сравнивать в Preview, но это медленно.
LayerX занимает свою нишу: native Mac-утилита, общая (не привязана к конкретному дизайн-инструменту), бесплатная, простая.
Итог
LayerX - крошечная утилита (2 Mb), которая решает специфическую но важную задачу - помогает добиться pixel-perfect соответствия макета и реализации. Не заменяет полноценные инструменты handoff (Zeplin, Figma Dev Mode), но в простых случаях действует быстрее и не требует подписок.
Идеально подходит iOS/macOS-разработчикам в командах с высокими требованиями к качеству UI. Простая установка, минимум функций, фокус на одной задаче - всё что нужно. Открытый код, бесплатно, без рекламы.
Если вы хотя бы раз спорили с дизайнером «отступ правильный или нет» - LayerX закроет этот вопрос наглядно за минуту.
Скачать LayerX для macOS можно на mac-soft.ru. Программа бесплатная, без подписок и ограничений.
Комментарии (0)