Как быстро найти старый сценарий с помощью нового плагина Catalog — кейс-разработка дизайнера Touch Instinct
В Touch Instinct мы занимаемся мобильной и веб-разработкой для крупных компаний. Как правило, это масштабные долгоиграющие проекты, над которыми трудится большая команда. Каждый проект не похож на предыдущий, но рано или поздно в ходе работы наступает момент, когда необходимо обратиться к старым сценариям.
Ситуации могут быть разными, например:
- дизайнер хочет подсмотреть в старом проекте интересную идею;
- у менеджера устарели ссылки на макеты в jira;
- продакту нужно освежить в памяти проделанную работу.
Но если проектов много, найти тот самый сценарий непросто. Во-первых, все макеты и сценарии могут быть пронумерованы неаккуратно – без определенной логики и системы, во-вторых, отсматривать всё это придется в ручном режиме. Такая работа отнимает много времени, которое дизайнер мог бы потратить на более интересные задачи.
Мы решили сделать специальный плагин, который поможет находить старые сценарии быстро и просто. Рассказываем, с чего всё началось и как устроен плагин.
Как нумеровали сценарии вручную и почему отказались от этой идеи
На самом деле, идея создания плагина появилась не сразу. Сначала мы пытались стандартизировать и внедрить ручную нумерацию. Сделали содержание со ссылками на разделы в файле Figma и разбили их на три уровня. Такое решение лишь немного упростило поиск. Чтобы найти нужный сценарий, по-прежнему приходилось читать много текста, к тому же добавилась ещё одна задача: формирование и поддержка такого содержания.
Затем продумали удобные заголовки сценариев и их групп. Мы и раньше использовали в наших проектах заголовки, но у них был один существенный недостаток — сквозная нумерация, где свой номер имели только конечные сценарии, а у групп сценариев его не было. И если нужно было добавить новый сценарий или удалить старый, приходилось редактировать нумерацию всех последующих сценариев. Разумеется, переименовывать сотни макетов в ручном режиме очень неудобно. Вдобавок, номера сценариев постоянно менялись, и это усложняло работу разработчиков.
Тогда мы стали использовать индексную нумерацию, где каждой группе сценариев присваивается свой индекс (порядковый номер), а конечный номер сценария формируется из индекса группы + индекса подгруппы (если требуется) + порядкового номера самого сценария. Мы ограничились тремя уровнями вложенности, потому что, если бы вложенностей было больше, номер каждого сценария стал бы длинным и неудобным, а структура оглавления – сложной.
Такие доработки улучшили ситуацию, но действия в ручном режиме всё ещё отнимали много сил и времени. Процесс надо было автоматизировать.
Как работает плагин
Мы разработали новый плагин внутри Figma и научили его распознавать три типа уровней. Благодаря этому плагин может создавать оглавления с тремя вариантами заголовков, где:
- H1 — группы сценариев,
- H2 — подгруппы,
- H3 — сценарии.
Пользователю нужно только скопировать эти заголовки и расставить их рядом с макетами. Затем запустится плагин, который самостоятельно найдёт все компоненты, выстроит иерархию и сгенерирует содержание.
Всё это плагин может сделать, так как умеет распознавать вложенность групп, подгрупп и сценариев. Для этого мы использовали координаты компонентов: сначала плагин находит все заголовки Н1 и определяет их координаты, а затем группирует по «этажам» — это такие горизонтальные коридоры шириной 3000 px. Он сравнивает их координаты по оси Y, а потом сортирует по оси X от левых к правым. «Этажи» нужны для того, чтобы бороться с погрешностями. Например, дизайнер мог подвинуть компонент на несколько пикселей вверх, и из-за этого плагин будет считывать иерархию неверно. Распределив по этой схеме каждый «этаж», мы присваиваем ему порядковый номер.
Далее определяются зоны каждой группы H1 — для этого плагин также использует координаты целевой группы и ее соседей. Первая координата — это левая точка компонента, для определения второй используется показатель Y первой точки компонента и показатель X первой точки соседа справа по «этажу». Чтобы определить третью точку, мы используем X первой точки и Y первой точки соседа «этажом» ниже. По аналогичному алгоритму определяются и зоны заголовков H2 и H3.
Так появился плагин Catalog, который позволяет создавать оглавление с вашими сценариями (разделами).
Как устроено оглавление
- Все сценарии собраны в каталог с древовидной структурой и четкой иерархией разделов. Перемещаясь по разделам, вы сможете быстро искать нужные проекты и автоматически нумеровать их.
- Группы сценариев хранятся в папках, которые можно сворачивать и разворачивать. Такая структура позволяет быстро найти нужный проект по названию, номеру задачи, дате или дизайнеру-исполнителю.
- Плагин быстро сканирует всю страницу и находит новые компоненты сценариев, автоматически обновляя свое содержание. Catalog всегда остается актуальным.
- Если плагин обнаружит некорректные ссылки, он их починит и актуализирует.
- Все макеты можно нумеровать в автоматическом режиме — на это не придется тратить много времени.
Плагин удобно использовать на большом проекте с огромным количеством сценариев. По ключевым словам или по номеру задачи в Jira сразу находишь нужный сценарий. Тут же видишь дизайнера, который его сделал, и знаешь, к кому идти задавать вопросы, если они появляются. Не то, что было раньше: пишешь в чат, спрашиваешь, кто автор. При этом иногда могут дать контакт не того человека. Плагин сильно экономит время.
В какой-то момент мы начали использовать Catalog и для библиотеки и навели порядок в ее компонентах. Найти что-то нужное теперь можно быстро и просто.
Как дизайнеру запустить плагин
Разметка сценариев
При запуске плагин создает главные компоненты catalog / scenario, которые можно хранить в локальной или во внешней библиотеке. Их можно использовать в разных файлах.
Инстансы компонента catalog / scenario нужно расположить рядом с вашими сценариями, разметив структуру проекта.
Есть три типа заголовков, которые образуют понятную иерархическую структуру:
H1 — большие разделы,
- Н2 — группы сценариев,
- H3 — сценарии.
Номер сценария формируется из трех цифр, разделенных точками, например: 2.5.1а, где 2 — это индекс раздела H1, 5 — это индекс раздела Н2, а 1 — индекс сценария Н3. Буква а латинского алфавита присваивается конкретному фрейму. Если какого-то из этих разделов нет, его индекс просто не выводится.
Плагин определяет зоны разделов путем сопоставления координат верхнего левого угла компонентов, так что нужно следить, чтобы дочерние разделы не выходили из зоны родительского.
Если что-то станет непонятно, можно зайти в настройки плагина и найти там «Справку» с подробной инструкцией. Она не только поможет разобраться в принципах работы плагина, но и познакомит с удачными примерами пользовательского опыта, best practices.
После разметки всех сценариев, нужно повторно запустить плагин. Он пройдется по всем инстансам catalog / scenario, выстроит иерархическую структуру и сформирует удобный и понятный каталог сценариев, где все разложено по полочкам, то есть по папкам.
Нумерация разделов
Чтобы пронумеровать или назвать разделы, сценарии и макеты, нужно нажать на соответствующую иконку. Она находится в верхнем правом углу.
Важно! При разметке сценариев необязательно указывать номера вручную, плагин умеет нумеровать разделы в автоматическом режиме. Для этого в настройках нужно активировать автонумерацию, и тогда при каждом запуске плагина макеты будут нумероваться автоматически. Номер сценария в этом случае будет выглядеть так: 2.5.1а desktop.
При сканировании страницы плагин может выдать ошибки, которые будут выведены в специальном разделе. В тексте ошибки будет написано, в чем проблема и как ее устранить.
Параметры заголовков
У заголовка H3 есть параметры, которые характеризуют каждый сценарий:
- Статус. По умолчанию их шесть. Но если не хватит дефолтных, можно добавить свои. Для этого нужно продублировать один из статусов, переименовать копию, выбрать цвет и иллюстрацию. Главное — делать все по шаблону. Ненужный статус можно удалить.
- Дата. Например, дата создания сценария или дата его последнего обновления.
- Номер задачи. Для удобства можно использовать тот же номер, что и в task jira.
- Дизайнер проекта. В имя дизайнера можно вшить ссылку на профиль в Telegram или в другом мессенджере. Если у менеджера или еще кого-то из команды возникнут вопросы, он сможет быстро написать дизайнеру — не придется искать контакты.Создать нового дизайнера можно так же, как и новый статус.
- Описание. Сюда можно внесли любые комментарии о проекте. Это поле есть у всех типов заголовков.
Любое поле можно отключить и включить по необходимости.
Поиск нужного сценария
Искать конкретный сценарий можно как вручную, самостоятельно передвигаясь по веткам и папкам, так и с помощью поиска: по названию и другим параметрам (например, по дате или дизайнеру-исполнителю), за исключением описания.
Основные проблемы с потерей макетов раньше были связаны с некорректным копированием ссылки на макет (ссылка далее используется в качестве артефакта во многих этапах разработки) и с перемещением макетов (исходная ссылка также перестает работать). Плагин решает проблему с переносом макетов, так как, даже если макеты были перенесены в другую среду, например в production, каталог предоставит доступ к макетам — ссылка на сценарий динамическая и автоматически актуализируется при переносе сценария.
Плагин поддерживает авторизацию с возможностью создания новых учетных записей для предоставления доступа к веб-каталогу заказчику.
Бонус: веб-версия плагина
Протестировав плагин, мы убедились, что он сильно облегчает поиск сценариев, но имеет несколько ограничений:
- Использовать плагин могут только дизайнеры, у которых есть права на редактирование и доступ к содержанию файлов.
- У нас есть проекты, которые разбиты на несколько страниц или файлов, а плагин может работать только в рамках активной страницы. Из-за этого неудобно работать с некоторыми сценариями — проект дробится, и его нельзя просмотреть целиком в одном месте.
- Чтобы найти сценарий, надо запускать Figma и ждать, пока загрузится нужный файл. Обычно он тяжелый, и его загрузка занимает много времени.
Мы поняли, что хранить все проекты на Figma недостаточно, так как они должны быть в доступе у всех членов команды и находиться быстрее, чем это позволяет программа. Поэтому мы разработали веб-версию плагина — Web-catalog. Для его создания использовали Firebase: облачную базу данных, которая позволяет создавать аккаунт без авторизации и регистрации.
Технически Web-catalog — это сервис, куда можно загрузить содержимое всех проектов, и оно будет доступно не только дизайнерам, но и менеджерам, и другим участникам.
Как работать с веб-версией плагина
Проекты можно искать в Web-catalog, но каждый из них придется загружать отдельно. Чтобы это сделать, нужно:
- Нажать на значок облака в тулбаре.
- Перейти на сайт и зарегистрироваться.
- Создать проект на сайте.
- Вернуться в плагин и авторизоваться с теми же данными, которые были указаны при регистрации на сайте.
- Выбрать проект, в который будет выгружаться содержимое с Figma.
- Также выгружаются и другие проекты — регистрироваться и авторизоваться заново не нужно.
- Всё! После этого можно давать ссылку на веб-каталог менеджерам, и они смогут быстро искать нужный сценарий и переходить в Figma.
Ссылка для скачивания плагина
Плагин Catalog выручает нас во время работы над крупными проектами: банками, страховыми сервисами, маркетплейсами и интернет-магазинами. Он экономит время, позволяя быстро найти нужный сценарий.
Уверены, что эта разработка пригодится и вам. Скачать плагин можно по ссылке ниже, доступ к нему открыт для всех.
Enjoy!