Figma2Android: Как Мы Делали Плагин Для Figma Для Ускорения Разработки Интерфейсов В Jetpack Compose

Figma2Android — это плагин для Figma, который быстро и легко конвертирует проекты из Figma в код Jetpack Compose (Android).

Figma2Android: Как мы делали плагин для Figma для ускорения разработки интерфейсов в Jetpack Compose

Я (программист) и мой партнер (дизайнер) занимаемся проектированием систем в Figma и библиотек для них в SwiftUI и Jetpack Compose на заказ, и при разработке одной из библиотек мы поняли, что очень много времени уходит на перенос свойств элементов из Figma , такие как размеры, цвета, стили, отступы и многое другое.

То есть разработка приложений стала больше связана с передачей свойств в код. В Figma уже были подобные плагины для SwiftUI, VueJS, Html и многих других вещей, а также один для Jetpack Compose, но помимо установки самого плагина требовалось гораздо больше действий.

Тогда возникла идея: а почему бы не написать свой конвертер из Figma в Jetpack Compose; кроме того, в этих решениях не были реализованы некоторые свойства элементов, необходимые нам в работе.

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

Потом конечно моя фантазия разыгралась и мне захотелось сразу экспортировать готовый функциональный элемент, например не только Text, но и TextField, но тогда плагин стал бы сложнее в использовании и требований к дизайну было бы больше , что для нас на данный момент является пустой тратой времени, в будущем возможно.

Реализуем это как одну из идей разработки плагина; Подробнее об идеях разработки плагина будет сказано ниже.

Когда мы сделали его для себя и начали использовать, мы поняли, что такой инструмент значительно облегчит работу большинству разработчиков, использующих Jetpack Compose, и особенно тем проектам, которые начинают переходить с Android Layout на Jetpack Compose, и решили выпустить его как конечный продукт в виде плагина и опубликуйте его в сообществе Figma. При создании плагина мы использовали несколько разных технологий; ниже приведен список и краткое описание того, что, где и как использовалось и изучалось.

Jetpack Compose (Android) - ну конечно первый пункт это сам Jetpack Compose, сейчас много споров о плюсах и минусах этой технологии, но для меня, разрабатывающего и поддерживающего проекты одновременно и на SwiftUI и на Android Верстка, выпуск стабильной версии был праздником, думаю, за этим будущее, если понимать, как правильно им пользоваться, можно делать невероятные вещи.
Figma API + TypeScript + Visual Studio Code — API плагинов Figma достаточно хорошо документирован, плюс, конечно, мне пришлось использовать вывод консоли, чтобы лучше понять содержимое каждого элемента Figma и его свойства.
Кроме того, документация API Figma довольно хорошо объясняет, как в данном случае развертывать инструменты разработки: Visual Studio Code и TypeScript в качестве языка разработки самого плагина.
Gumroad + Gumroad API + PHP — эти инструменты мы использовали для дальнейшей монетизации нашего продукта, а также посмотреть, насколько сложно будет интегрировать подписку в плагин.
Подробнее о монетизации будет написано ниже.
SVG Path Data — пришлось изучить и добавить практически в самом конце, так как сегодня любой интерфейс очень много использует иконки, и без них конвертированный результат выглядел откровенно плохо.
Я, конечно, как разработчик рекомендую экспортировать иконки отдельно и добавлять их в ресурсы проекта, но почему бы просто не сделать это ради красивой картинки :)

Расскажу немного о трудностях, с которыми мы столкнулись.

