Код
#статьи

Из Figma в Composable: как работать с плагином Relay в Android Studio

Подключаем плагин и создаём новостное приложение.

Иллюстрация: Rawpixel / Annie для Skillbox Media

Одна из основных задач Android-разработчика — перенос компонентов пользовательского интерфейса из Figma в Composable-функции в Android Studio. Это можно делать вручную или использовать специальные плагины. Один из них — Relay для Android Studio.

Содержание

Анна Жаркова

Lead Mobile Developer в Usetech. Пишет нативные приложения под iOS (Swift/Objective-C) и Android (Kotlin/Java) и кросс-платформенные на Xamarin, Xamarin.Forms и Kotlin Multiplatform. В мобильной разработке 10 лет. Тимлид и ментор. Kotlin Developer Expert. MBE. Эксперт Skillbox по мобильной разработке.

Автор на «Хабре» и Medium. Пишет статьи, выступает на конференциях и митапах. Член программного комитета Mobius, CodeFest, «Стачка». В свободное время изучает китайский и немецкий языки. Увлекается живописью и участвует в выставках.

Что такое Relay и для чего он нужен

Relay — это специальный design-to-code-инструмент. Он конвертирует UI-компоненты из Figma в Composable-функции Android-приложений. Звучит сложно, но давайте разберёмся в терминах:

Jetpack Compose — специальный фреймворк Google для декларативной разработки Android-приложений.

Composable-функции — это строительные блоки, которые используются для декларативной разработки UI Android-приложений с помощью Jetpack Compose. Сами функции описывают дизайн и зависимости данных UI-компонентов.

Плагин Relay позволяет импортировать UI-компоненты из Figma и конвертировать их в код Compose, упрощая работу программиста с дизайнерскими макетами. Теперь по мере создания приложения его можно обновлять в режиме реального времени, включая дизайн, а все изменения напрямую конвертировать и внедрять в код.

Установка плагина

Для работы Relay потребуется установить три отдельных компонента:

  • плагин для Figma;
  • плагин для Android Studio;
  • плагин Relay Gradle.

Важно!

Чтобы использовать Relay у вас должна быть установлена Android Studio 2022.2.1 или новее, Java Runtime, Jetpack Compose версии 1.2 или старше и Gradle версии 8.0 или новее.

Установка плагина Relay для Figma

Авторизуйтесь на сайте Figma или создайте учётную запись, если её ещё нет.

Для добавления плагина к аккаунту перейдите на страницу Relay for Figma и нажмите на кнопку Try it out. После установки откройте его в режиме разработчика, нажав Open in Dev Mode:

Скриншот: Figma / Skillbox Media

Перед вами появится окно выбора команды для вашего аккаунта. Нажмите в нём Run:

Скриншот: Figma / Skillbox Media

Установка плагина Relay для Android Studio

Откройте главное меню Android Studio:

  • Для macOS выберите Android StudioPreferences, а для Windows и Linux FileSettings.
  • Откройте вкладку с плагинами, а затем Marketplace. Найдите Relay for Android Studio и нажмите Install, после завершения установки — Перезапустить IDE.

Чтобы убедиться, что установка прошла успешно, откройте Settings и перейдите во вкладку Plugins. Здесь в разделе Install должен появиться плагин Relay for Android Studio:

Скриншот: Android Studio / Skillbox Media

Установка плагина Relay Gradle

Для переноса компонентов из Figma в приложение необходимо подключить плагин Gradle из репозитория Maven к проекту в Android Studio. IDE по умолчанию вызывает операции Gradle, на которые ссылается проект, поддерживая загрузку и установку любых зависимостей.

Поэтому для установки плагина Relay добавьте запись с указанием его последней версии в скрипт app/build.gradle в раздел плагинов:

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'com.google.relay' version '0.3.09'
}

Добавьте mavenCentral в список репозиториев для settings.gradle:

pluginManagement {
    repositories {
    gradlePluginPortal()
    google()
     mavenCentral()
    }
}

После этого нажмите кнопку Sync Gradle для установки плагина.

Настройка проекта Figma

Теперь настроим связь аккаунта Figma с плагином Relay в Android Studio.

Настройка доступа Relay

Для этого потребуется специальный Figma personal access token. Это токен для интеграции сторонних сервисов, плагинов или других инструментов, которым необходим доступ к вашему аккаунту в Figma.

Скриншот: Figma / Skillbox Media

Чтобы его использовать, следуйте инструкции:

  • Откройте браузер и войдите в Figma.
  • Нажмите на иконку своей учётной записи и выберите Settings.
  • Прокрутите вниз до раздела Personal access tokens и откройте его.
  • Введите Relay, сгенерируйте и скопируйте токен.
  • В Android Studio в главном меню выберите InstrumentsRelay Settings.
  • Вставьте свой токен доступа Figma в поле Existing Figma Access Token.
Скриншот: Android Studio / Skillbox Media

Настройка Android-проекта

Откройте Android Studio:

  • Создайте новый проект: FileNew project.
  • Выберите Empty Compose Activity и нажмите Next.
  • Примите все значения по умолчанию, включая язык Kotlin и минимальный SDK API 21: Android 5.0 (Lollipop).
  • Нажмите Finish.
