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