Как перестать терять макеты и экономить час времени ежедневно

Привет! На связи Артур Абдуллин — дизайнер продукта Ясно. Мы решили иногда рассказывать здесь о своей работе.

Ясно активно растет и обновляет дизайн. А для этого нужно хранить все на своих местах. Если вы тоже постоянно теряете файлы в Figma — читайте эту статью. Расскажем, как мы организовали новую систему хранения и сэкономили время команды.

До некоторых пор это был любимый вопрос моих коллег. Все рабочие макеты хранились в Figma и делились на два файла — App Ясно и Web Ясно (для приложения и десктопной версии сайта). Поэтому внутри каждого хранилось огромное количество страниц, начиная от главного экрана и заканчивая личным кабинетом.

Представили? Теперь умножьте это на три. Ведь Ясно используют наши клиенты, психологи, HR-менеджеры компаний-клиентов — все это разные интерфейсы, у каждого есть свой кабинет, форма авторизации и так далее.

На поиск одного макета у нас уходило до 15 минут. Иногда — до часа (если нужно написать дизайнеру, дождаться, пока он появится в сети, найдет нужный файл, ответит и скинет правильную ссылку). В итоге простой поиск макета тормозил работу целой команды.

А еще с каждым годом файлы становились все тяжелее и все медленнее открывались в Figma. В конечном счете это мешало работе сразу трех отделов — дизайна, продукта и разработки. И заканчивалось моим любимым сообщением в чате: «Артур, где макет…?»

В макетах, как и в психотерапии, самое важное для начала — признать проблему. Это уже полпути к успеху. Затем можно переходить к выбору системы хранения. Есть три варианта:

Мы разделили все на шесть основных папок:

Каждый файл также разбит на дополнительные сценарии. Такое деление интуитивно понятно даже тому, кто зашел впервые. Можно идти по указателям и гарантированно найти то, что тебе нужно.

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

Когда закончили работу, начали тестировать систему. Совру, если скажу, что все отзывы сразу были положительными. Определенное сопротивление от команды все-таки было. Да, все стало структурнее и понятнее, но для многих — все еще было непривычно.

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

Мы собирали отзывы, соединяли и разъединяли файлы четыре месяца — и в конечном счете добрались до финальной версии.

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

Зеленый — на продакшене. Страница сверстана и полностью совпадает с тем, что опубликовано на сайте.

Синий — макет готов. Согласован заказчиком и разработкой, но пока не опубликован.

Желтый — обрати внимание! Возможно, есть отличия от опубликованных макетов или нужно внести изменения.

Такая маркировка очень упростила всем жизнь. А чтобы не было соблазна взять на сайт старые неактуальные файлы, мы добавили их в архив и закрыли паролем.

Еще одним удачным решением стали комментарии. Мы пишем примечания к файлам в самих макетах. Например, что при нажатии на кнопку должна включиться анимация. Это помогает не терять важные мелочи.

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

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

Фактически работа заняла не больше 40 часов. Но много времени ушло на обсуждения и тестирование.

Если читая эту статью вы поняли, что ваша система хранения тоже давно устарела, держите чек-лист, как можно все исправить.

А как в вашей компании хранят макеты? Сколько времени уходит на поиск нужных файлов? Делитесь в комментариях!