Синхронизация макетов — путь в никуда
23 сентября 2019 сооснователь Фигмы Дилан Филд выступал в Москве на Moscow Figma Meetup. Меня тоже пригласили выступить и я рассказал, почему стоит избегать ручной синхронизации и какие есть пути решения.
Видео на английском, доступны русские субтитры:
Это текстовая версия моего доклада с некоторыми вкусными добавлениями, которые я хотел сказать, но не сказал.
Об опыте
Я работал в Почта Банке и Газпромбанке, делал большие интерфейсы с сотнями экранов, делал UX и ещё много чего интересного. Также я написал книгу «Руководство по Фигма», у которой этой осенью выходит английская версия.
Коллаборация с читателями
Вместе с книгой я сделал демо-проект, в котором люди изучают Фигму прямо в Фигме. Я вижу в этом красивый пример рекурсии. Не видел ничего подобного ни в одном инструменте. Благодаря читателям книга была здорово доработана, поскольку они писали мне комментарии в файле, какие места им непонятны и что нужно улучшить. Это повлияло на то, как я учу других людей Фигме.
Ожидание
Когда я хотел стать дизайнером, я представлял себе такую картину: я был творцом за огромным монитором и решал дизайн-задачи, делал красивые вещи, от которых у меня захватывало дух, вроде этих:
Реальность
Но ежедневная работа над проектами для крупных банков оказалась не столь сверкающей: я тратил много времени на ручную синхронизацию макетов из Скетча в Зеплин, понимая, что это не имеет отношения к дизайну:
К сожалению, это проблема мноих продуктовых команд в наши дни и не все её воспринимают как проблему, потому что слишком привыкли к старой парадигме: нарисовал-выкатил-показал. До сих пор в крупных банках работа в Скетче остаётся негласным стандартом, и чем больше организация, тем больше всего нарисовано в Скетче. Тем сложнее убедить руководство поменять инструмент и собирать новые библиотеки на Фигме.
Пока Скетч не станет веб-платформой, я буду считать его устаревшим инструментом, непригодным для командной работы.
Синхронизация макетов больно бъёт в первую очередь по производительности простых продуктовых дизайнеров, которые тратят своё время не на решение дизайн-задач, а на странные ритуалы вроде залива новых макетов, исправления слетевших символов и стилей, решение конфликтов в Дропбоксе, после того как кто-то случайно открыл их файл.
Поворотный момент
Когда-то я работал над сценариями оплаты интернет-банка. В одном скетч-проекте были собраны все сценарии оплаты: мобильный, коммуналка, шаблоны платежей и так далее. Я получил задачу сделать новый дизайн навигации в этой группе сценариев и распространить обновлённую шапку на все экраны. Раньше в ней использовались вкладки, а в новой версии решили сделать хлебные крошки. Поскольку шапка была в символе, в Скетче мне потребовалось минут пять, чтобы все они стали актуальными. Затем мне пришлось перевыгрузить все эти экраны в Зеплин одной пачкой:
До этого я думал, что основная боль дизайнера — это получать новые правки. Но дело оказалось не в правках, а в инструменте. В тот момент я понял, насколько такой воркфлоу несовершенен и в чём главная проблема.
В Скетче и Зеплине мы дублируем схему данных и вручную поддерживаем её актуальность.
Правки будут всегда, это часть нашей работы, и не стоит бояться их. Но в Скетче первоисточник данных находится в локальном файле дизайнера и поэтому любые правки воспринимаются болезненно: «это же снова всё надо перевыгружать, ой-вэй…». Мы получаем новые правки от аналитиков, PM и разрабов, переключаемся между окнами, чтобы ничего не забыть, отправляем обновлённые версии экранов в Зеплин, кидаем ссылку на них в Телеграм или Слак, и с новой волной правок всё начинается сначала. Скетчеры в крупных компаниях вынуждены тратить свою жизнь не на дизайн, а на попытки донести этот дизайн до других членов команды.
Скетч не так уж плох, когда работаешь один и ни с кем не делишь свою работу. Если никому не надо показывать дизайн, он вполне удобен. Но мы играем в командах и не можем позволить себе терять время.
В Фигме этого вопроса вообще не возникает, поскольку схема данных одна, она всегда актуальна, потому что находится в веб-среде и мы по-настоящему делим проект с коллегами. Фигма — это не про рисование в браузере, а про настоящую коммуникацию в команде.
Фигма → Принципл?
Сейчас в Фигме нет способа делать сложную анимацию, поэтому мы используем Принципл, чтобы расширить её возможности, и это возвращает нас к похожей ситуации, которая была со Скетчем и Зеплином. Но масштаб этого неудобства гораздо меньше, поскольку в Принципл не нужно заливать такое количество экранов.
Как мы знаем, недавно Фигма выкатили API плагинов. Стали появляться первые эксперименты. Например, Мэтт Делорье сделал первый плагин, который позволяет делать анимацию прямо в Фигме. Это был только первый концепт, который появился в июле.
Мне кажется это очень важной идеей, поскольку так мы избегаем синхронизации со сторонним инструментом.
Вслед за ним появился вполне боевой плагин Figmotion. Урок по нему.
Пока плагины молодые и сырые, но я вижу в них большую угрозу отдельным инструментам, которые работают в паре с Фигмой, и в первую очередь, Принципл. Кроме того, на подходе нативные инструменты анимации в Фигме.
Всего лишь пару лет назад у нас не было инструмента Figma Handoff, а теперь он легко заменил Зеплин. То же может произойти с Принциплом.
Фигма будет расти
Поражение Скетча очевидно чисто статистически: я модерирую чаты про Скетч и Фигму. Скетч-чат уже год так и остаётся в районе 400 участников, а Фигма-чат, открывшийся значительно позже, быстро вырос до 2 500 и продолжает уверенно расти. Постоянно появляются новые каналы и видеоуроки про Фигму, но не про Скетч.
Как насчёт PDF?
Все очень радовались, когда в Фигме стало можно делать презентации и выгружать их в PDF. Но если задуматься, в формате PDF применительно к презентациям больше нет необходимости, поскольку мы теряем возможность менять его после выгрузки. Я обычно показываю презентации прямо из Фигмы в режиме прототипа, переключая слайды стрелками. После загрузки страницы Фигма всё отлично кэширует, так что PDF можно оставить в качестве запасного парашюта. К сожалению, пока не работают кликеры и видны открытые вкладки, но разработчики могут легко исправить это.
Итоги:
- Тратить ли время на неэффективный инструмент — решение каждого.
- Показывай всё в Фигме, избегай дублирования данных.
- Если нужно синхронизировать, делай это как можно позже, когда дизайн уже устаканился и не придётся вносить правки в обе схемы данных.
- Не синхронизируй макеты со сторонними сервисами, чтобы расширить возможности Фигмы, обрати внимание на новые плагины.
Чтобы эту статью увидели больше людей, зажми и держи кнопку Claps, пока на счётчике не будет +50. Это бесплатно.
Я веду проект /designer — телеграм-канал и сайт о дизайне интерфейсов.
