Что такое Инструмент вайрфреймов?

Набросайте макет страницы и UI-мокап за считанные секунды. Перетащите типичные элементы интерфейса — кнопки, текстовые блоки, изображения, поля ввода — на холст, а затем экспортируйте в PNG или сохраните в JSON для дальнейшего редактирования.

Холст работает на fabric.js и включает полный набор элементов: прямоугольники, текстовые блоки, кнопки, заглушки изображений, поля ввода, навбары, карточки, чекбоксы, выпадающие списки, группы переключателей, полосы прогресса, ползунки и стикеры для заметок. Масштабирование и подгонка под экран сохраняют читаемость плотных макетов, а холст можно задать в ширину телефона, планшета или десктопа. Undo, redo, группировка, разгруппировка и перестановка слоёв доступны с клавиатуры. Экспортируйте PNG или SVG для шеринга или JSON, чтобы открыть макет в том же состоянии и продолжить редактирование.

Как использовать

1. Выберите UI-элемент на панели инструментов — например, прямоугольник, текстовый блок, кнопку, заглушку изображения или поле ввода — и щёлкните на холсте, чтобы разместить его.
2. Перетаскивайте элементы для изменения положения, меняйте размер с помощью маркеров, редактируйте текст двойным щелчком. Группируйте элементы для удобного перемещения.
3. Экспортируйте вайрфрейм в PNG для обмена или сохраните в JSON, чтобы загрузить и продолжить редактирование позже.

Когда использовать

• Накидать три варианта экрана за 15 минут перед ревью со стейкхолдерами.
• Бросить набросок в Slack, вместо того чтобы описывать вёрстку словами.
• Показать джуниор-дизайнеру разницу между low- и high-fidelity работой.

Результат

Продуктовый менеджер набрасывает экран входа в мобильное приложение: заглушка логотипа, поля для email и пароля, кнопка входа и ссылка «Забыли пароль» — затем экспортирует PNG и отправляет в канал Slack.

Частые вопросы

Чем это отличается от Figma?

Figma — это high-fidelity: компоненты, прототипы, командная работа. Этот инструмент намеренно low-fidelity: небольшой набор базовых форм и никаких стилевых кроличьих нор. Идея экрана собирается за минуты, а не за вечер. Артефакт нужен для прояснения мысли, а не для хэндоффа.

Как двигать элементы по одному пикселю?

Выдели элемент и нажимай стрелки — каждый шаг по 1 пикселю. Shift со стрелкой даёт прыжки по 10 пикселей. Чтобы изменить размер, тяни угловые ручки; Shift при перетаскивании угла сохраняет пропорции.

Можно ли копировать элементы из одного вайрфрейма в другой?

Экспортируй оба макета в JSON, открой в текстовом редакторе и перенеси нужные элементы массива elements из первого во второй. Реимпорт — и формы появятся. Большинство просто дублируют Ctrl+D внутри одного файла, не возясь с JSON.

Почему JSON иногда больше PNG?

JSON хранит каждое свойство каждой фигуры (позицию, заливку, обводку, шрифт, текст) как читаемый текст. PNG — плоский растровый снимок. На плотном вайрфрейме с большим количеством текста JSON может перевесить PNG, но только JSON позволяет редактировать дальше.

Можно ли добавить свои кастомные фигуры?

Внутри инструмента — напрямую нет, но можно сгруппировать имеющиеся примитивы (Ctrl+G) в переиспользуемый блок: поиск, табы, что угодно. Сохрани JSON, скопируй блок и вставляй его в новые файлы, получится личная мини-библиотека.

Похожие инструменты