Figma для андроид разработки

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

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

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

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

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

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

Jetpack Compose (Android) — ну конечно же первый пункт сам Jetpack Compose, сейчас много споров о плюсах и минусах этой технологии, но для меня который разрабатывает и поддерживает проекты одновременно и на SwiftUI и на Android Layout, выход stable версии был праздником, я думаю за этим будущее, если понять как его правильно использовать, то можно делать просто невероятные вещи.

Figma API + TypeScript + Visual Studio Code — Plugins API у Figma достаточно хорошо задокументировано, плюс конечно же пришлось использовать вывод в консоль, чтобы лучше понимать содержимое каждого элемента Figma и его свойств. Так же в документации Figma API достаточно хорошо объяснено как развернуть инструменты для разработки в данном случае Visual Studio Code и TypeScript как язык разработки самого плагина.

Gumroad + Gumroad API + PHP — эти инструменты мы использовали, для будущей монетизации нашего продукта, плюс посмотреть насколько сложно будет интегрировать в плагин подписку. Про монетизацию подробней будет написано ниже.

SVG Path Data — пришлось изучить и добавить практически в самом конце, так как сегодня в любом интерфейсе много используют иконки, и без них конвертированный результат смотрелся откровенно плохо, конечно же как разработчик я рекомендую отдельно экспортировать иконки и добавлять их в ресурсы проекта, но чего только не сделаешь ради красивой картинки 🙂

Немного расскажу про сложности с которыми мы столкнулись.

Group в Figma, именно GroupNode а не FrameNode, внутри них дизайнеры очень часто создают такую дичь, что невозможно нормально их конвертировать в какой-то читабельный и редактируемый код, из-за этого было решение вообще отказаться от их экспорта, как мне объяснил мой партнер дизайнер, что хорошо сделанный дизайн должен использовать AutoLayout и Frame, и там все будет логично и удобно, в чем я при разработке плагина и сам убедился.

Constraints Sigma — в идеологии Jetpack Compose не нужно использовать Constraints, хотя их поддержка имеется, мы постарались конвертировать Constraints из Figma в Jetpack Compose без использования в коде Constraints с помощью отступов и позиционирования.

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

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

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

Монетизация в плагине это монета с двумя сторонами, с одной стороны хочется поделиться с сообществом хорошим инструментом бесплатно, с другой стороны кушать все таки тоже надо. Поэтому на начальный период, мы сделали Promo период для всех — полный функционал с экспортом всех дочерних элементов. В дальнейшем будет FREE версия где экспортируется выделеный элемент без дочерних элементов, и PRO версия где будет весь функционал плюс все будущие обновления плагина с дополнительным функционалом, на самом деле мы поставили номанальную цену за плагин в $5/месяц, чтобы нам было интересно его в дальнейшем развивать. Могу сказать по себе количество времени которое он экономит при разработке ни в какое сравнение не идет с его ценой.

Прежде чем публиковать плагин в Figma, мы прочитали много статей с интернете по поводу создания плагинов и сложностей с которыми сталкивались разработчики, и можем сказать, что если вы проходили аппрув в AppStore и GooglePlayStore, то пройти ревью в Figma халява 🙂 . Команда Figma молодцы, они написали полную инструкцию в документации, что нужно проверить в своем плагине, и Вам всего лишь нужно прочитать и сделать то, что они пишут. У нас не возникло никаких трудностей, только долго так что запаситесь терпением. По сроками мы отправили на ревью 26 октября, а получили аппрув 1 ноября, все равно думаю это не сильно долго если вспомнить времена когда Apple могла ревью приложения проводить 3-4 недели.

В будущих планах по развитию плагина Figma2Android:

Добавить возможность выбора экспорта вместе с детьми или только выделенный элемент.

Более полную поддержку Shapes

Разные тип экспорта например: экспорт выделенного Instance элемента сразу в отдельный компонент в коде.

Возможность экспорта готовых функциональных элементов таких как TextField, CheckBox и тд

Выпустить похожий плагин для SwiftUI

и многое другое 🙂

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

Ссылки на инструменты и документацию при разработке плагина и конечно же сам плагин и его документация:

Источник

FigmaExport: как автоматизировать экспорт UI-Kit из Figma в Xcode и Android Studio проекты

Если вы iOS- или Android-разработчик и дизайн вашего проекта разрабатывается в Figma, то скорее всего вы сталкиваетесь с проблемами при экспорте ресурсов: цвета выгрузить нельзя, а иконки и картинки экспортировать неудобно. В этой статье я расскажу, как можно облегчить себе жизнь и автоматизировать экспорт UI-Kit из Figma напрямую в Xcode и Android Studio.

