Хабрахабр

[Из песочницы] Figma — как единая точка правды в дизайне

Как мы построили все процессы разработки и внедрения дизайна вокруг одного инструмента.

Я — Ваня Соловьёв, дизайн-директор в DocDoc (входит в группу Сбербанк). Привет! Сегодня рубрика Тим-тим, в которой я расскажу, как мы уживаемся с другими командами.

Всё было стандартно для того времени, пока не появилась Figma. В 2017 году наши интерфейсы создавались в Sketch, прототипы собирались в Marvel, а в разработку передавались через Zeplin.

Она про то, как в нашей компании Figma помогла: Эта статья не про сравнение инструментов, таких статей уже написано в избытке.

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

Для дизайнера

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

Создал макет → собрал интерактивный прототип → передал в разработку — и всё это по одной ссылке.

Обычный случай в нашей работе: дизайнер создаёт интерфейс, к нему в макет заходит другой участник задачи и оставляет свой совет в виде комментария. Процесс создания дизайна перестал проходить «за семью печатями», он стал публичным.

Когда продуктовая команда пилит фичу, очень важно не плодить лишних версий и состояний макетов, чтобы не тормозить всю команду. В Figma удобно не только поддерживать свои макеты, пользоваться общей дизайн-системой, но и взаимодействовать с разработчиками, тестировщикам и менеджерами. Андрей Горанов, дизайнер.

Для менеджера

Для их удобства, мы организовали файлы таким образом, что у каждого есть свой проект в Figma: запись к врачу, диагностика, телемедицина и т.д. У нас семь продуктовых менеджеров и каждый — лидер своего направления. Им достаточно одной ссылки для того, чтобы все наработки по их задачам были под рукой.

image
Пример проекта по Телемедицине

Мы совместно решили, что большие нигде правки принимать не будем: ни в протоколах, ни в Jira, ни в мессенджерах. Доработки они заносят в виде комментариев к нужной части макета. В комментарии упоминается нужный дизайнер и к нему на почту приходит уведомление.

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

Для разработчика и тестировщика

Дизайнеры видели полную картину переходов в Sketch, а разработчики только конкретный экран в Zeplin. Раньше, когда мы передавали макеты разработчикам через Zeplin у них с дизайнерами было разное представление о макетах. Ребята не всегда понимали, какой экран за каким следует и тратили время на расспросы.

image
Разработчики видели только конкретный макет в Zeplin

Для единства мы придерживаемся такой организации макетов: по горизонтали переходы между экранами, по вертикали — внутри экранов. В Figma разработчики видят туже самую картину, что и дизайнеры. Это помогло ребятам чувствовать себя в макетах «как дома».

image
По горизонтали переходы между экранами, по вертикали — внутри экранов

Макеты всегда актуальны и в одном и том же виде для всех участников, удобно, что отдельно макеты для iOS и Android. Удобно, что все макеты в одном месте и доступ у всех, комфортно делать ревью — есть комментарии. Ирина Мухина, тестировщик. Еще круто, что можно сделать ссылку на конкретный экрана, и вставить его в документацию.

Разработчики могут самостоятельно выгрузить себе любой элемент в макете, не тратя время на просьбу дизайнеру сделать это. Мы используем одинаковые названия переменных в цветах и стилях, это помогает не плодить лишние сущности при верстке интерфейса. Например, можно получить svg-код иконки или экспортировать её в нужном формате.

Никаких файлообменников, проблем с лицензией, установкой ПО, вместо этого — просто ссылка в описании задачи в Jira. Когда привыкаешь к онлайн-сервисам, вроде Figma, предыдущие инструменты кажутся чем-то первобытным и очень далеким. Пётр Дорожкин, разработчик. Чтобы получить CSS-стили элемента достаточно сделать два клика.

Для маркетолога

У них есть свой проект, где хранятся все макеты. Задачи маркетинга, направленные на веб мы тоже делаем в Figma. Так дизайнерам маркетинга проще придерживаться нашего фирменного стиля — все элементы есть в Figma.

Пф, легко! image
Найти акцию, которую делали осенью 2018 года?

Продуктовый дизайнер забрал их к себе в интерфейс и при необходимости немного поправил форму и цвет — ведь всё векторное. Хорошо работает и наоборот: дизайнер маркетинга нарисовал иллюстрации, перенёс их в Figma.

image
Сейчас мы работаем над конструктором иллюстраций в Figma

Вместо тысячи слов можно один раз показать, где и что нужно сделать. Легко объяснить дизайнеру, где и какие визуальные элементы необходимо поменять/убрать/добавить. Катя Федюнина, маркетолог К этим комментариям дизайнеры могут возвращаться в удобное для них время.

Один придумывает визуальную концепцию, другой примеряет ее на интерфейс — всё в одном макете и в одно время! А когда задача маркетинговая, но касается напрямую продукта, то командная работа дизайнеров из двух отделов выходит на новый уровень.

Главная мысль

Стремитесь к тому, чтобы каждый участник мог взаимодействовать с ним комфортно. Дизайн — итог работы команды, а не одного человека. Уходите от локальных инструментов и ищите те, которые объединяют вас и ваши процессы.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть