Figma-плагин: с Android на iOS и обратно за несколько секунд

Привет! Это команда дизайнеров Joom. Мы опубликовали в общий доступ Figma плагин, который позволяет автоматически пересобрать макет с одной мобильной платформы на другую: с iOS на Android и обратно. Теперь не нужно делать это руками — оно само!

Скачать можно тут.

Однажды у нас в продукте настала горячая пора. Помните, как все переезжали со Sketch на Figma? Вот и мы. Ну и конечно, нужно было не только пересобрать дизайн-систему, но и перенести все макеты. У нас небольшая команда дизайнеров, ресурсы ограничены, поэтому дизайнерский долг рос на глазах. Нужно было что-то с этим делать. Особенно больно было на больших фичах и в горящие моменты.

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

Сначала мы надеялись найти готовое решение, но его не было, увы. Точнее, было у некоторых компаний, но исключительно для внутреннего использования.

"Ну, окей, — подумали мы, — нет, так нет, у нас же полно разработчиков, пусть нам быстренько накодят, делов-то". Решение приняли, с разработчиками обсудили, и задача успешно переехала в бэклог разработки. И не просто в бэклог, а на самое его дно.

Время шло, а ресурсов на разработку так и не находилось, и тогда мы пошли по плану Б — аутсорс. Составили ТЗ, описали логику и пошли искать разработчика. И нашли! Да еще и какого. Талантливого 17-летнего парня, который еще учился в школе. Он написал нам плагин за неделю. Неделю, Карл!

Протестировали, докрутили, и вот, какая красота получилась. Берем макет, делаем пару кликов. Дальше следите за руками:

Экран пересобрался из Android на iOS за несколько секунд. Разве не магия?

1. Доступно только для команд с планом Professional

К сожалению, только так, потому что только в этом случае есть доступ к общим библиотекам компонентов.

2. Все должно быть на компонентах

Элементы должны быть не группами, не набором слоев, а именно компонентами. Плагин работает по принципу подмены библиотек компонента. Будьте внимательны к этому пункту, иначе будут ошибки в переносе.

3. Компоненты должны быть идентичными

Должны быть идентичные наборы элементов внутри компонента. Придерживайтесь консистентности. Мы делали копию андроида, адаптируя ее под айос.

4. Названия компонентов должны совпадать

Компоненты разных библиотек должны иметь одинаковые названия, иначе плагин не найдет замену и выдаст ошибку. Внимательно проверьте, что тексты везде совпадают и нигде нет опечаток.

Вот и всё! Прибираете библиотеки (если еще не), проверяете консистентность названий — можно пользоваться плагином.

После разработки мы внедрили плагин в свои процессы, убедились, что всё прижилось и действительно экономит время. Теперь мы готовы поделиться им с вами. Будем очень рады, если плагин упростит вашу дизайнерскую жизнь так же, как упростил нашу. Ссылка на плагин.

Какие планы дальше?

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