Реально ли создавать мокапы в draw.io?

Спойлер: да, но с рядом оговорок.

Давно использую draw.io для рисования блок-схем и проектирования бизнес-процессов, в этом качестве он не нуждается в особом представлении, но в прошлом году внимательно присмотрелся к нему как к инструменту для создания мокапов (блочных прототипов интерфейсов).

Сегодня появилась возможность, хоть и с некоторыми потерями и риском, оплатить зарубежные сервисы, но в какой-то момент нужно было искать им достойную замену. В первую очередь изучил opensource проекты, но большая их часть, типа Pencil, выглядят устаревшими и почти не развиваются. Draw.io на их фоне смотрится более чем достойно.

Draw.io не создавался как инструмент для создания мокапов, но настроить в нём рабочую среду для эффективного прототипирования там возможно.

Кнопкой «Больше фигур» добавляем библиотеки с элементами для создания мокапов, я использую Bootstrap, Android и iOS.

Часть фигур — это готовые кусочки интерфейсов, которые сгруппированы из отдельных элементов. Разгруппируйте такой интерфейс и сохраните в Избранном отдельную фигуру, если планируете часто её использовать. К примеру, это один элемент из библиотеки Bootstrap:

В сети также есть ряд XML библиотек с готовыми элементами для draw.io. Часть таких библиотек — это коллекции иконок, но мне показалось более удобным хранить иконки в виде коллекции SVG файлов в локальных папках. В сети много открытых коллекций таких иконок практически на любой вкус.

После создания нового файла отключаем в настройках страницы точки и стрелки соединения, чтобы при проектировании интерфейсов случайно не создать кучу ненужных стрелок между элементами.

Для удобства можно изменить размер сетки и отключить вид страницы, чтобы получить бесконечное поле для работы.

Кроссплатформенность. Редактор запускается как в вебе, так и через десктопное приложение под Windows, macOS, Linux и даже Chrome OS.

Элементы могут «прилипать» к сетке и выравниваться относительно друг друга. Их можно группировать, блокировать, управлять Z-индексом и т.п. Вроде, стандартные фичи, но в некоторых мокап-редакторах недостаёт какой-то обидной детали, из-за которой работа превращается в ад.

Можно создавать отдельные коллекции элементов как для себя, так и для своих коллег, это позволяет внедрить общие для команды стандарты даже в прототипировании интерфейсов.

Одну из страниц можно использовать как фон для других. Например, хедер и сайдбар, которые станут основой для остальных интерфейсов. Для редакторов мокапов это тоже достаточно привычная фича, рад, что в draw.io она реализована.

Интересная возможность поделиться результатом с клиентом в виде ссылки, в параметры которой в Base64 зашит весь контент прототипа. Да, ссылка получается очень громоздкой, но никто не мешает использовать сокращатели ссылок.

Навигация отдельных страниц через табы. Если в проекте будет большое количество страниц, управление им превратится в откровенный ад.

Большая часть элементов из коллекций практически никак не кастомизируется или эта кастомизация запрятана так глубоко, что до неё сложно добраться. Чекбокс не сделать просто так включенным или выключенным, кнопку неактивной и т.д. Приходится править вид элемента цветом фона или шрифта или сохранять вариации чекбокса как отдельные элементы.

Никакой командной работы — совместного редактирования, комментариев, разных прав доступа к проекту. Но на то это и бесплатный инструмент.

Перед прототипированием необходимо настроить среду под себя. Что ни говорите, а необходимость при старте работы каждый раз хоть что-то донастраивать раздражает.

Нет возможности настроить колоночную сетку, как в бутстрапе. Можно использовать только «миллиметровку».

Список плюсов и минусов можно расширить, тем более, отчасти они субъективны. Для меня это инструмент на твёрдую 4-ку (по пятибалльной шкале), который можно использовать в реальной работе.

В draw.io можно эффективно работать с простыми проектами, в которых используется не больше 8-10 интерфейсов.

Инструмент хорош для нерегулярного прототипирования. Когда нет возможности или желания платить регулярную абонентку за возможность иногда делать прототипы.

Draw.io также хорошо использовать для обучения созданию мокапов. Он даёт достаточно возможностей для того, чтобы разобраться в тонкостях создания блочных прототипов и набить руку.