Как поддерживать актуальность макетов в Figma или Pixso
Дизайн отличается от реализации на проде? Файлы перегружены и на 30% состоят из нереализованных сценариев? Команда не понимает что из макетов должно быть реализовано в рамках задачи, а что нет? В статье расскажу как решить эти проблемы и поддерживать файлы в актуальном виде
Проблематика
Раньше у нас, в одной из команд Ростелекома, был подход, когда есть файл Work, где дизайнеры проектируют сценарии, а есть файл Demo, где лежат уже согласованные макеты, которые готовы к передаче в разработку.
Мы создавали дизайн для задачи, а потом макеты лежали в файле Demo и ждали пока их возьмут в релиз. Сценарии могли лежать так месяцами и даже годами. К моменту передачи в разработку макеты уже теряли свою актуальность из-за того, что менялись требования по задаче или вносились изменения в макетах, связанные с другими задачами.
В итоге у нас были перегруженные файлы с кучей нереализованных сценариев, которые путали всю продуктовую команду. Тяжело было понять, что должно быть сейчас на проде, а что нет. Что нужно разрабатывать в рамках текущей задачи, а что не входит в ее рамки.
Чтобы решить эти проблемы мы перешли на новый процесс работы над задачей, по которому успешно работаем уже больше года.
Типы файлов, которые используются в проекте
В проекте у нас есть 3 типа файлов: файл с актуалами, файлы-задачи и UI-kit. На самом деле файлов больше, но в контексте статьи важны именно они.
- В файле актуалов лежат сценарии, которые уже реализованы на проде
- В файлах-задачах лежат сценарии, относящиеся к конкретной задаче
- UI-kit хранит в себе компоненты
Процесс работы над дизайн-задачей
- Для каждой дизайн-работы у нас заводится задача в таск-трекере (кроме дизайн-багов).
Дизайн-задача должна быть дочерней для юзер стори. - После получения задачи дизайнер создает файл-задачу. В названии файла указывает код и название задачи из таск-трекера. В этом файле происходит вся работа над задачей, включая согласования и передачу в разработку.
- Когда задача выполнена, ссылка на файл прикрепляется в задачу в таск-трекере. Далее происходят этапы согласования дизайна.
- После необходимых согласований задача зависает в таск-трекере в статусе «Ожидает разработки» до тех пор, пока задача не будет реализована на проде.
- Когда сценарии зарелизились на прод, важно, чтобы дизайн-команда была в курсе об этом. Мы используем для удобства автоматизацию в Jira. В тот момент, когда юзер сторя переходит в статус «Готово» автоматизация переводит в «Готово» и дизайн-задачу. В момент перехода дизайн-задачи в «Готово» на почту дизайн-лиду от Jira приходит письмо.
- Дальше дизайн-лид копирует макеты из файла-задачи и вставляет в файл актуалов. В названии файла-задачи добавляется эмодзи, который сигнализирует о том, что задача уже перенесена в файл актуалов (мы используем ✅)
- После переноса макетов мы принимаем обновления компонентов в актуалах, если в них были изменения при работе над задачей.
Преимущества процесса
Данный процесс имеет следующие преимущества:
- У нас есть файл актуалов, который является полным отражением продакшна. Благодаря этому решается проблема, когда макеты меняются уже после передачи в разработку. Например, из-за обновления компонентов или изменений связанных с другими задачами
- Задача всегда проектируется на основе макетов, которые соответствуют проду, а не на основе макетов с кучей функциональности, которые должны когда-то появится, но не в рамках текущей задачи
- Тестировщики (и остальная команда) всегда сразу понимают, что должно быть на проде, а что нет
- Разработчики (и остальная команда) при работе над задачей видят только те макеты, которые нужны в рамках текущей задачи
- Не перегружаются файлы из-за большого количества неактуальных макетов
- Можно сразу вносить изменения в UI-kit и принимать обновления только в тех файлах, где это изменение требуется. А там, где нужна старая версия компонента — оставлять ее
- Дизайн-команда всегда в курсе всех обновлений на проде, связанных с дизайном. Всегда очень приятно видеть, что результат твоей работы дошел до пользователей. А еще это позволяет быстро находить ошибки реализации, если они есть.
Спасибо, что прочитали до конца! ❤🔥
Буду рад вашим лайкам и подпискам на VC, если статья была полезной :)
И задавайте вопросы! Старался писать емко, поэтому некоторые моменты мог раскрыть не до конца. С удовольствием отвечу всем в комментариях или в телеграме :)
tg: @ruslanbikbul
Не думал, что такой простой шаг, как добавление эмодзи в название файла, может так эффективно помогать ориентироваться в задачах...
Эмодзи играет тут не самую большую роль. Он нужен в первую очередь для того, чтобы не забыть перенести макеты из файла-задачи в актуалы. Потому что иногда автоматизация Jira может сработать некорректно и из-за этого у дизайн-задачи статус может зависнуть на "Ожидает в разработке", хотя на самом деле юзер сторя уже готова.
Ориентируемся в задачах мы, в первую очередь, благодаря ссылкам в Jira и в Confluence. Но бывает, что нужны макеты, а к какой задаче они относятся не помнишь. Тогда да, помогают и эмодзи, и группы файлов в пиксо, и сортировка файлов по дате просмотра, и информация о дате последнего изменения, и название файла-задачи