Обработка вариантов дизайна

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

Начальная точка

Начнем с файла Figma, который содержит компонент News Card с тремя вариантами:

• герой-предмет для самой важной новостной статьи
• item-item предназначен для типичной статьи
• аудио-пункт предназначен для статьи, которую вы слушаете, а не читаете

Скопировать пример Фигмы

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

1. Загрузите HelloNews.fig на свой компьютер.

2. В Figma перейдите в файловый браузер. С левой стороны наведите курсор на «Черновики». Появится значок + — нажмите значок + , затем «Импортировать» . Выберите файл HelloNews.fig , который вы только что скачали. Это может занять от 10 секунд до минуты.

   

3. Откройте импортированный файл в Figma.

Создать пакет пользовательского интерфейса

Плагин Relay for Figma добавляет дополнительную информацию к нашему компоненту, поэтому мы можем работать с нашими разработчиками, которые будут использовать наш компонент в своем коде.

1. Откройте плагин Relay for Figma в своем файле (в строке меню: Плагины > Relay for Figma ). Нажмите «Начать» .

2. Выберите компонент и нажмите «Создать пакет пользовательского интерфейса» .

   

3. Выбрав пакет пользовательского интерфейса, добавьте описание в поле сводки. Например: «Компонент новостной карточки, предназначенный для отображения новостей в виде списка».

   

Сохранить названную версию

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

1. Откройте плагин Figma Relay, если он еще не открыт.
2. Нажмите «Поделиться с разработчиком» .
3. На экране «Поделиться с разработчиком» вы можете ввести новое имя и описание версии в разделе «Сохранить историю версий» .

4. Нажмите Сохранить .

   Пример названия : Начальная новая карта

   Пример описания : первая итерация элементов новостной статьи.

Скачать проект Android Studio

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

1. Загрузите образец файла HelloNews.zip .
2. Дважды щелкните файл, чтобы разархивировать его, в результате чего будет создана папка с именем HelloNews . Переместите его в свою домашнюю папку.
3. Вернитесь в Android Studio. Перейдите в меню «Файл» > «Открыть» , перейдите в свою домашнюю папку, выберите «HelloNews» и нажмите «Открыть» .
4. Когда вы откроете проект, Android Studio спросит вас, доверяете ли вы этому проекту. Нажмите «Доверить проекту» .

Импортировать в Android Studio

Давайте импортируем наш компонент Figma в проект.

1. Вернувшись в Figma, скопируйте URL-адрес файла News Card Tutorial Figma. Мы будем использовать этот URL-адрес для импорта наших компонентов. В правом верхнем углу Figma нажмите кнопку «Поделиться» . В открывшемся диалоговом окне нажмите «Копировать ссылку» .

   

2. Переключитесь на проект HelloNews в Android Studio. Выберите «Файл» > «Создать» > «Импортировать пакеты пользовательского интерфейса…» в строке меню Android Studio.

   

3. Вставьте URL-адрес вашего файла Figma и нажмите «Далее» .

   

   

   1. После завершения загрузки файла (что может занять некоторое время) нажмите «Готово» .

   

4. Нажмите для создания вашего проекта. Это может занять минуту или около того.

   

Предварительный просмотр приложения и компонента

1. В представлении Android откройте app/java/com/example/hellonews/ui/home/HomeScreen.kt и вы увидите предварительный просмотр приложения, в котором отображаются несколько новостных статей в текстовом формате с печатными историями над аудиоисториями. .

   

2. Откройте app/java (generated)/com/example/hellonews/newscard/NewsCard.kt . Это сгенерированный код Jetpack Compose для нашего компонента Figma. Из предварительного просмотра мы видим, что три варианта компонента NewsCard были переведены из Figma в код. Давайте внимательно посмотрим на код.

   

3. Перечисление View позволяет нам выбрать, какой вариант использовать для этого компонента. Имя перечисления и его значения были получены из вариантов нашего компонента Figma. Это используется в параметре view в нашей компонуемой NewsCard .

   

4. Составной элемент NewsCard был создан из пакета пользовательского интерфейса. Он включает параметр типа View , который устанавливает вариант карточки новостей для создания экземпляра.

   package com.example.myapplication.newscard
   
   import ...
   
   // Design to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list.
   *
   * This composable was generated from the UI Package 'news_card'.
   * Generated code; do not edit directly
   */
   @Composable
   fun NewsCard(
       modifier: Modifier = Modifier,
       view: View = View.HeroItem
   ) {...}
   

Дальше

Мы еще не совсем готовы использовать NewsCard . Компонент не умеет отображать разные новости, только одну и ту же, зашитую в Figma. Итак, если бы мы добавили этот компонент сейчас, все, что мы получили бы, — это повторение одной и той же новости. Нам нужен способ указать, какие части NewsCard должны быть заполнены динамическими данными.

Параметры контента

В этом разделе мы добавим параметры контента в компонент NewsCard .