Плагин 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#figma #miro #плагины #дизайнеры #ux #ui #время