Плагин 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
Проектом мы активно занимались в свободное время. Возникли технические сложности (подробнее об этом написали на 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, перестроим плагин под него.
Пример работы плагина
Как увеличивается скорость работы с плагином:
Время зависит от многих условий: сколько макетов выгружаем, как много на них комментариев и сколько к ним прикреплено стрелок. Получается, что с плагином всегда более-менее фиксированное время. Без плагина время от 10 минут до бесконечности.
Над плагином Figmiro работали
Идея и дизайн — Антон Магарцов, менеджмент — Сергей Кутьков, разработка — Илья Крупнов. Также спасибо за помощь в реализации Роману Чуркину, Андрею Муравьеву и Антону Ерышеву.
Что дальше
Скачать плагин.
Мы собираем обратную связь по работе плагина на GitHub. Тестируйте Figmiro и делитесь впечатлениями.
Какие «боли» вы испытываете в своей работе? Расскажите в комментариях, и, может быть, это сподвигнет кого-то на разработку новых плагинов ;)
— «Готовые макеты переносим в Miro, собираем карту переходов и обсуждаем с командой клиента. Там удобно работать с комментариями и собирать изменения карт экранов, показывать навигацию и переходы.»
А почему все это нельзя делать сразу в фигме?
Пробовали, но система комментирования в фигме не очень хорошо подходит под наши процессы. Сильно не хватает возможности присваивания комментариям разных цветов (в текущем процессе у нас есть разделение к какому цвету что относится, какие комментарии для кого написаны, и понятно что именно требует твоего внимания именно сейчас).
В Миро это удобнее реализовано, многим нашим клиентам знакома эта платформа, они уверенно там работают. Там у них есть права на редактирование, они могут закидывать скриншоты и прочее. В фигме мы не можем так шарить рабочие файлы «чтобы ничего не сломалось». Пробовали делать отдельные фигма-файлы для клиента, но этот вариант тоже «не взлетел». Много мелких факторов повлияло на решение выбрать именно такую связку инструментов.
не проще тогда плагин для фигмы запилить?
Так у нас и есть плагин для Figma... https://www.figma.com/community/plugin/814814551050457760/Figmiro
Речь про плагин, воссоздающий функционал Миро в фигме.
API фигмы не даёт возможности вносить изменения в интерфейс, и комментарии переделать не даёт. Отдельно надстраивать дублирующий функционал «кастомных» комментариев, не факт что получится. Ну и это задача, мне кажется, сложнее, чем настроить экспорт и синхронизацию
в Миро очень удобно сделаны многие штуки, они сильно заморочились чтобы реализовать их у себя. Взять те же прилипающие стрелки для построения карт переходов. Сделать аналогичные решения средствами плагина внутри Фигмы — наверное, нереальная задача.
У нас всё-таки немного про другое...
Очень интересно. Попробуем.
Ребята, это пушка!
Неделя Figma?
Это победоносный марш фигмы. Разум победил зло. Я верил, я ждал, и оно случилось. Моя жизнь стала существенно оптимистичнее.
Еще на прошлой неделе всё было готово) но решили на этой, а тут да — неделя Figma получилась)
Круто)) Затестим
Вот бы еще программа в 2020 году умела переназначать шорткаты (mac).
Cудя по всему очень полезный плагин. Однако, в его настройках возможна авторизация в Миро, только по адресу электронной почты. Поэтому я, как человек логинящийся в миро через фэйсбук, воспользоваться плагином не смог:(
Жаль, что плагин сейчас не работает...