Плагин 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 и делитесь впечатлениями.
Какие «боли» вы испытываете в своей работе? Расскажите в комментариях, и, может быть, это сподвигнет кого-то на разработку новых плагинов ;)
— «Готовые макеты переносим в Miro, собираем карту переходов и обсуждаем с командой клиента. Там удобно работать с комментариями и собирать изменения карт экранов, показывать навигацию и переходы.»
А почему все это нельзя делать сразу в фигме?
Пробовали, но система комментирования в фигме не очень хорошо подходит под наши процессы. Сильно не хватает возможности присваивания комментариям разных цветов (в текущем процессе у нас есть разделение к какому цвету что относится, какие комментарии для кого написаны, и понятно что именно требует твоего внимания именно сейчас).
В Миро это удобнее реализовано, многим нашим клиентам знакома эта платформа, они уверенно там работают. Там у них есть права на редактирование, они могут закидывать скриншоты и прочее. В фигме мы не можем так шарить рабочие файлы «чтобы ничего не сломалось». Пробовали делать отдельные фигма-файлы для клиента, но этот вариант тоже «не взлетел». Много мелких факторов повлияло на решение выбрать именно такую связку инструментов.
Очень интересно. Попробуем.
Ребята, это пушка!
Неделя Figma?
Это победоносный марш фигмы. Разум победил зло. Я верил, я ждал, и оно случилось. Моя жизнь стала существенно оптимистичнее.
Еще на прошлой неделе всё было готово) но решили на этой, а тут да — неделя Figma получилась)