Sketch-костыли, 8 действий размером в час и другие проблемы, которые мы решили с помощью плагина Figmiro

Дизайнеры Futura by red_mad_robot рассказывают об истории создания плагина, который не успел поучаствовать в конкурсе с призовым фондом в $21 тысячу, но зато теперь экономит время нашим дизайнерам.

Проект с бесконечной выгрузкой

В августе 2019 роботы работали над сайтом для крупной компании из ecommerce. По нашим устоявшимся процессам все внутренние взаимодействия происходят в Figma.

Miro используем как хранилище всех материалов по проекту. Готовые макеты переносим в Miro, собираем карту переходов и обсуждаем с командой клиента. Там удобно работать с комментариями и собирать изменения карт экранов, показывать навигацию и переходы.

Карты переходов между экранами. На схеме показано, на какую страницу сайта пользователь попадёт, если нажмёт на определённую ссылку, или что отобразится при клике на кнопку

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

После каждого исправления, даже если это было всего одно слово, макет приходилось выгружать заново, чтобы согласовать с командой заказчика. Вся выгрузка из Figma происходила в ручном режиме: мы экспортируем PNG или JPG → сохраняем → закидываем в Miro → раскладываем в правильном порядке.

К примеру, нужно заменить одно слово на странице. Наши действия:

  1. 1_Экспортировать PNG в размере 1440×5000 рх,
  2. 2_Загрузить картинку на борд в Miro,
  3. 3_Найти макет, который нужно заменить,
  4. 4_Открепить от него все стрелки, которыми показаны переходы между страницами,
  5. 5_Перенести со старого макета все комментарии на новую картинку, включая все завершённые (скрытые) комментарии. Одно включение отображения этих комментариев (а их очень много) занимало от одной минуты
  6. 6_Удалить старый макет,
  7. 7_Переместить новую картинку с комментариями на его место,
  8. 8_Прикрепить к нему стрелки.

И так с каждым макетом. Количество макетов в день доходило до 30.

Для ускорения использовали «костыль» в виде Sketch и плагинов для замены картинок и выгрузки в Miro, но это было не сильно быстрее. Затем в Miro появилась возможность замены картинок. Это ускорило процесс, но мы понимали, что с плагином было бы точно в два раза быстрее.

Сергей Кутьков
aрт-директор red_mad_robot

Выгрузка «с костылями»:

  1. 1_Экспортируем необходимое количество страниц PNG в папку на компьютер,
  2. 2_Открываем подготовленный Sketch-файл для экспорта,
  3. 3_Проверяем картинки на изменение в размерах, если нужно, подгоняем размеры артборда под картинку,
  4. 4_С помощью плагина экспортируем экраны в Miro,
  5. 5_У картинок с изменившимися размерами меняем масштаб с Custom на Original.

При этом нужно следить за названиями экспортируемых картинок и местом их экспорта, иначе процесс «поломается».

Заменить текст — минута, выгрузить — от 20 минут до часа. Чтобы заменить одно (!) слово в 15 макетах, дизайнеры тратили целый час. Мы поняли, что экспорт нужно автоматизировать, сохранив время и нервные клетки наших дизайнеров и арт-директоров.

Сергей Кутьков
aрт-директор red_mad_robot

Реализация: начало

В ноябре 2019 Figma в бета-режиме запустила новую функциональность публичного аккаунта для компании. Там команды выкладывают макеты, UI-киты, иконки и другие полезные материалы, а также публикуют свои плагины.

В Miro запустили публичную бета-версию платформы и организовали конкурс с призовым фондом в $21 тысячу на лучший плагин. Мы решили принять участие в конкурсе. В нашем арсенале были работающий плагин для Sketch, гитхаб, API Figma, и инструкция для разработчиков плагинов Figma, API Miro и список всех плагинов в Figma.

Конкурс Miro

Проектом мы активно занимались в свободное время. Возникли технические сложности (подробнее об этом написали на habr), из-за которых реализация затянулась с первоначальных 2–3 недель на почти два месяца. За это время конкурс закончился, и Miro объявила победителей.

Среди них были Семён Волков и Роман Красильников с похожим по задумке плагином Figma2Miro. Их проект занял шестое место.

Реализация: продолжение

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

В отличие от нашей реализации, которая была всё-таки больше плагином к Figma (с точки зрения UI и платформы, которая инициирует экспорт), они сделали именно плагин для Miro.
Но, к сожалению, созданное ребятами решение не удовлетворяло потребностям роботов, и именно поэтому мы продолжили работу над собственным плагином.
Час выгрузки макетов, о которых говорил Сергей Кутьков, превратился в две (!) минуты. Еще нам пришлось придумать новое название Figmiro, поскольку изначально мы тоже хотели использовать Figma2Miro.

Илья Крупнов
frontend-разработчик red_mad_robot

Первую версию плагина сделали 27 декабря 2019 года. Выявили проблемы:

  • Скорость: работало очень медленно.
  • Расстояния между фреймами в Miro отличались от расстояний в Figma.
  • Названия картинок, выгруженных в Miro, не совпадали с названием фреймов в Figma.

В январе 2020 устранили проблемы, скорость работы выросла в три раза. Названия фреймов стали совпадать.

Оставалось доделать краевые кейсы с авторизацией в Miro через сторонние сервисы и написать, от чего зависит скорость работы. Наши дизайнеры начали тестирование в феврале 2020. 3 марта выкатили плагин в публичный доступ.

Что умеет плагин Figmiro

Всё работает так же, как мы привыкли делать в Sketch: выделяем фреймы, жмём на кнопку, и макеты появляются в Miro.

  • Выгрузка выбранных фреймов на выбранную доску в Miro.
  • Перезапись ранее выгруженных макетов с сохранением позиции на бордах.

В дальнейшем планируем поддерживать плагин и оптимизировать его работу таким образом, чтобы ускорить процесс выгрузки и синхронизации. Если Miro обновит своё API, перестроим плагин под него.

Илья Крупнов
frontend-разработчик red_mad_robot

Пример работы плагина

Как увеличивается скорость работы с плагином:

Сравнение способов выгрузки макета из Figma в Miro

00:17

с плагином Figmiro


02:59

с функцией замены в Miro

10:02

замена макетов вручную

Время зависит от многих условий: сколько макетов выгружаем, как много на них комментариев и сколько к ним прикреплено стрелок.
Получается, что с плагином всегда более-менее фиксированное время. Без плагина время от 10 минут до бесконечности.

Над плагином Figmiro работали

Идея и дизайн — Антон Магарцов, менеджмент — Сергей Кутьков, разработка — Илья Крупнов. Также спасибо за помощь в реализации Роману Чуркину, Андрею Муравьеву и Антону Ерышеву.

Что дальше

Скачать плагин.

Мы собираем обратную связь по работе плагина на GitHub. Тестируйте Figmiro и делитесь впечатлениями.