Из Figma в Composable: как работать с плагином Relay в Android Studio
Подключаем плагин и создаём новостное приложение.
![](https://248006.selcdn.ru/main/iblock/628/6282eed0ab0545df54872f0f7964efd3/932b4d7c5068f227a143a15c68784aa3.jpg)
![](https://248006.selcdn.ru/main/iblock/628/6282eed0ab0545df54872f0f7964efd3/932b4d7c5068f227a143a15c68784aa3.jpg)
Иллюстрация: Rawpixel / Annie для Skillbox Media
Одна из основных задач Android-разработчика — перенос компонентов пользовательского интерфейса из Figma в Composable-функции в Android Studio. Это можно делать вручную или использовать специальные плагины. Один из них — Relay для Android Studio.
Содержание
- Что такое Relay и для чего он нужен
- Как его установить
- Как настроить проект
- Как создать новостное приложение с помощью Relay
![](/upload/setka_images/12281706022024_050edf071556407b5fc3b1a4430fdd7fb1d2066b.jpg)
Анна Жаркова
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:
![](/upload/setka_images/15533005022024_5c20dcbcfbab07ab6c2df7e27444d5ac2afca569.png)
Перед вами появится окно выбора команды для вашего аккаунта. Нажмите в нём Run:
![](/upload/setka_images/15535005022024_278cadb5c5a600fd354bbb4a32acf34407bf98f0.png)
Установка плагина Relay для Android Studio
Откройте главное меню Android Studio:
- Для macOS выберите Android Studio → Preferences, а для Windows и Linux File → Settings.
- Откройте вкладку с плагинами, а затем Marketplace. Найдите Relay for Android Studio и нажмите Install, после завершения установки — Перезапустить IDE.
Чтобы убедиться, что установка прошла успешно, откройте Settings и перейдите во вкладку Plugins. Здесь в разделе Install должен появиться плагин Relay for Android Studio:
![](/upload/setka_images/15561005022024_bd473197c461193ea9b6d317f4c236910d065887.png)
Установка плагина 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.
![](/upload/setka_images/15594905022024_e3039f248dd555899a396179b51a05be377f9973.png)
Чтобы его использовать, следуйте инструкции:
- Откройте браузер и войдите в Figma.
- Нажмите на иконку своей учётной записи и выберите Settings.
- Прокрутите вниз до раздела Personal access tokens и откройте его.
- Введите Relay, сгенерируйте и скопируйте токен.
- В Android Studio в главном меню выберите Instruments → Relay Settings.
- Вставьте свой токен доступа Figma в поле Existing Figma Access Token.
![](/upload/setka_images/16012605022024_3ba1d40b04ac5cd7cd2fa6e0f172204d6a60c1af.png)
Настройка Android-проекта
Откройте Android Studio:
- Создайте новый проект: File → New project.
- Выберите Empty Compose Activity и нажмите Next.
- Примите все значения по умолчанию, включая язык Kotlin и минимальный SDK API 21: Android 5.0 (Lollipop).
- Нажмите Finish.
![](/upload/setka_images/16023805022024_ee673444daa2c4c150863fb4fe2e59385df85324.png)
Отредактируйте файл сборки Gradle
Откройте build.gradle (Module: Hello_Figma.app). Это файл сборки Gradle на модульном уровне. Его название может варьироваться в зависимости от введённого вами на этапе создания проекта.
![](/upload/setka_images/16031305022024_a3e9b924b0c79cb7169afa563a255fa0a5b1cadd.png)
Добавьте плагин Relay в файл, изменив для него номер версии:
plugins {
id("com.android.application")
id("kotlin-android")
id("com.google.relay") version "0.3.09"
}
Нажмите Sync Now:
![](/upload/setka_images/16043305022024_cae856732bd4226855875d839121e46dd85999a9.png)
Теперь всё готово к работе.
Создаём приложение для новостей с Relay
Перейдём к практике и рассмотрим работу плагина на примере создания новостного приложения. Мы предлагаем вам использовать проект NewsScreen с готовым дизайном компонентов. Скачайте его и откройте в Figma.
Перейдите в файловый браузер. Появится значок + — нажмите на него, а затем импортируйте проект.
1. Создайте компонент для импорта. Для этого выберите нужные элементы и нажмите на кнопку Create component.
2. Выделите его, нажмите правую кнопку мыши и в контекстном меню выберите Plugins → Relay for Figma. Нажмите Начать.
![](/upload/setka_images/16074405022024_b35d2f51935c884e6ffab8b678a76e6cc2e07aeb.png)
3. В открывшемся окне нажмите Create UI Package:
![](/upload/setka_images/16094305022024_073efc852a65b7685aeef7707c1c1bd107b26868.png)
4. Перейдём к настройке свойств компонента. Выделите нужный элемент и с помощью Parameters → + добавьте необходимые свойства. Обязательно укажите имя (Name) и тип (Property).
![](/upload/setka_images/16102105022024_d0e289e355555cb39f9d7f499b6888c389473c54.png)
5. Закончив с настройкой компонента, нажмите Share with developers. Откроется диалоговое окно в котором будет указана комбинация клавиш для продолжения работы. Например, Cmd + L для macOS. Нажмите их.
Важно!
При самостоятельной реализации не забудьте настроить параметры адаптивности компонентов для сохранения. В нашем примере, работая с изображениями, мы используем для них фиксированный размер, а другие элементы интерфейса должны растягиваться по экрану. Чтобы это сделать, настройте дизайн в Figma:
- Включите AutoLayout, Fill Container и установите параметры главного Row-компонента, ответственного за отображение информации.
- У элементов, которые должны иметь фиксированный размер, выставьте Fixed, а у адаптивных — Hug или Fill.
Настройте проект в Android Studio
Мы подготовили проект для нашего приложения. Скачайте его с GitHub и откройте в Android Studio.
Проверьте, что в build.gradle уже подключён плагин Relay. Если нет, то следуйте инструкции с сайта.
![](/upload/setka_images/16193705022024_26df41bdfacbababd13ce5a2ed7e751b3c19643a.png)
Скриншот: Android Studio / Skillbox Media
На предыдущем этапе мы создали UI Package. Вернитесь в Figma, выделите компонент и через контекстное меню Plugins → Relay перейдите в Relay Figma. Выберите компонент из существующих, нажмите Share with developer и предлагаемую комбинацию клавиш.
Откройте Android Studio и перейдите File → New → Import UI Package. В открывшемся окне добавьте URL-ссылку из предыдущего шага. Убедитесь, что стоит галочка для перевода стилей Figma в Compose. Укажите конфигурацию Material 3 Design для корректной конвертации стилей с поддержкой Material.
![](/upload/setka_images/16220205022024_6451db2226570ea0b99a95968d54a6a08d58b1f8.png)
![](/upload/setka_images/16221905022024_79a3bf1b60dcd0c001f9454c21d4401a9576e013.png)
После успешного импорта вы увидите окно с информацией о полученном компоненте:
![](/upload/setka_images/16225805022024_44e69e18d5579b310b71a78d394ed8c7a91c182f.png)
Нажмите Create.
Для генерации кода необходимо собрать проект с помощью Build → Make Project. Перед этим убедитесь, что в build.gradle установлена версия SDK 34, как targetSdk. Если указана версия ниже, то при компиляции возникнет ошибка.
![](/upload/setka_images/16240405022024_854dea6f537eb50a7df2fcca1a632655ba83fb34.png)
Сгенерированные элементы будут доступны в папке app → build → generated:
![](/upload/setka_images/16250805022024_35e8ec2c216ebe3b8a886221f50a89fb11b30057.png)
Код для элементов располагается в файле NewsItemRow.kt:
![](/upload/setka_images/16254505022024_977ecce833acf31fb612a48f20161dd32ced1cab.png)
Изменить сгенерированные компоненты напрямую в Android Studio невозможно. Для этого требуется внести в них правки в Figma и повторить импорт. После этого пересобрать проект.
Сам Relay-код располагается в JSON-файлах, которые лежат в папке ui-packages:
![](/upload/setka_images/16262505022024_3511985f8d2fe60f5a689701dcfbe84110df1893.png)
Аналогично мы можем создать компоненты и для экрана подробного описания новости и импортировать пакеты повторно. В нашем случае это 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. Не забудьте прописать в манифесте приложения разрешение на доступ в интернет:
![](/upload/setka_images/16290005022024_5df0b482fb1dc77b26b81c121d5af0d3e5869e14.png)
Сохраните и запустите проект:
![](/upload/setka_images/16295205022024_4cbe6f4354dda2f27002951462e6105f47be6d89.png)
Отлично! Наше приложение готово.
Если вы хотите погрузиться в работу с Relay глубже, то советуем вам официальный гайд с практическими примерами использования плагина.
Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!