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

В 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 в код. Давайте внимательно посмотрим на код.

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

    Варианты в Figma и соответствующем перечислении View
  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 .

{% дословно %} {% дословно %} {% дословно %} {% дословно %}