Saiba como criar elementos de repetição no Adobe XD usando a repetição de grade.

Ao criar designs para aplicativos web ou aplicativos para dispositivos móveis, geralmente é necessário definir elementos de repetição ou listas de conteúdo. No entanto, pode ser demorado criar esses elementos ou atualizá-los quando houver alterações no design.

O recurso Repetição de grade altera um grupo de elementos para um elemento de repetição. Basta puxar o elemento em qualquer direção e a grade se repete. Ao modificar qualquer estilo de um elemento, a alteração é replicada em todos os elementos da grade. Por exemplo, se você alterar o tamanho da imagem em um dos elementos, todas as imagens na grade serão redimensionadas automaticamente.

Se você tiver um elemento de texto na grade, apenas o estilo do elemento de texto será replicado e não o conteúdo. Portanto, é possível estilizar elementos de texto rapidamente, mantendo o conteúdo diferente nos elementos da grade.

Você pode substituir o texto do alocador de espaço em uma repetição de grade arrastando um arquivo de texto para a grade.

Criar uma repetição de grade

Basicamente, uma repetição de grade é um tipo especial de grupo. É possível criar uma repetição de grade selecionando um objeto ou um grupo de objetos e convertendo-os em uma repetição de grade.

  1. Crie o elemento base que deseja repetir - por exemplo, uma combinação de imagens em miniatura e texto.

  2. Selecione os elementos que deseja repetir.

  3. Converta a seleção em uma repetição de grade clicando no botão no Inspetor de propriedades ou usando o atalho de teclado Cmd + R (Mac) ou Ctrl + R (Windows).

    Alças grandes aparecem no limite do elemento.

    Alças para repetir um elemento ou um grupo de elementos
    Alças para repetir um elemento ou um grupo de elementos
  4. Para repetir o elemento em uma grade vertical, arraste a alça na parte inferior do elemento. Para repetir o elemento em uma grade horizontal, arraste a alça à direita do elemento.

    Repetição de grade vertical
    Repetição de grade vertical
    Repetição de grade horizontal
    Repetição de grade horizontal
  5. Para selecionar elementos em uma grade para edição, clique duas vezes na grade.

Para desagrupar os elementos da grade e trabalhar com eles separadamente, selecione a grade e clique em Desagrupar grade no Inspetor de propriedades.

É possível acessar os elementos componentes da repetição de grade clicando duas vezes dentro do grupo.

Depois de fazer as alterações, saia do contexto de edição pressionando a tecla Escape.

Observação:

Também é possível acessar os elementos componentes pesquisando o elemento no painel Camada ou selecionando-o diretamente.

Ajustar o enchimento entre dois elementos em uma repetição de grade

Para ajustar o enchimento entre dois elementos na grade, passe o mouse sobre o espaço entre os elementos. Quando o cursor mudar para setas duplas, arraste para aumentar ou diminuir o enchimento.

Grade vertical com elementos de repetição
Grade vertical com elementos de repetição

Trabalhar com texto em uma repetição de grade

É possível usar o texto de várias maneiras em uma repetição de grade. Você pode atualizar cada instância individual de um objeto de texto em uma repetição de grade ou arrastar um documento .txt já preenchido para um repetição de grade e fazer com que o conteúdo do arquivo de texto preencha automaticamente os objetos de texto em uma repetição de grade. 

Atualizar elementos de texto individuais em uma repetição de grade

  1. Para selecionar um objeto de texto na repetição de grade, clique no objeto mantendo pressionada a tecla Cmd (Mac) ou a tecla Ctrl (Windows). 

  2. Para editar o elemento de texto, clique duas vezes nele e altere o texto.

Observação:

Alterações no conteúdo não são aplicadas a outros objetos de texto em uma repetição de grade. No entanto, qualquer estilo aplicado ao objeto de texto se aplica a todos os objetos de texto.

Arrastar um arquivo de texto separado por retorno para seu objeto de texto em uma repetição de grade

