Мы используем cookie-файлы. Оставаясь на сайте роботов, человек соглашается на использование cookie-файлов.
Подробнее — в «Условиях использования cookie-файлов».

Плагин Figmiro: как автоматизировать выгрузку из Figma в Miro и сохранить нервы дизайнеров

Железные дизайнеры Redmadrobot Design Lab рассказывают об истории создания плагина, который не успел поучаствовать в конкурсе с призовым фондом в $21 тысячу, но зато теперь экономит время нашим дизайнерам.

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

В августе 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 появилась возможность замены картинок. Это ускорило процесс, но мы понимали, что с плагином было бы точно в два раза быстрее.

Сергей Кутьков
Арт-директор Redmadrobot

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

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

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

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

Сергей Кутьков
Арт-директор Redmadrobot

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

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

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

Конкурс Miro

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

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

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

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

В отличие от нашей реализации, которая была всё-таки больше плагином к Figma (с точки зрения UI и платформы, которая инициирует экспорт), они сделали именно плагин для Miro.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что дальше

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

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

Какие «боли» вы испытываете в своей работе? Расскажите в комментариях, и, может быть, это сподвигнет кого-то на разработку новых плагинов ;)