Группы в Фигме, а именно GroupNode а не FrameNode, внутри них дизайнеры очень часто создают такую ерунду, что их невозможно нормально преобразовать в какой-то читаемый и редактируемый код, из-за этого было принято решение вообще отказаться от их экспорта, т.к.
мой партнер объяснил мне дизайнеру, что хорошо сделанный дизайн должен использовать AutoLayout и Frame, и все будет логично и удобно, в чем я сам убедился при разработке плагина.
Constraints Sigma — в идеологии Jetpack Compose нет необходимости использовать Constraints, хотя они и поддерживаются, мы попробовали конвертировать Constraints из Figma в Jetpack Compose без использования Constraints в коде с помощью отступов и позиционирования.
Текст - в Figma текст имеет вертикальное позиционирование, которого нет в Jetpack Compose Text, я долго бился над решением этой проблемы и в итоге просто игнорирую высоту текстового блока, а позиционирую его в зависимости от Ограничений или родительский элемент текста, если это AutoLayout. Я понимаю, что это скорее всего не лучшее решение, но на мой взгляд это лучший компромисс.
Вторая проблема, которую мы не затронули, это шрифты, каждый шрифт по умолчанию имеет разные свойства, такие как размер, интерлиньяж, кернинг, трекинг и многое другое, что можно отобразить в одной форме в Figma, так как это все еще браузерный рендеринг и с различия в мобильном рендеринге, поэтому мы решили не экспортировать шрифты, а оставили экспорт их свойств, таких как размер, межбуквенный интервал, толщина.
Изучаем принципы дизайна в Figma. Я думаю, каждый хороший программист понимает, что для создания по-настоящему полезного продукта нужно как минимум понимать, как мыслят пользователи, которые будут использовать этот продукт. Как ни странно, использование готовых конструкций из Figma совершенно не помогло в понимании построения дизайна и сильно отличается от принципов построения интерфейсов в программировании, хотя на первый взгляд все очень похоже друг на друга.
Благодаря моему партнеру-дизайнеру мне удалось изучить этот вопрос и наконец понять, как мыслят дизайнеры.
Изображения в Figma — мы хотели экспортировать изображения из Figma, но поняли, что это бесполезная функция для реального использования в проектах, так как любое растровое изображение в любом случае загружается из Интернета или с ресурсов проекта, плюс это сильно бы тормозило преобразование дизайна в код, поскольку работа с изображениями в Figma асинхронная.

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

Поэтому на начальный период мы сделали для всех Промо-период - полный функционал с экспортом всех дочерних элементов.

В дальнейшем будет БЕСПЛАТНАЯ версия, куда экспортируется выбранный элемент без дочерних элементов, и ПРО версия, где будет весь функционал плюс все будущие обновления плагина с дополнительным функционалом, по сути мы устанавливаем номинальную цену за плагин стоит 5 долларов в месяц, так что мы будем заинтересованы в нем в будущем.

Могу за себя сказать, что количество времени, которое он экономит при разработке, не может сравниться с его ценой.

Прежде чем публиковать плагин в Figma, мы прочитали множество статей в Интернете о создании плагинов и сложностях, с которыми столкнулись разработчики, и можем сказать, что если вас одобрили в AppStore и GooglePlayStore, то получить отзыв в Figma — это халява: ) .

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

Что касается сроков, то мы отправили его на рассмотрение 26 октября, а одобрение получили 1 ноября, я все же считаю, что это не очень долго, если вспомнить времена, когда Apple могла рассматривать заявку 3-4 недели.

Планы на будущее по развитию плагина Figma2Android:

Добавьте возможность выбрать экспорт с дочерними элементами или только выбранный элемент.
Более полная поддержка фигур.
Различные виды экспорта, например: экспорт выбранного элемента Instance непосредственно в отдельный компонент в коде.
Возможность экспорта готовых функциональных элементов, таких как TextField, CheckBox и т.д.
Выпустите аналогичный плагин для SwiftUI
и многое другое :)

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

Ссылки на инструменты и документацию для разработки плагинов и, конечно же, сам плагин и его документацию: Плагин для Figma: Figma2Android Документация для Figma2Android связаться с нами API плагинов Figma Справочник API плагинов Figma Гамроуд Гамроуд API Теги: #Android #Разработка Android #api #Kotlin #applications #figma #Jetpack Compose #плагин Figma #utilities #utilities #utilities #utilities