Все больше команд мобильной разработки переходят на Figma. Раньше многие (и мы тоже) использовали связку Sketch + Zeplin или Figma + Zeplin. И это было удобно. Но когда на одном из проектов мы добавили поддержку темной темы, ситуация ухудшилась. Zeplin темную тему не поддерживает, поэтому приходится искать пути обхода, которые заставляют задуматься: а нужен ли теперь Zeplin? В этом случае Zeplin — трата времени дизайнера на поддержание и синхронизацию проектов в двух инструментах, а также дополнительные расходы для компании.

Отказавшись от Zeplin и переехав в Figma, мы (разработчики) начали испытывать боль при экспорте UI-Kit из Figma.

Figma, в отличие от Zeplin, никак не взаимодействует с Xcode и Android Studio. Плагины не позволяют Figma тесно интегрироваться с ними. Мы нашли утилиту командной строки, которая экспортировала цвета и текстовые стили, но нам она не подошла — не поддерживала экспорт картинок и тёмную тему. Именно поэтому я написал свою утилиту.

Но немного подробнее о проблемах.

Почему мобильным разработчикам неудобно экспортировать ресурсы из Figma

Проблема #1: отсутствие возможности экспортировать цвета

Что мы — разработчики видим, когда открываем UI-Kit в Figma? В самом простом случае — несколько кружочков разных цветов.

Но если проект большой и поддерживает темную тему, то, палитра будет содержать намного больше цветов:

У Figma нет возможности экспортировать цвета. Максимум, что можно сделать, это выделить цвет и скопировать HEX значение. И если дизайнер что-то поменяет, то в случае большой палитры, разработчику придется потратить много времени, чтобы сравнить палитру в коде и в Figma.

Название цвета тоже не всегда получается скопировать нормально. Некоторые дизайнеры используют в названии стилей символ «/», но он не поддерживается в iOS и Android. Этот символ нужен, чтобы сгруппировать цвета по группам.

Пример. У цвета в Figma название background/primary. Для Android-разработчиков нужно указать цвет с названием background_primary, а для iOS-разработчиков — backgroundPrimary.

Ещё одна проблема с цветами — темная тема. Ни один инструмент дизайнера (Figma, Zeplin, Sketch) не позволяет иметь темную и светлую палитру одновременно. Тут есть два подхода: создать отдельный файл с темной палитрой либо хранить все цвета в одном файле, но называть их с постфиксом, например, background_primary_day, background_primary_night.

Чего мы хотим как разработчики: чтобы была возможность экспортировать цветовую палитру из Figma напрямую в Xcode или Android Studio проекты.

Проблема #2: неудобный экспорт иконок стандартными средствами

Тут тоже есть несколько затруднений.

Опять же, бывает, что дизайнеры в названии иконок используют символ «/», чтобы группировать иконки. Например, если иконку с названием ic/24/tab/profile экспортировать стандартными средствами Figma, мы получим вот такую вложенность.

С этим невозможно работать. Приходится переименовывать файл. Файл должен называться ic24TabProfile.pdf. Это для iOS-разработчиков.

У Android-разработчиков принято называть ресурсы в стиле snake_case. В таком случае у файла будет название ic_24_tab_profile.xml. Но Figma так не умеет.

Экспортированные из Figma иконки придётся вручную переносить в проект. Причем iOS-разработчикам недостаточно просто перенести их. Надо у каждой иконки проставить: Preserve Vector Data, Single Scale, Render as Template Image.

Чего мы хотим как разработчики: чтобы была возможность экспортировать все иконки из Figma напрямую в Xcode или Android Studio-проекты.

Проблема #3: неудобный экспорт иллюстраций стандартными средствами

Иконки — это маленькие векторные изображения, часто черно-белые, они могут перекрашиваться (системой или разработчиком) и изменять свой размер. Если включить accessibility, то некоторые иконки увеличиваются вместе с текстом. Основная их проблема — названия: символ «/», о котором я говорил выше и то, что iOS-разработчики используют названия в стиле camelCase, а Android разработчики — snake_case.

Иллюстрации — цветные большие изображения, которые отличаются в темной и светлой теме. В темной теме цвета должны быть приглушенными. Если иллюстрация слишком светлая, то выделяясь на темном, она будет «бить» ярким светом в глаза.

С иллюстрациями те же проблемы, что и с иконками, но есть ещё и парочка новых.

Android-разработчики экспортируют иконки и иллюстрации из Figma как SVG-файлы, а затем, встроенными в Android Studio средствами, конвертируют SVG-файлы в vector drawable XML-файлы. Если надо будет экспортировать 50 иконок или иллюстраций, то потребуется много времени, чтобы их все сконвертировать. Это можно автоматизировать.

