Как перестать терять макеты и экономить час времени ежедневно
Привет! На связи Артур Абдуллин — дизайнер продукта Ясно. Мы решили иногда рассказывать здесь о своей работе.
Ясно активно растет и обновляет дизайн. А для этого нужно хранить все на своих местах. Если вы тоже постоянно теряете файлы в Figma — читайте эту статью. Расскажем, как мы организовали новую систему хранения и сэкономили время команды.
«АРТУР, ГДЕ МАКЕТ…?»
До некоторых пор это был любимый вопрос моих коллег. Все рабочие макеты хранились в Figma и делились на два файла — App Ясно и Web Ясно (для приложения и десктопной версии сайта). Поэтому внутри каждого хранилось огромное количество страниц, начиная от главного экрана и заканчивая личным кабинетом.
Представили? Теперь умножьте это на три. Ведь Ясно используют наши клиенты, психологи, HR-менеджеры компаний-клиентов — все это разные интерфейсы, у каждого есть свой кабинет, форма авторизации и так далее.
На поиск одного макета у нас уходило до 15 минут. Иногда — до часа (если нужно написать дизайнеру, дождаться, пока он появится в сети, найдет нужный файл, ответит и скинет правильную ссылку). В итоге простой поиск макета тормозил работу целой команды.
А еще с каждым годом файлы становились все тяжелее и все медленнее открывались в Figma. В конечном счете это мешало работе сразу трех отделов — дизайна, продукта и разработки. И заканчивалось моим любимым сообщением в чате: «Артур, где макет…?»
Как навести порядок
В макетах, как и в психотерапии, самое важное для начала — признать проблему. Это уже полпути к успеху. Затем можно переходить к выбору системы хранения. Есть три варианта:
- Все в одном месте. Так мы работали раньше. Удобно, что нет большого количества папок, но когда макетов становится слишком много, система выходит из строя.
- Хранение по задачам. Чтобы отслеживать личные и командные задачи мы используем YouTrack. Каждой задаче присваивается свой номер, его можно также использовать для хранения макета в Figma. Плюсы — можно быстро найти нужный файл. Минусы — со временем их станет слишком много.
- Хранение по проектам. Этот вариант мы выбрали сейчас. Проект делится на подпроекты, а они, в свою очередь, на более мелкие сценарии.
Мы разделили все на шесть основных папок:
- Дизайн-система — там банк иллюстраций, иконки, шрифты, логотипы, аватарки и так далее.
- Клиент — личный кабинет, экран авторизации и прочее для клиента.
- Психолог — личный кабинет, экран авторизации и прочее для психолога
- Приложение — все, что касается мобильного приложения.
- B2B — сервис для эйчаров компаний-клиентов.
- Контент — материалы для соцсетей, YouTube и рекламных площадок.
- Прочее — внутренние презентации, гайды для психологов, письма + все, что не вписывается в остальные категории.
Каждый файл также разбит на дополнительные сценарии. Такое деление интуитивно понятно даже тому, кто зашел впервые. Можно идти по указателям и гарантированно найти то, что тебе нужно.
Пока мы наводили порядок, выяснили, что некоторых макетов не хватает. Часть интерфейса создавали еще до того, как в проекте появился штатный дизайнер, поэтому часть макетов хранили в виде скриншотов. Мы воссоздали их заново и занесли в нужные папки.
Когда закончили работу, начали тестировать систему. Совру, если скажу, что все отзывы сразу были положительными. Определенное сопротивление от команды все-таки было. Да, все стало структурнее и понятнее, но для многих — все еще было непривычно.
Представьте холостяка, у которого носки под кроватью, футболка — на тренажере. Но тут приходит заботливая девушка и все расставляет по полочкам. Вроде бы удобно и понятно... Но непривычно. Начинает ломаться.
Мы собирали отзывы, соединяли и разъединяли файлы четыре месяца — и в конечном счете добрались до финальной версии.
Важные мелочи
Еще нам удалось решить проблему неактуальных макетов, которые иногда по ошибке брали в работу разработчики. Чтобы такого больше не повторялось, мы ввели статусы:
Зеленый — на продакшене. Страница сверстана и полностью совпадает с тем, что опубликовано на сайте.
Синий — макет готов. Согласован заказчиком и разработкой, но пока не опубликован.
Желтый — обрати внимание! Возможно, есть отличия от опубликованных макетов или нужно внести изменения.
Такая маркировка очень упростила всем жизнь. А чтобы не было соблазна взять на сайт старые неактуальные файлы, мы добавили их в архив и закрыли паролем.
Еще одним удачным решением стали комментарии. Мы пишем примечания к файлам в самих макетах. Например, что при нажатии на кнопку должна включиться анимация. Это помогает не терять важные мелочи.
Финальный штрих — презентация для команды и памятка для дизайнеров и разработчиков. Мы подробно описали коллегам, как систематизировать файлы и работать со статусами. Порядок поддерживать легче, если этим занимается вся команда.
Результат работы
К новой системе хранения мы привыкли довольно быстро. Иногда все еще возникают вопросы, что где лежит, но их стало гораздо меньше.
Фактически работа заняла не больше 40 часов. Но много времени ушло на обсуждения и тестирование.
Если читая эту статью вы поняли, что ваша система хранения тоже давно устарела, держите чек-лист, как можно все исправить.
А как в вашей компании хранят макеты? Сколько времени уходит на поиск нужных файлов? Делитесь в комментариях!
Друзья, всем привет!
Пару месяцев назад мы подумали, что делаем много всего клевого на дизайн-кухне и решили устроить стендапы, где мы рассказываем и показываем что-то красивое или просто полезное.
А еще мы осознали, что мы уже не стартап, но еще не корпорация и процессы мы стараемся строить на стыке скорости и системности.
Из всего этого родилось простое желание показывать и обсуждать, делиться и узнавать, поэтому встречайте первую статью на VC от Дизайн команды Ясно. Дальше – Больше! <3
Это полезная информация, спасибо!
актуально не только дизайнерам, спасибо :)
Класс, вам спасибо, что обратили внимание)
Отличная статья, спасибо) А сколько времени ушло на реорганизацию всего и создание новой системы?
Как Артур подсчитал выше – порядка 40 часов чистой работы. Однако чтобы внедрить и перейти на новые процессы: презентовать команде, ударить о всех и докрутить – нужно время! От обнаружения проблемы до ее решения ушло где-то три месяца: пробовали разные маркировки, структуру и даже обложки
Спасибо за ответ) Сталкивался со схожей проблемой и тоже заняло немало времени. А как проходила сама сборка новой дизайн-системы: условно, вы останавливали на это время все дизайн-задачи и всех дизайнеров перекидывали на создание системы или распараллеливали эти процессы?
Это не дизайн-система, а лишь способ организации макетов. У нас этот процесс шел параллельно решению бизнес-задач, что отразилось на времени в том числе
Здорово ,оптимизация удобная , теперь проще и быстрее выполнять работу в таком переделанном формате
Все так, рады, что вам понравилось)
Эдакий git для дизайнеров-)
Очень полезная информация
Спасибо вам)
Хорошие советы, буду пользоваться, спасибо!
Вам спасибо 🙌
Хороший у вас сервис, полгода уже со специалистом общаюсь, стало гораздо легче)
Оу, спасибо за такой приятный фидбек ❤️🔥
Олег, где макет?
С удивлением читаю, что базовая, казалось бы, категоризация по проектам внутри фигмы оказалась откровением :)
Если всё прально понял, то я ровно тот же подход использую — есть несколько "проектов" (для аппки, для сайта, для маркетинговых штук и т.д.), и в каждом отдельные файлы. В проекте аппки, например, разделение по экранам и/или functional areas. И уже внутри файлов отдельные страницы на разные таски (в названиях страниц сразу ID впихнут). Всё хочется ещё больше организованности в это добавить (в частности внутри самих файлов), но пока всё времени не хватает.
Слежу за блогом Артура и недавно как раз промелькнула мысль, что очень хотелось бы глянуть на организацию проекта в фигме, а тут внезапно эта статья 🤩 поэтому в два раза больше рада прочтению, желаю вам развития!
Артур, где макет?
очень круто! Я рекомендую своим клиентам-психологам регистрироваться на ясно и искать там клиентов) у многих запись прям плотно) Благодарю за статью и такой удобный сервис! и постоянное его обновление
Очень приятно слышать, спасибо вам за добрые слова)
AMAZING
🫶
Актуально, спасибо!
🙌
Боже, как же это красиво!
p.s. У меня бардак в макетах, но и до фигмы руки не доходят, все еще копошусь в кореле, потому что все просят в нем исходник(
Спасибо, пусть у вас все получится)
В Ясно десять консультаций брал, сначала было так себе, но потом нашел своего психотерапевта и стало норм. Радует, что и сотрудники х*ней не занимаются))
Стараемся 💪
порядок и системность в любом деле полезны, особенно если есть большой объем информации)
Спасибо за редкий в последнее время на vc практический опыт. Интересная систематизация.
🙏
Интересные советы, спасибо
И вам 🙏
Что-то я запутался с сущностями... папки, сценарии, файлы ))
У вас на скрине фигма, где там папки? Или это ваша внутренняя надстройка, где вы выкладываете файлы (сслки) фигмы?
Вот этот скрин откуда:
Комментарий недоступен
А, это проекты внутри команды...
Т.е.
- Команда Ясно
- - Проект Yasno Клиент
- - - Несколько файлов в нем...
Теперь понятно, спасибо!
Структуризация и стандартизация - всегда путь к успеху)
в чем прикол?
Здравствуйте. Народ подскажите, как сегодня оплачивать figma? Или есть лайфхаки с шарингом?
Еще один пункт забыли))) на этой неделе выложу к себе статью и скину сюда ссылку ) или вы и так замучались, с этими папочками и мне не спешить? хДД Называться будет так (1) , вторая статья будет для новичков )
".........." > интрига
1) Почему "Дизайн..........." нужно сортировать "по ........." а не по ............. и другим методам
2) Создание презентации: шаги для создания своей базы знаний (конспектов)
Одна есть 🤪