Рыбатекст: история одного плагина для Figma

У меня есть несколько pet-проектов, которыми я занимаюсь в свободное время. Хобби, так сказать. Я их не особенно развиваю, а денег они не приносят вовсе. Чаще всего это какие-то общедоступные инструменты, облегчающие жизнь и работу довольно узкой аудитории.

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

Идея

Несколько месяцев назад появилась задумка на основе этого API собрать плагин для Figma. Задача плагина была простая: освободить дизайнеров от необходимости каждый раз переключаться между браузером и редактором для наполнения своих макетов случайным текстом.

Но, как часто случается с такими "питомцами", изначальная идея была сильно проще того, что получилось в результате. Сперва я хотел сделать просто генератор, добавляющий текстовый слой с бредотекстом в макет. Из управления - только выбор между абзацем/предложением и их количеством. Всё.

Исследование

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

Уже при первом приближении стало ясно, что:

• часто нужны не только абзацы и предложения, но и заголовки; конечно, их можно было бы обрезать из "одинарных" предложений, однако это сложнее и упраздняет саму суть инструмента - сделать работу с бредотекстом максимально удобной;
• добавление новых текстовых слоёв в готовые макеты не всегда удобно; очень часто нужно добавить "рыбу" в уже размещённые текстовые слои, а копипастить текст из только что добавленных или каждый раз подгонять размеры нового слоя - то ещё удовольствие;
• иногда нужно наполнить разным текстом сразу несколько слоёв - например, в случае списка статей, когда сетка в макете уже сформирована;
• порой контент неоднороден, и текстовый слой с "рыбой" нужно засунуть в конкретный контейнер или даже сразу в несколько;
• если у слоёв, которые нужно наполнить текстом, фиксированный размер (они находятся, например, в компоненте), то простого указания количества предложений недостаточно - все предложения разные по длине, и результат часто выбивается за пределы блоков; нужно заполнять такие слои с учётом их размеров;
• в большинстве случаев генерация нужна один раз, после чего пользователи закрывают окно плагина (до тех пор, пока он не понадобится снова); однако закрывать его по умолчанию нельзя - кто-то, всё же, использует генератор несколько раз подряд;
• больше всего на свете дизайнеры не любят выполнять типовые действия: если плагин им часто нужен для одной и той же операции, настраивать его (выбирать тип и количество контента) каждый раз при запуске явно излишне;
• как бы не был интуитивен интерфейс, нужно дополнительное описание функций и возможностей.

Результаты

Таким образом, плагин оброс дополнительной функциональностью:

1. Заголовки в выборе контента (помимо абзацев и предложений).
2. Добавление указанного количества "рыбы" в уже размещённые на макете слои (один или несколько).
3. Добавление новых слоёв с рыбатекстом в выбранные контейнеры (фреймы/компоненты/группы).
4. Полное заполнение слоёв случайным текстом с учётом их размера (ширины и высоты).
5. Опциональное закрытие окна плагина после генерации.
6. Сохранение настроек плагина при закрытии, чтобы при повторном запуске не пришлось снова "протыкивать" те же контролы.
7. Отдельная страничка с описанием функциональности плагина. Сюда же засунул авторство и копирайты.

В результате получилось два окна:

Основные окна плагина: генерация текста и краткая инструкция

Подсказки

Окей, окно с помощью добавлено. Но ведь это же, по сути, мануал. А кто читает мануалы? Правильно, никто. Куда эффективнее добавить нашему камерному продуктику систему подсказок - чтобы пользователь прямо в контексте выполнения операций получал советы.

В нашем случае подсказки особенно нужны в двух случаях:

• когда дизайнер пытается заполнить слой текстом с учётом его размера (нужно описать, что именно понимается под "заполнить текстовый слой рыбой");
• когда дизайнер выбирает тип контента "заголовок" (он, в отличии от остальных, генерится только в единственном экземпляре - количество выбрать нельзя);

Итого, появляются интерактивные подсказки:

Подсказки в интерфейсе плагина зависят от выбора настроек пользователем

Ошибки

Грамотная обработка ошибок - залог счастья и здоровья продукта. Что будет, если пользователь выберет не тот слой, который нужно? Иконку, например?

Правильно, мы должны показать ему, что происходит нечто ужасное. И, в идеале, подсказать, что нужно сделать, чтобы предотвратить беду.

Решено. Добавляем в интерфейс обработку ошибочного выделения:

Ошибки - непрозрачный намёк пользователю, что он делает что-то не так

Дополнительно

Перед созданием этого плагина была собрана полноценная дизайн-система на Webpack, SCSS и TypeScript, которую я, возможно, ещё заюзаю при создании новых плагинов для Фигмы. Кстати, пишите в комментариях, какие плагины хотели бы видеть - посмотрим, что я могу сделать.

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

Ах да. Ссылка на сам плагин: Figma РыбаТекст.

PS

И да, не используйте рыбу в макетах. Старайтесь везде добавлять реальный текст.

Ещё больше букв и картинок про дизайн и проектирование можно увидеть на моем сайте и здесь, в дзен-канале (подписывайтесь).