Informacje o pakiecie UI i wygenerowanym kodzie

Pakiet UI

Pakiety UI to nowy, elastyczny sposób wymiany informacji o UI. Projektanci używają wtyczki Relay for Figma do tworzenia pakietów UI na podstawie komponentów w Figmie. Spowoduje to, że projekt będzie gotowy do użycia przez programistów. Następnie projektanci podają adres URL pliku projektu Figma.

Programiści używają wtyczki Android Studio do importowania pakietów UI z pliku projektowego Figma. W projekcie Android Studio pakiet UI zawiera deklaratywne opisy zaimportowanych komponentów Figma wraz z powiązanymi zasobami, w tym plikami czcionek, obrazami i plikami SVG.

Pakiety UI to trwałe artefakty, które można zatwierdzić do kontroli źródła. Gdy deweloper zaimportuje pakiet Figma w projekcie Android Studio, pliki zostaną do niego dodane w folderze ui-packages. Oto przykładowy zaimportowany pakiet UI:

Zawartość pakietu UI

Projekt z zaimportowanym pakietem UI zawiera te pliki:

  • [component_name].json – plik JSON z opisem komponentu (np. story_card.json).
  • config.json – przechowuje metadane konkretnego pakietu UI.
  • fonts/ – folder, w którym są przechowywane zasoby czcionek używane przez komponent (jeśli występują).
  • *.png – komponenty z obrazem używane w komponencie (np. menu.png), jeśli występują.
  • [component_name]_preview.png – obraz podglądu komponentu (np. story_card_preview.png).
  • *.svg – zasoby graficzne wektorowe używane w komponencie (np. trójkąt), jeśli występują.
  • FONTS.txt – lista używanych czcionek (jeśli są używane).
  • DEPS.txt – nazwy komponentów podrzędnych.
  • VERSION.txt – wersja przekaźnika użyta do utworzenia i zaimportowania pakietu UI.

Są one przechowywane na koncie src/main/ui-packages/[package_name].

Usuwanie pakietów UI

Aby usunąć pakiet UI z projektu, możesz usunąć folder w sekcji ui-packages/. Odbudowanie projektu po usunięciu folderu spowoduje również usunięcie wygenerowanego kodu.

Struktura folderu z wygenerowanym kodem

Podczas kompilacji projektu te pakiety interfejsu użytkownika są zamieniane w wygenerowany kod zawierający funkcje @Composable, które deweloper może wywołać. Są one przechowywane na koncie build/generated/. W widoku Androida są one widoczne jako java (generated) i res w katalogu modułów (w tym przypadku jest to katalog app).

Foldery zawierające wygenerowane pliki w Android Studio

Na poniższych zrzutach ekranu znajdują się pliki znajdujące się w tym katalogu:

  • Zasoby, takie jak czcionki i obrazy, są kopiowane do build/generated/res/relay/.

    Wygenerowane zasoby w folderze res

  • Każdy pakiet UI ma wygenerowany kod w obszarze build/generated/source/relay/. Folder kodu wygenerowanego w każdym pakiecie UI zawiera pojedynczy plik odpowiadający zaimportowanemu komponentowi. Zawiera też jeden plik z końcówką Fonts.kt, który zawiera odwołania do zasobów czcionek używanych przez komponent.

    Wygenerowane pliki Kotlin w folderze java(generated)

  • Dostępna jest też biblioteka środowiska wykonawczego com.google.relay.compose, która udostępnia funkcje wykorzystywane przez wygenerowany kod.

    Biblioteka środowiska wykonawczego przekaźnika

Struktura wygenerowanego kodu

Materiały kompozycyjne

Komponenty w aplikacji Figma są złożone z warstw. Na przykład ten projekt zawiera warstwę ramki Hello Card, która zawiera 2 warstwy podrzędne: Image (warstwa obrazu) i Title (warstwa tekstowa):

Komponent Karta Hello z warstwami obrazu i tytułu

Po przekształceniu projektu na kod tworzymy dla każdej warstwy osobne funkcje kompozycyjne, w których nazwa warstwy Figma to nazwa funkcji kompozycyjnej (zmodyfikowanej w celu dostosowania do składni Kotlin). Warstwy są przetłumaczone w ten sposób:

  1. Warstwa Karta Hello:

    @Composable
fun HelloCard(
  modifier: Modifier = Modifier,
  title: String
) {
  TopLevel(modifier = modifier) {
      Image()
      Title(title = title)
  }
]

  2. Warstwa Obraz:

    @Composable
fun Image(modifier: Modifier = Modifier) {
  Image(...)
}

  3. Warstwa Tytuł:

    @Composable
fun Title(
  title: String,
  modifier: Modifier = Modifier
) {
  Text(...)
}

Przetłumaczone warianty i parametry Figma

Jeśli komponent Figma ma kilka wariantów, wygenerowany kod będzie zawierał wyliczenie dla każdej właściwości wariantu. Wartości w poszczególnych listach wariantów odpowiadają wartościom danej właściwości wariantu. Funkcja kompozycyjna zawiera parametr dla każdej wyliczenia wariantów.

// Design to select for NewsCard
enum class View {
    HeroItem,
    ArticleItem,
    AudioItem
}

/**
 *   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,
    onNewsCardTapped: () -> Unit = {},
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onMenuTapped: () -> Unit = {}
) {
       when (view) {
           View.HeroItem -> TopLevelViewHeroItem(...) {
               ContentViewHeroItem { ... }
           }
           View.ArticleItem -> TopLevelViewArticleItem(...) {
               ContentViewArticleItem { ... }
           }
           View.AudioItem -> TopLevelViewAudioItem(...) {
               ContentViewAudioItem { ... }
           }
       }
   }
}

Każdy parametr treści i moduł obsługi interakcji w komponencie Figma są przekształcane w parametr elementu kompozycyjnego. Poniższy element kompozycyjny NewsCard ma 4 parametry treści (1 obraz i 3 ciągi) oraz 2 moduły obsługi interakcji (2 ostatnie parametry).

/**
 *   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,
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onNewsCardTapped: () -> Unit = {},
    onMenuTapped: () -> Unit = {}
) {...}