Propriedades do componente do Figma

O Relay reconhece as propriedades do componente do Figma definidas nos componentes empacotados. Conceitualmente, as propriedades do componente Figma são semelhantes aos parâmetros do Relay, mas há algumas diferenças.

Diagrama - Camadas vetoriais convertidas para VectorDrawable convertido para uma imagem

Em geral, as propriedades do componente Figma não exigem que o plug-in Relay seja configurado e usado, portanto, é preferível usá-las nos parâmetros do Relay quando houver sobreposição. No entanto, observe que os parâmetros do Relay permitem um comentário descritivo, que é transferido para o código gerado. As propriedades do componente do Figma não.

Confira abaixo mais detalhes sobre os diferentes tipos de propriedades dos componentes e como o Relay os interpreta.

Propriedades booleanas

As propriedades booleanas controlam se os elementos são exibidos em um design específico. Eles podem reduzir drasticamente o número de variantes que um componente precisa definir. Por exemplo, um botão com um ícone opcional não precisa de variantes separadas para os estados de ícone mostrado e oculto.

O Relay respeita os parâmetros booleanos nos componentes empacotados e gera a assinatura da função @Composable adequada.

Propriedades do texto

As propriedades de texto são quase idênticas aos parâmetros de conteúdo de texto do Relay. A única diferença é o suporte a comentários na documentação. Se os parâmetros do Relay e as propriedades de texto forem declarados na mesma camada, o Relay vai usar a definição do parâmetro para permitir comentários. No entanto, é preciso ter cuidado nesse caso para evitar confusão usando uma nomenclatura consistente.

Se os comentários não forem necessários para um parâmetro específico, recomendamos o uso de uma propriedade de texto do Figma para simplificar.

Propriedades de troca de instâncias

As propriedades de troca de instâncias permitem que os clientes de um componente troquem instâncias dentro de um filho. Conceitualmente, isso é semelhante aos parâmetros filhos do Relay, mas há algumas diferenças importantes:

Aplicabilidade: as propriedades de troca de instâncias só podem ser aplicadas a camadas de instâncias. No entanto, os parâmetros filhos do Relay podem ser aplicados a instâncias, frames ou grupos. Como resultado, o uso de propriedades de troca de instância exige que o conteúdo trocado seja um componente, enquanto o Relay permite que o conteúdo seja qualquer sub-hierarquia de camadas.

Escopo: as propriedades de troca de instâncias só podem ter o valor definido no componente de nível superior em uma hierarquia de componentes. Os parâmetros filhos do Relay, por outro lado, são definidos em qualquer nível da hierarquia em que o parâmetro não está exposto ao nível do pai.

O Relay reconhece as propriedades de troca de instância declaradas nos componentes empacotados e as trata tanto quanto possível de forma equivalente aos parâmetros filhos (por exemplo, emitindo a mesma assinatura de função no código gerado). Se um parâmetro filho do Relay for declarado em uma camada da instância, a definição dele vai prevalecer sobre a propriedade de troca da instância (se houver) declarada nessa camada.

Assim como acontece com as propriedades de texto, usar uma propriedade do componente Figma e um parâmetro do Relay na mesma camada pode causar confusão se a nomenclatura for inconsistente. No entanto, como os parâmetros filhos têm diferenças significativas na capacidade de instâncias de troca de instâncias, não temos uma recomendação geral sobre onde usar e onde. Ambas são possibilidades. Essa decisão será informada pelo uso pretendido do componente.

Propriedades da variante

As propriedades de variantes são criadas implicitamente quando os componentes têm mais de uma variante. O Relay oferece suporte a propriedades de variantes, traduzindo-as em valores de tipo enumerado no código gerado.

Os designers também podem declarar parâmetros do Relay que expõem as propriedades da variante para camadas de instância em um componente empacotado.