Я проектирую высоконагруженные интерфейсы для B2B и B2E-сегментов, где работа с большими таблицами — практически повседневная задача. Заполнять такие таблицы вручную неудобно и занимает массу времени.
Я пробовал разные плагины, помогающие генерировать тестовые данные, но большинство из них англоязычные и поддерживают только западные форматы данных. У всех решений, что я тестировал, находилось одно критичное ограничение: нельзя сгенерировать сразу несколько типов данных за один раз. Приходится действовать пошагово — сначала выбираю текстовые блоки из одной колонки и генерирую имена, затем в другой колонке генерирую почты, потом телефоны. Такой процесс сильно тормозит работу.
Так у меня появилась идея — сделать плагин, адаптированный под наш российский рынок, который будет автоматизировать заполнение таблиц и экономить время дизайнеров.
Так родился на свет плагин Mirage, который помогает быстро генерировать тестовые данные в таблицы и текстовые блоки.
Процесс работы над плагином
Бодрое начало
Свою работу я начал с дискавери:
Изучил похожие плагины, выписал их сильные и слабые стороны;
Выписал боли пользователей;
Попутно генерировал свои идеи;
Проанализировал полученную информацию и по итогу сформировал беклог, с которым предстояло работать.
На следующем шаге приступил к дизайну. Концепт я набросал быстро:
Мне понравилось что получилось, и все следующие доработки по визуальной части были минорные. После я перешёл к изучению документации для разработчиков Figma. Так как я не могу назвать себя программистом, погрузиться в тему мне помогли нейросети Perplexity и Deepseek: они отвечали на вопросы, формировали примеры кода и подсказывали возможные решения. Первый черновой рабочий прототип я написал за вечер. Он запускался и даже генерировал данные, но багов хватало. Например, плагин умел строить мастер-строку только для обычных фреймов, но инстансы не распознавал. Исправление одной ошибки часто ломало другой участок кода или искажало общую логику. Результат оставался сырым, и я понял, что дальше так двигаться не получится.
Всё с нуля
Я принял, пожалуй, самое правильное решение — каждый должен заниматься своим делом. Поэтому я нашёл отличного разработчика. Мы вместе проанализировали исходный код и пришли к выводу: чинить старое бессмысленно, лучше переписать всё с нуля.
Через несколько итераций новая версия оказалась значительно стабильнее. Т.к. я не хотел затягивать с публикацией плагина, мы не стали уделять много времени визуалу, поэтому смогли сфокусироваться на доработке кода и относительно быстро довели проект до уровня MVP.
Логика работы плагина
Главная особенность Mirage — умная работа с таблицами.
Пользователь выделяет строки, в которых нужно сгенерировать тестовые данные, и запускает плагин;
Mirage сканирует выбранные строки и проверяет их структуру. Если они совпадают по составу, создаётся мастер-строка — единый шаблон, который отображается в окне плагина;
Внутри мастер-строки каждая ячейка отображается как отдельный блок. Настроить её можно через drag-and-drop: достаточно взять нужный чип с типом данных (например, «Имя» или «Телефон») и перетащить его в ячейку. Если в ячейке несколько текстовых блоков, плагин корректно обрабатывает такие случаи. В ячейках без текстовых блоков появляется соответствующее уведомление;
Когда хотя бы одна ячейка заполнена, кнопка «Сгенерировать» становится активной, и после её нажатия шаблон автоматически воспроизводится во всех выделенных строках.
Таким образом, достаточно один раз задать конфигурацию мастер-строки, и весь массив таблицы заполняется за секунды. Магия!
MVP
При проектировании MVP-версии я сосредоточился в первую очередь на стабильности работы плагина, поэтому функционал пока включает в себя только самые востребованные типы данных:
ФИО — полное ФИО, фамилия и инициалы, фамилия + имя, имя + фамилия, только фамилия или только имя, отчество. Поддерживается выбор мужского, женского или случайного гендера;
Электронная почта — форматы популярных доменов: Яндекс, Mail.ru, Google, Рамблер;
Телефоны — мобильные и городские номера;
Дата и время — всевозможные форматы дат и времени. При этом данные генерируются по убыванию от текущей даты.
Публикация
Процесс публикации плагинов глобально состоит из двух этапов:
Подготовка плагина к публикации. Нужно оформить описание, добавить скриншоты и видео-демонстрацию работы плагина, а также указать категорию и ключевые слова;
Отправка на модерацию. Плагин проходит проверку команды Figma Community: они оценивают функциональность, безопасность и корректность работы. Модерация обычно занимает несколько дней. В моём случае — пять. В пятницу плагин был отправлен на проверку, а в следующую среду его опубликовали.
Не обошлось без небольших сложностей. На этапе оформления описания Figma выдала уникальный ID, который нужно вставить в код. Он неожиданно поломал работу плагина. Я узнал об этом, когда пришло письмо от куратора с просьбой прислать деморолик с работой плагина. При попытке записать ролик выяснилось, что перестали генерироваться данные. Мой разработчик быстро исправил ошибку, и плагин заработал корректно. Я снял деморолик и отправил его ответным письмом, упомянув о том, что пришлось править код. На следующий день куратор прислал ещё одно письмо с замечанием, что плагин ломается именно на этапе генерации данных. Я понял свою ошибку — хотя код был исправлен локально, обновлённая версия плагина не была загружена в сообщество. На следующий день после обновления плагина, пришло письмо о том, что проверка пройдена успешно и плагин опубликован.
Что дальше
Публикация в Figma Community — только начало. Бэклог из более чем 20 улучшений, которые сделают Mirage ещё полезнее и гибче, ждёт своего часа. В планах — добавление новых типов данных, расширенные настройки генерации и улучшенные UI/UX.
За спиной долгий путь — от идеи до стабильного MVP, созданного совместно с крутым разработчиком. Мы вложили много сил и времени, чтобы плагин действительно решал реальные задачи и был удобен в использовании.
Искренне надеюсь, что Mirage станет полезным инструментом для нашего дизайн-сообщества! Он уже опубликован в Figma Community, и его можно найти по этой ссылке. Пробуйте, тестируйте, давайте фидбэк — любая обратная связь поможет сделать Mirage удобнее!
P.S
На момент публикации этой статьи плагин пополнился новой группой данных — Адрес. Теперь Mirage умеет генерировать как полные адреса (индекс, улица, дом, корпус, квартира), так и его части по отдельности.