Скриншот: Android Studio / Skillbox Media

Отредактируйте файл сборки Gradle

Откройте build.gradle (Module: Hello_Figma.app). Это файл сборки Gradle на модульном уровне. Его название может варьироваться в зависимости от введённого вами на этапе создания проекта.

Скриншот: Android Studio / Skillbox Media

Добавьте плагин Relay в файл, изменив для него номер версии:

plugins {
  id("com.android.application")
  id("kotlin-android")
  id("com.google.relay") version "0.3.09"
}

Нажмите Sync Now:

Скриншот: Android Studio / Skillbox Media

Теперь всё готово к работе.

Создаём приложение для новостей с Relay

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

Перейдите в файловый браузер. Появится значок + — нажмите на него, а затем импортируйте проект.

1. Создайте компонент для импорта. Для этого выберите нужные элементы и нажмите на кнопку Create component.

2. Выделите его, нажмите правую кнопку мыши и в контекстном меню выберите PluginsRelay for Figma. Нажмите Начать.

Скриншот: Android Studio / Skillbox Media

3. В открывшемся окне нажмите Create UI Package:

Скриншот: Figma / Skillbox Media

4. Перейдём к настройке свойств компонента. Выделите нужный элемент и с помощью Parameters+ добавьте необходимые свойства. Обязательно укажите имя (Name) и тип (Property).

Скриншот: Figma / Skillbox Media

5. Закончив с настройкой компонента, нажмите Share with developers. Откроется диалоговое окно в котором будет указана комбинация клавиш для продолжения работы. Например, Cmd + L для macOS. Нажмите их.

Важно!

При самостоятельной реализации не забудьте настроить параметры адаптивности компонентов для сохранения. В нашем примере, работая с изображениями, мы используем для них фиксированный размер, а другие элементы интерфейса должны растягиваться по экрану. Чтобы это сделать, настройте дизайн в Figma:

  • Включите AutoLayout, Fill Container и установите параметры главного Row-компонента, ответственного за отображение информации.
  • У элементов, которые должны иметь фиксированный размер, выставьте Fixed, а у адаптивных — Hug или Fill.

Настройте проект в Android Studio

Мы подготовили проект для нашего приложения. Скачайте его с GitHub и откройте в Android Studio.

Проверьте, что в build.gradle уже подключён плагин Relay. Если нет, то следуйте инструкции с сайта.

Проверяем наличие плагина Relay в build.gradle
Скриншот: Android Studio / Skillbox Media

На предыдущем этапе мы создали UI Package. Вернитесь в Figma, выделите компонент и через контекстное меню PluginsRelay перейдите в Relay Figma. Выберите компонент из существующих, нажмите Share with developer и предлагаемую комбинацию клавиш.

Откройте Android Studio и перейдите FileNewImport UI Package. В открывшемся окне добавьте URL-ссылку из предыдущего шага. Убедитесь, что стоит галочка для перевода стилей Figma в Compose. Укажите конфигурацию Material 3 Design для корректной конвертации стилей с поддержкой Material.

Скриншот: Android Studio / Skillbox Media

После успешного импорта вы увидите окно с информацией о полученном компоненте:

Скриншот: Android Studio / Skillbox Media

Нажмите Create.

Для генерации кода необходимо собрать проект с помощью BuildMake Project. Перед этим убедитесь, что в build.gradle установлена версия SDK 34, как targetSdk. Если указана версия ниже, то при компиляции возникнет ошибка.

Скриншот: Android Studio / Skillbox Media

Сгенерированные элементы будут доступны в папке appbuildgenerated:

Скриншот: Android Studio / Skillbox Media

Код для элементов располагается в файле NewsItemRow.kt:

Скриншот: Android Studio / Skillbox Media

Изменить сгенерированные компоненты напрямую в Android Studio невозможно. Для этого требуется внести в них правки в Figma и повторить импорт. После этого пересобрать проект.

Сам Relay-код располагается в JSON-файлах, которые лежат в папке ui-packages:

Скриншот: Android Studio / Skillbox Media

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

Собираем UI 

Перейдём к сбору экрана списка новостей. Для этого создайте @Composable NewsListScreen. В качестве элемента списка используйте LazyColumn, а для хранилища элементов — ViewModel:

} 
val data by vm.data.collectAsState(initial = null)
   LazyColumn {
     items(data.orEmpty()){
         NewsItemRow(
             image = rememberAsyncImagePainter(it.urlToImage),
             title = it.title.orEmpty(),
             text = it.content.orEmpty(),
             date = it.publishedAt.orEmpty(),
             onRowTapped = {navigate.invoke(it)}
         )
     }
   }
}

Для получения данных в нашем примере используется сетевой клиент на Retrofit, в качестве API — NewsAPI. Не забудьте прописать в манифесте приложения разрешение на доступ в интернет:

Скриншот: Android Studio / Skillbox Media

Сохраните и запустите проект:

Скриншот: Android Studio / Skillbox Media

Отлично! Наше приложение готово.

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

Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!

Научитесь: Профессия Android-разработчик Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована