Проект с бесконечной выгрузкой
В августе 2019 роботы работали над сайтом для крупной компании из ecommerce. По нашим устоявшимся процессам все внутренние взаимодействия происходят в Figma.
Miro используем как хранилище всех материалов по проекту. Готовые макеты переносим в Miro, собираем карту переходов и обсуждаем с командой клиента. Там удобно работать с комментариями и собирать изменения карт экранов, показывать навигацию и переходы.
На ecommerce-проекте было больше 450 макетов-страниц и их состояний под десктопы, планшеты и мобильные телефоны. Правки приходили не единовременно, несколько раз в день мы выгружали одни и те же макеты с минимальными изменениями.
После каждого исправления, даже если это было всего одно слово, макет приходилось выгружать заново, чтобы согласовать с командой заказчика. Вся выгрузка из Figma происходила в ручном режиме: мы экспортируем PNG или JPG → сохраняем → закидываем в Miro → раскладываем в правильном порядке.
К примеру, нужно заменить одно слово на странице. Наши действия:
1_
Экспортировать PNG в размере 1440×5000 рх,
2_
Загрузить картинку на борд в Miro,
3_
Найти макет, который нужно заменить,
4_
Открепить от него все стрелки, которыми показаны переходы между страницами,
5_
Перенести со старого макета все комментарии на новую картинку, включая все завершённые (скрытые) комментарии. Одно включение отображения этих комментариев (а их очень много) занимало от одной минуты
6_
Удалить старый макет,
7_
Переместить новую картинку с комментариями на его место,
8_
Прикрепить к нему стрелки.
И так с каждым макетом. Количество макетов в день доходило до 30.
Для ускорения использовали «костыль» в виде Sketch и плагинов для замены картинок и выгрузки в Miro, но это было не сильно быстрее. Затем в Miro появилась возможность замены картинок. Это ускорило процесс, но мы понимали, что с плагином было бы точно в два раза быстрее.
Выгрузка «с костылями»:
1_
Экспортируем необходимое количество страниц PNG в папку на компьютер,
2_
Открываем подготовленный Sketch-файл для экспорта,
3_
Проверяем картинки на изменение в размерах, если нужно, подгоняем размеры артборда под картинку,
4_
С помощью плагина экспортируем экраны в Miro,
5_
У картинок с изменившимися размерами меняем масштаб с Custom на Original.
При этом нужно следить за названиями экспортируемых картинок и местом их экспорта, иначе процесс «поломается».
Заменить текст — минута, выгрузить — от 20 минут до часа. Чтобы заменить одно (!) слово в 15 макетах, дизайнеры тратили целый час. Мы поняли, что экспорт нужно автоматизировать, сохранив время и нервные клетки наших дизайнеров и арт-директоров.
Реализация: начало
В ноябре 2019 Figma в бета-режиме запустила новую функциональность публичного аккаунта для компании. Там команды выкладывают макеты, UI-киты, иконки и другие полезные материалы, а также публикуют свои плагины.
В Miro запустили публичную бета-версию платформы и организовали конкурс с призовым фондом в $21 тысячу на лучший плагин. Мы решили принять участие в конкурсе. В нашем арсенале были работающий плагин для Sketch, гитхаб, API Figma, и инструкция для разработчиков плагинов Figma, API Miro и список всех плагинов в Figma.
Конкурс Miro
Проектом мы активно занимались в свободное время. Возникли технические сложности (подробнее об этом написали на habr), из-за которых реализация затянулась с первоначальных 2–3 недель на почти два месяца. За это время конкурс закончился, и Miro объявила победителей.
Среди них были Семён Волков и Роман Красильников с похожим по задумке плагином Figma2Miro. Их проект занял шестое место.
Реализация: продолжение
Мы попробовали выгружать макеты с помощью плагина-победителя, но решили продолжить работу над собственным: функционально наш плагин подходил роботам-дизайнерам больше.
В отличие от нашей реализации, которая была всё-таки больше плагином к Figma (с точки зрения UI и платформы, которая инициирует экспорт), они сделали именно плагин для Miro.
Но, к сожалению, созданное ребятами решение не удовлетворяло потребностям роботов, и именно поэтому мы продолжили работу над собственным плагином.
Час выгрузки макетов, о которых говорил Сергей Кутьков, превратился в две (!) минуты. Еще нам пришлось придумать новое название Figmiro, поскольку изначально мы тоже хотели использовать Figma2Miro.
Первую версию плагина сделали 27 декабря 2019 года. Выявили проблемы:
Скорость: работало очень медленно.
Расстояния между фреймами в Miro отличались от расстояний в Figma.
Названия картинок, выгруженных в Miro, не совпадали с названием фреймов в Figma.
В январе 2020 устранили проблемы, скорость работы выросла в три раза. Названия фреймов стали совпадать.
Оставалось доделать краевые кейсы с авторизацией в Miro через сторонние сервисы и написать, от чего зависит скорость работы. Наши дизайнеры начали тестирование в феврале 2020. 3 марта выкатили плагин в публичный доступ.
Что умеет плагин Figmiro
Всё работает так же, как мы привыкли делать в Sketch: выделяем фреймы, жмём на кнопку, и макеты появляются в Miro.
Выгрузка выбранных фреймов на выбранную доску в Miro.
Перезапись ранее выгруженных макетов с сохранением позиции на бордах.
В дальнейшем планируем поддерживать плагин и оптимизировать его работу таким образом, чтобы ускорить процесс выгрузки и синхронизации. Если Miro обновит своё API, перестроим плагин под него.
Пример работы плагина
Как увеличивается скорость работы с плагином:
Сравнение способов выгрузки макета из Figma в Miro
00:17
с плагином Figmiro
02:59
с функцией замены в Miro
10:02
замена макетов вручную
Время зависит от многих условий: сколько макетов выгружаем, как много на них комментариев и сколько к ним прикреплено стрелок.
Получается, что с плагином всегда более-менее фиксированное время. Без плагина время от 10 минут до бесконечности.
Над плагином Figmiro работали
Идея и дизайн — Антон Магарцов, менеджмент — Сергей Кутьков, разработка — Илья Крупнов. Также спасибо за помощь в реализации Роману Чуркину, Андрею Муравьеву и Антону Ерышеву.
Что дальше
Мы собираем обратную связь по работе плагина на GitHub. Тестируйте Figmiro и делитесь впечатлениями.