Instâncias de pacotes aninhadas

Um pacote de interface com instâncias aninhadas

Os pacotes de interface podem conter (ou "aninhar") instâncias de outros pacotes de interface, com suporte a conteúdo dinâmico e interatividade em cada nível. Todos eles são importados automaticamente usando o plug-in Relay para o Android Studio.

Adicionar instâncias aninhadas e expor parâmetros aninhados

As instâncias de pacote podem ser adicionadas da mesma forma que você adicionaria instâncias de componentes no Figma.

Depois de adicionar uma instância aninhada a um pacote, é possível incluir conteúdo e parâmetros de interação com base nos parâmetros da instância aninhada, assim como as propriedades de qualquer outra camada:

  • Selecione a camada da instância de pacote.
  • Clique no parâmetro de adição + na IU do Relay para Figma.
  • Selecione um dos parâmetros de pacote aninhados.

O parâmetro ou a interação selecionado é exposto pelo componente pai, formando uma conexão entre o parâmetro de pacote aninhado e um novo parâmetro adicionado ao componente pai. No código gerado, agora você pode fornecer um valor ao pai, que é transmitido para uma instância do componente de código do pacote aninhado.

Se a instância aninhada estiver presente em diversas variantes do Figma no componente pai, a interface vai agrupar instâncias de variantes para ativar a configuração individual.

Como agrupar instâncias por variante

Por padrão, os parâmetros de instância do pacote aninhado não são expostos pelo componente pai. Em vez disso, o código gerado usa o valor especificado no Figma, assim como as substituições normais de parâmetros.

Como expor parâmetros de instância aninhados pelos pais

Confira este exemplo:

  • O pacote Chip tem um parâmetro de texto, chip-text.
  • O pacote Description Card contém um pacote Chip. Os parâmetros são:
    • title
    • subchip-text, que expõe o parâmetro chip-text da instância do Chip
    • sub-icon
    • details

  • O pacote Reservation Card contém um pacote Description Card. Os parâmetros são:

    • hero-image

    • headline, que expõe o parâmetro title da instância Description Card.

    • reservation-text, que expõe o parâmetro chip-text da instância de Description Card.

    • summary, que expõe o parâmetro details da instância Description Card.

sub-icon é o único parâmetro do Description Card que não é exposto pelo Reservation Card. Todas as instâncias de um Reservation Card usam o ícone que o Description Card fornece por padrão.

Para expor um parâmetro de uma instância de componente aninhado:

  1. Selecione uma instância aninhada de um pacote de IU que tenha parâmetros. Você pode selecionar a instância diretamente na tela ou no plug-in Relay para Figma em Relay instances.

  2. Clique em + ao lado de Parameters. O menu mostra os parâmetros da instância selecionada. Selecione um parâmetro.

    Isso expõe um parâmetro da instância aninhada. Neste exemplo, selecionamos a instância do Description Card e expomos o parâmetro details.

    Como expor o parâmetro "details" do "Description Card"

  3. No painel à direita do plug-in Relay para Figma, é possível selecionar um parâmetro diferente ou renomear o parâmetro para mudar a forma como ele é chamado no código gerado. Neste exemplo, o parâmetro é renomeado como summary, que ainda se refere ao parâmetro details da nossa instância aninhada.

    Renomeando o parâmetro "details" como summary.

Quando você importa um componente pai (neste caso, Reserva Card) para o Android Studio, todos os pacotes aninhados são importados automaticamente (neste caso, Description Card e Chip). Quando o código é gerado, cada pacote cria a própria função de composição.

Pacotes de interface e código gerado

O código gerado para o exemplo vai ficar assim:

ReservationCard.kt

..
import com.example.hellofigma.descriptioncard.DescriptionCard
...

@Composable
fun ReservationCard(
    modifier: Modifier = Modifier,
    heroImage: Painter,
    headline: String,
    summary: String,
    reservationText: String
) {
    ...
    DescriptionCard(
        title = headline,
        details = summary,
        subchipText = reservationText,
        subIcon = painterResource(R.drawable.reservation_card_bookmark_icon),
        modifier = modifier
    )
    ...
}

DescriptionCard.kt

...
import com.example.hellofigma.chip.Chip
...
@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
    title: String,
    details: String,
    subchipText: String,
    subIcon: Painter
) {
   ...
   Chip(chipText = subchipText)
   ...
}

Modificar as propriedades da instância de pacote aninhada

Se você substituir o valor de uma propriedade de instância aninhada no Figma, o novo valor só vai ser traduzido no código do Compose se o componente aninhado tiver adicionado um parâmetro para essa propriedade. Caso contrário, o novo valor será descartado e o valor original no componente aninhado será usado no código.

Vamos conferir este exemplo. O componente Description Card tem uma instância do componente Chip. Adicionamos uma substituição à instância de Chip mudando o texto de "Chip Text" para "Reserva necessária":

Instância do componente do ícone no card de descrição

Se o Chip não tiver um parâmetro para o texto, o ícone Description Card's ainda vai mostrar "Texto do ícone", e não "Reserva necessária" no código gerado.

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
) {
    ...
    Chip(
        modifier = modifier
        // No parameter available to override the chip's text
    )
    ...
}

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

Se o Chip tiver um parâmetro para o texto, por exemplo, chip-text, no código gerado, DescriptionCard chamará Chip com "Reserva necessária" como o valor do parâmetro chipText:

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
) {
    ...
    Chip(
        modifier = modifier,
        chipText = "Reservation Required"
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    chipText: String
) {...}

Se o Description Card expuser o parâmetro Chip-text como subchip-text, no código gerado, DescriptionCard vai ter um parâmetro subchipText e chamar Chip com subchipText como o valor do parâmetro chipText:

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
    subchipText: String
) {
    ...
    Chip(
        modifier = modifier,
        chipText = subchipText
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    chipText: String
) {...}

Além disso, agora que "Reserva necessária" é o valor de um parâmetro, ele aparece no código gerado apenas na visualização do DescriptionCard.

@Preview
@Composable
private fun DescriptionCardPreview() {
    MaterialTheme {
        RelayContainer {
            DescriptionCard(
                subchipText = "Reservation Required",
                modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)
            )
        }
    }
}

Limitações