iOS-разработчики экспортируют иллюстрации как растровые картинки в трех масштабах. Если приложение поддерживает темную тему, то всего будет 6 картинок. Вот так это выглядит в iOS-проекте:

А теперь представим, что из Figma мы выгрузили 50 иллюстраций. Получается, что у нас 50*6=300 PNG-картинок, которые надо вручную через drag&drop перенести в проект, а потом ещё их все, опять же, вручную переименовывать. Хочется ли это делать? — нет. Есть дела поважнее…

Чего мы хотим как разработчики: чтобы была возможность экспортировать все иллюстрации из Figma напрямую в Xcode или Android Studio-проекты.

Почему Zeplin не помог:

• он не поддерживает темную тему;
• не позволяет иметь несколько цветов с одинаковым HEX значением, но разными названиями: если называть цвета по месту их применения, то может получиться так, что два цвета будут иметь разные названия, но одинаковые HEX значения. Например, backgroundPrimaryPressed (цвет главного фона при нажатии) и backgroundSecondary (цвет второстепенного фона) должны иметь одинаковые HEX значения. Zeplin не позволит такое сделать. Есть обходной путь — изменить HEX значение на минимально возможную величину. Пример #F4F5F8 и #F4F5F7;
• требует дополнительные ресурсы дизайнера на синхронизацию макетов и UI-кит с Figma;
• он стоит дополнительных денег. Figma для организации стоит $12 на дизайнера в месяц. Если покупать Zeplin, то это ещё $10.75 на дизайнера в месяц;

Как мы автоматизировали экспорт ресурсов из Figma

Осознав, что так жить больше нельзя, я посмотрел, есть ли у Figma какое-нибудь API или возможность расширения плагинами, чтобы автоматизировать экспорт, и оказалось, что да, есть. У меня было два пути: написать Figma-плагин или использовать Figma API.

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

Плагин пишется на JavaScript. Используя Figma API, можно писать обертку на чем угодно. Но Figma-плагин не может работать с файловой системой на компьютере разработчика (пользователя). Именно поэтому я не стал его делать.

Я iOS-разработчик, поэтому решил сделать консольную утилиту на Swift. Начал с прототипа, который должен экспортировать цветовую палитру из Figma прямо в Xcode-проект. Через пару недель он был готов. Это было нечто. Я запустил свою утилиту и через несколько секунд получил в Xcode всю палитру. Вот так должен работать идеальный экспорт из Figma 🙂

Спустя пару месяцев моя утилита для экспорта ресурсов из Figma была готова. Ссылку на неё вы можете найти в конце статьи.

Как происходит процесс экспорта

Цвета

Разработчик вызывает команду figma-export colors . Если это iOS-проект, то цвета экспортируются в папку Assets.xcassets.

Дополнительно создается Color.swift-файл, чтобы можно было использовать цвета прямо из кода.

Если это Android проект, то цвета экспортируются в файл values/colors.xml и values-night/colors.xml, если темная тема поддерживается.

Иконки

Разработчик вызывает команду figma-export icons.
Если это iOS-проект, то иконки будут экспортированы как PDF-файлы с параметром Render as Template Image, в папку Assets.xcassets. Если иконки будут использоваться в UITabBar, то можно дополнительно указать Preserve Vector Data, чтобы поддерживать Accessibility.

Если это Android-проект, то иконки будут экспортированы в папку drawable как векторные xml-файлы. Под капотом утилита конвертирует SVG-файлы в XML с помощью официальной утилиты vd-tool (vector-drawable-tool), которая используется в Android Studio.

Иллюстрации

Разработчик вызывает команду figma-export images.
Будет все тоже самое, только картинки экспортируются как PNG-файлы.

Если это Android-проект, то иллюстрации будут экспортированы в папку drawable и drawable-night как векторные xml-файлы.

Как можно настроить экспорт

У FigmaExport есть множество настроек, которые хранятся в конфигурационном файле и передаются при запуске утилиты.
./figma-export colors -i figma-export.yaml

В конфигурационном файле указываются параметры для iOS, для Android и общие параметры. Также там указывается идентификатор Figma-файла, где расположены цвета, иконки и картинки. Идентификатор файла можно найти в адресной строке, если открыть его в браузере.
Вот, например, адрес нашего UI-Kit: www.figma.com/file/GVHjNNE8PKKRf1KtnMPY9m/RTC-Key-UI-kit

Идентификатор файла lightFileId в нашем случае: GVHjNNE8PKKRf1KtnMPY9m

Пример конфигурационного файла для iOS-проекта:

Пример конфигурационного файла для Android-проекта:

Как организовать Figma-файл для автоматизированного экспорта ресурсов