É possível substituir o texto do alocador de espaço em uma repetição de grade arrastando um arquivo de texto para a grade.

  1. Crie um arquivo de texto com a extensão .txt. Você pode criá-lo usando o TextEdit do Mac, o Bloco de notas do Windows (salve como .txt) ou qualquer outro editor de texto. Verifique se a codificação está definida como UTF-8. Separe cada linha de dados pressionando Return. 

  2. Arraste o arquivo de texto para a repetição de grade.

    Arrastando um arquivo de texto sobre um objeto em uma repetição de grade
    Arrastando um arquivo de texto sobre um objeto em uma repetição de grade

    A repetição de grade é preenchida na mesma sequência do texto que no arquivo de texto. Se houver mais grades do que as linhas de texto no arquivo, a sequência será repetida.

Trabalhar com imagens em uma repetição de grade

Com as imagens, é possível criar padrões repetidos de objetos, nos quais o preenchimento de imagem de um objeto é repetido em um padrão que você define.

Você pode optar por criar um padrão de preenchimento de imagem arrastando as imagens uma a uma em um objeto ou selecionando várias imagens e arrastando-as para um objeto na repetição de grade.

Arrastando arquivos de imagem sobre um objeto em uma repetição de grade
Arrastando arquivos de imagem sobre um objeto em uma repetição de grade

Substituir imagens em uma repetição de grade

Para substituir as imagens na grade, abra o Finder ou o Explorador de Arquivos e navegue até o local no qual as imagens do seu projeto estão armazenadas. Selecione todas as imagens que você deseja que apareçam na grade e arraste-as e solte-as no objeto de destino na repetição de grade.

As imagens antigas são substituídas pelas novas imagens, que são redimensionadas automaticamente.

Criar interações de uma repetição de grade

Conecte toda a repetição de grade para uma única interação

  1. No modo de Design, crie uma segunda prancheta no arquivo usando a ferramenta Prancheta (A).

  2. Alterne para o modo de Protótipo clicando na guia Protótipo ou usando o atalho de teclado Ctrl + Tab.

  3. Selecione a repetição de grade na sua primeira prancheta. Será exibido um conector com uma seta no lado direito do objeto, em seu ponto médio.

  4. Arraste o conector para a próxima prancheta. Selecione suas opções de transição no menu pop-up e pressione Escape ou clique fora do menu pop-up para ignorá-lo.

  5. Visualize pressionando o botão Reproduzir no canto superior direito do quadro do aplicativo ou usando o atalho de teclado Cmd + Enter (Mac) ou Ctrl + Enter (Windows). Clique em qualquer lugar na repetição de grade para reproduzir a interação.

Conecte um único elemento de uma repetição de grade para uma interação

  1. Selecione um objeto dentro da repetição de grade.

  2. Arraste o conector à direita do retângulo e arraste-o para a prancheta que deseja vincular. Selecione suas opções de transição no menu pop-up e pressione Escape ou clique fora do menu pop-up para ignorá-lo.

  3. Visualize pressionando o botão Reproduzir no canto superior direito do quadro do aplicativo ou usando o atalho de teclado Cmd + Enter (no Mac) ou Ctrl + Enter (no Windows). Clique no objeto para verificar a interação.

Crie um grupo de elementos dentro da repetição de grade e crie uma interação com base no grupo

Também é possível criar um grupo de objetos na repetição de grade e criar interações desse grupo.

  1. Selecione um objeto na repetição de grade e, mantendo a tecla Shift pressionada, clique em outros objetos para adicioná-lo à sua seleção.

  2. Depois de selecionar os objetos, clique com o botão direito do mouse e selecione Agrupar no menu de contexto. Você também pode usar o atalho de teclado Cmd + G (Mac) ou Ctrl + G (Windows) para agrupar os objetos.

  3. Alterne para o modo de Protótipo. Arraste o conector do grupo para a prancheta que deseja vincular.

  4. Visualize pressionando o botão Reproduzir no canto superior direito do quadro do aplicativo ou usando o atalho de teclado Cmd + Enter (no Mac) ou Ctrl + Enter (no Windows). Clique no grupo para verificar a interação.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online