Дизайн Doc Doc
1 479

Figma — как единая точка правды в дизайне

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

В закладки
Аудио

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

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

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

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

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

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

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

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

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

Андрей Горанов
Дизайнер

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

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

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

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

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

Гриша Гаршин
Менеджер

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

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

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

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

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

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

Ирина Мухина
Тестировщик

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

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

Пётр Дорожкин
Разработчик

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

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

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

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

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

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

Катя Федюнина
Маркетолог

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

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Doc Doc", "author_type": "self", "tags": [], "comments": 23, "likes": 36, "favorites": 49, "is_advertisement": false, "subsite_label": "design", "id": 70993, "is_wide": false, "is_ugc": true, "date": "Mon, 10 Jun 2019 10:12:44 +0300" }
{ "id": 70993, "author_id": 283990, "diff_limit": 1000, "urls": {"diff":"\/comments\/70993\/get","add":"\/comments\/70993\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/70993"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
23 комментария

Популярные

По порядку

Написать комментарий...
3

Фигма - это песня просто. Разделяю ваши восторги)

Ответить
1

А как вы отслеживаете изменения? Ну вот пока релиз сделали и выкатили, вы сделали дизайн ревью, его надо тоже делать. Потом еще одно. И еще. И в итоге у вас куча изменений раскиданных по разным проектам? Тут экран еще старый смотри этот проект, этот уже 2 раза новый смотри сюда, а до этого он был таким как в проекте Релиз_4-2_final_2_правки.

Ответить
4

Николай, спасибо за хороший вопрос. Постараюсь дать хороший ответ.

У нас есть мастер-файлы, помечаем их ⭐️, в которых дизайн = дизайну на бою. Все новые гипотезы мы делаем в файле «Тестирование», и там отображаем не весь путь, а только локальный кусок интерфейса, где показана новая гипотеза. Если по итогам А/Б-теста гипотеза побеждает, то после релиза на бой мы объединяем экраны этой гипотезы с мастер-файлом, которому она принадлежит.

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

Ответить
0

Спасибо!

Ответить
1

Это реклама?

Ответить
0

Ни разу. Вместо Фигмы может быть любой инструмент. Главное, чтобы он помогал вашей команде быть одним целым.

Ответить
0

Фигма говно! Минусуйте, сучки!

Ответить
2

Ну что вы. Это же не ветка адептов Фигмы. Ваше мнение, хоть и не обоснованное, тоже важно.

Ответить
0

Хотелось бы услышать как вы делаете интерактивные прототипы?
В Figma весьма скудный набор для презентации прототипа (особенно, если речь идет не о приложении, а о десктоп версии). Пока вместо плясок с бубном остановился на старом добром Axure.

Ответить
3

Михаил, привет.

Нужно понимать, что для вас значит «интерактивные прототипы». Для нас Figma полностью заменила Marvel и Invision.

Помимо стандартных переходов между экранами, в ней можно делать:
— всплывающие попапы и модальные окна;
— горизонтальный скролл элементов;
— залипание элемента при скролле;
— псевдо-анимацию, когда ты задаешь время смены кадров (гифка ниже)

Ответить
0

Спасибо!
Под интерактивом я имел ввиду самое банальное понятие: раскрытие характера и степени взаимодействия между объектами.
Сложные взаимодействия по типу: раскрывающийся список, ховеры кнопок, буллиты, анимация слайдера и тд. сделать, конечно, можно, но приходилось плодить кучу бесполезных элементов, которые не нужны были при дальнейшей разработке и засоряли файлы проекта, да и трудозатратно.
Поэтому возник вопрос, возможно у вас использовались какие-то наработки.

Ответить
0

Спасибо!
Как раз выше прокомментировал.

Ответить
2

Так же очень удобно поддерживать актуальную версию прототипа на основе созданного макета.
Допустим вы отрисовали макет, собрали прототип в акшуре, но в итоге на очередном совещании решили, что ваш макет "ниочинь" и вы вынуждены выполнить двойную работу перерисовав макет и заново собрав прототип, в фигме такой проблемы нет, спешлфою Михаил, записал видео, как избежать взрыв пукана от очередных правок

Ответить
0

Вячеслав, да, это понятно. Спасибо за видео.
Возможно нужно еще пару раз попробовать.

Ответить
1

Если вы рисуете допустим кейс для мобильного приложения, то скорее всего в макете есть разделение на страницы ios/android, что мешает сделать 3 страницу с прототипом и собрать прототип в ней, при этом не засоряя макет для верстки ?

Ответить
1

Мы также пользуемся Figma - самый оптимальный инструмент для разработки интерфейса, интерактив делаем в Principle. Общее представление в нем создаётся достаточно просто..

Ответить
0

Я строил свои продукты на основе Sketch + Abstract. И вот сейчас пришел в новый продукт, на данный момент от меня требуется сформировать дизайн-систему. Продукт работает уже более двух лет, и все материалы в Sketch. Переход на Figma повлечет за собой падение продуктивности всех дизайнеров.

Тем не менее связка Sketch + Abstract не менее хороша, чем Figma. Тем более, смотря на скриншоты, реально напрягает версионирование в теле документа. Если команда крупная, а итерации мелкие, что тогда? В Abstract есть коммиты. И они реально спасают все. Больше никаких файлов "вариант 666", а самые актуальные версии видно как на ладони. В самых мелких итерациях.

Короче, что-то вы перегнули с заголовком.

Ответить
1

Почитал про связку Sketch + Abstract ещё раз, но не нашел ответов на несколько вопросов. Роман — помогайте. Можете ответить, позволяет ли эта связка делать следующие вещи:

— совместная работа над макетом онлайн с другим дизайнером;

— менеджер находится в вашем макете и вы прямо при нём вносите правки, для ускорения процесса;

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

— собрать интерактивный прототип, потом изменить макет, но флоу прототипа останется и ничего настраивать заново не нужно;

— поработать с чужого компьютера, просто зайдя в браузер и войти под собой.

Ответить
0

Роман, спасибо, что не безразличны к этому вопросу. Как я писал выше, цель этой статьи — не сравнение инструментов.

Я сам не использовал связку Sketch + Abstract, но читал статью о том, как Майкрософт сделал свою дизайн-систему именно на этой связке. На бумаге все выглядело хорошо и аккуратно.

Мы не задаемся вопросом, «а что было в 51 варианте? давайте поищем и посмотрим». Сделали гипотезу, протестировали. Не зашла — чуть подправили её в том же макете и проверяем снова. Если нам нужно вернуться к одной из прошлых версий — есть история изменений.

Если мы изменили макет, и надо донести правки до разработчика — есть комментарии в духе «тут новая иконка и отступ больше».

Ответить
0

Еще такой вопрос: еще не пробовали по API Figma объединить дизайн и разработку?

Ответить
0

Нет, еще не пробовали. Я читал истории успеха тех, кто это сделал — они довольны.

Ответить
0

Хорошая статья и хороший инструмент!
Если они еще инструменты анимации в прототипах доведут до уровня, по крайней мере, invision studio будет вообще идеально

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления
{ "page_type": "default" }