Чтобы UI-Kit можно было автоматизированно выгрузить необходимо соблюдать следующие правила.

Общие

• Если цвет, иконка или иллюстрация уникальны для iOS или Android у неё в свойствах, в поле description должно быть указано “ios” или “android”. Если цвет, иконка или иллюстрация не должны быть доступны для экспорта, то у них в свойстве description будет “none”. Таким образом FigmaExport определит, что надо экспортировать в iOS-проект, что в Android проект, а что вообще не надо экспортировать.

Пример. В iOS и Android иконка «поделиться» выглядит по-разному. На скриншотах ниже указано, что иконка ic24ShareIos будет экспортирована только в iOS-проект т.к. в свойстве Component description указано ios, а иконка ic24ShareAndroid будет экспортирована только в Android-проект;

1. 
2. 

• Иконки и иллюстрации должны быть компонентами.
• Цветовые стили и компоненты должны быть опубликованы в Team Library.
• Экспортируются только те иконки и иллюстрации, которые добавлены во фреймы Icons и Illustrations.

Названия ресурсов

Цвета, иконки и иллюстрации можно называть любыми именами содержащими буквы a-z, A-Z и символы «_» и «/».

Так как в коде названия переменных не могут иметь символ “/”, FigmaExport автоматически заменяет его на символ «_». Далее полученная строка конвертируется в camelCase для iOS либо в snake_case для Android.

Название цвета	iOS	Android
button/pressed	buttonPressed	button_pressed
background/primaryPressed	backgroundPrimaryPressed	background_primary_pressed

Название иконки	iOS	Android
ic/24/sound_off	ic24SoundOff	ic_24_sound_off

Название иллюстрации	iOS	Android
img/demo/camera_archive	imgDemoCameraArchive	img_demo_camera_archive

Для консистентности и удобства можно, например, называть все иконки в своем формате — ic/размер/название. Пример — ic/24/open. А иллюстрации — img/группа/название. Пример — img/zero/nointernet. Про цвета можно прочитать в статье «дизайнеру приложений: как создать и передать в разработку тёмную тему».

В конфигурационном файле figma-export.yaml можно с помощью регулярных выражений включить валидацию названий перед экспортом. Если какой-либо ресурс будет иметь неправильное название, FigmaExport сообщит об этом.

Темная тема

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

Цвета
В Figma-файле цвета должны быть оформлены как цветовые стили и опубликованы в Team Library.

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

Иконки
В Figma-файле должен быть Frame с именем Icons. В этом Frame должны находиться компоненты для каждой иконки. Пример:

Иллюстрации
В Figma-файле должен быть Frame с именем Illustrations, который содержит компоненты для каждой иллюстрации. Пример:

Благодаря FigmaExport мы избавились от множества проблем при работе с Figma. Экспорт ресурсов теперь занимает секунды. Несколько примеров, как нам облегчило жизнь использование утилиты.

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

Как бы мы их обновляли вручную: экспортировали все иконки из Figma как zip-файл, переименовали 52 файла, перенесли иконки в проект, проставили все необходимые свойства, проверили, что ничего не забыли. На это бы ушло не менее часа времени.

Как мы их обновили c FigmaExport: запустили команду figma-export icons. Через 10 секунд все изменения подтянулись, мы запустили приложение на симуляторе и увидели, что все иконки заменились.

2. На одном из спринтов мы решили запилить новую фичу. В UI-Kit дизайнер добавил четыре новые иконки, удалил две старые иконки, добавил два новых цвета.

Вместо того чтобы потратить один час времени на обсуждение с дизайнером, что он изменил в UI-Kit, ручном экспорте иконок и цветов, мы просто запустили команду figma-export colors и figma-export icons и через Git увидели что удалилось, что добавилось, а что изменилось. И сразу стали верстать макеты, используя новые иконки и цвета.

3. Делали фичу, в которой надо было сделать расширенный онбординг с 4 разделами, в каждом из которых до 7 страниц с картинками.

Ручной экспорт занял бы много времени. Выполнив команду figma-export images мы менее, чем за минуту, получили в проекте все эти картинки, готовые к использованию.

Несколько минусов

• Необходимо договариваться с дизайнером о том, как надо хранить цвета, иконки, картинки в UI-Kit, чтобы их можно было автоматизировано выгрузить.
• Экспорт работает только для тех компонентов, которые добавлены в Team Library, поэтому у дизайнеров должна быть платная подписка на Figma.

Планы:

• добавить возможность экспорта текстовых стилей,
• добавить возможность экспорта растровых картинок для Android,
• добавить поддержку SwiftUI.

Отдельное «спасибо» Артуру Абрарову и Кате Рокитян за то, что помогли доработать UI-Kit.

Источник