Guia do Usuário Cancelar

Criar elementos de repetição

Pesquisar
XD

XD

Abrir aplicativo
  1. Guia do usuário do Adobe XD
  2. Introdução
    1. Novidades no Adobe XD
    2. Perguntas frequentes
    3. Criar designs e protótipos e compartilhar com o Adobe XD
    4. Gerenciamento de cores
    5. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    6. Noções básicas sobre a área de trabalho
    7. Alterar o idioma do aplicativo no Adobe XD
    8. Acessar kits de design de interface
    9. Acessibilidade no Adobe XD
    10. Atalhos de teclado
    11. Dicas e truques
  3. Design
    1. Pranchetas, guias e camadas
      1. Introdução às pranchetas
      2. Usar guias e grades
      3. Criar pranchetas com rolagem
      4. Trabalhar com camadas
      5. Criar grupos de rolagem
    2. Formas, objetos e caminho
      1. Selecionar, redimensionar e girar objetos
      2. Mover, alinhar, distribuir e organizar objetos
      3. Agrupar, bloquear, duplicar, copiar e virar objetos
      4. Definir traçado, preenchimento e sombra projetada para objetos
      5. Criar elementos de repetição
      6. Criar designs de perspectiva com transformações em 3D
      7. Editar objetos usando operações boolianas
    3. Texto e fontes
      1. Trabalhar com ferramentas de desenho e texto
      2. Fontes no Adobe XD
    4. Componentes e estados
      1. Trabalhar com componentes
      2. Trabalhar com componentes aninhados
      3. Adicionar vários estados aos componentes
    5. Mascaramento e efeitos
      1. Criar uma máscara com formas
      2. Trabalhar com efeitos de desfoque
      3. Criar e modificar degradês
      4. Aplicar efeitos de mesclagem
    6. Layout
      1. Redimensionamento responsivo e restrições
      2. Definir preenchimento fixo para componentes e grupos
      3. Criar designs dinâmicos com pilhas
    7. Vídeos e animações Lottie
      1. Trabalhar com vídeos
      2. Criar protótipos usando vídeos
      3. Trabalhar com animações Lottie
  4. Protótipo
    1. Criar protótipos interativos
    2. Animar protótipos
    3. Propriedades de objeto compatíveis com a Animação automática
    4. Criar protótipos com teclados e controles
    5. Criar protótipos usando reprodução e comandos de voz
    6. Criar transições temporizadas
    7. Adicionar sobreposições
    8. Criar protótipos de voz
    9. Criar links de âncora
    10. Criar hiperlinks
    11. Visualizar designs e protótipos
  5. Compartilhar, exportar e analisar
    1. Compartilhar pranchetas selecionadas
    2. Compartilhar designs e protótipos
    3. Definir permissões de acesso para links
    4. Trabalhar com protótipos
    5. Revisar protótipos
    6. Trabalhar com especificações de design
    7. Compartilhar especificações de design
    8. Inspecionar especificações de design
    9. Navegar em especificações de design
    10. Revisar e comentar especificações de design
    11. Exportar ativos de design
    12. Exportar e baixar ativos de especificações de design
    13. Compartilhamento em grupo para corporações
    14. Fazer backup ou transferir ativos do XD
  6. Sistemas de design
    1. Sistemas de design com as Bibliotecas da Creative Cloud
    2. Trabalhar com ativos de documento no Adobe XD
    3. Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
    4. Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
    5. Trabalhar com tokens de design 
    6. Usar ativos das Bibliotecas da Creative Cloud
  7. Documentos na nuvem
    1. Documentos na nuvem no Adobe XD
    2. Colaborar e coeditar designs
    3. Coeditar documentos compartilhados com você
  8. Integrações e plug-ins
    1. Trabalhar com ativos externos
    2. Trabalhar com ativos de design do Photoshop
    3. Copiar e colar ativos do Photoshop
    4. Importar ou abrir designs do Photoshop
    5. Trabalhar com ativos do Illustrator no Adobe XD
    6. Abrir ou importar designs do Illustrator
    7. Copiar vetores do Illustrator para o XD
    8. Plug-ins para o Adobe XD
    9. Criar e gerenciar plug-ins
    10. Integração do JIRA com o XD
    11. Plug-in do Slack para XD
    12. Plug-in do Zoom para XD
    13. Publicar o design do XD no Behance
  9. XD para iOS e Android
    1. Visualizar em dispositivos móveis
    2. Perguntas frequentes sobre o Adobe XD para dispositivos móveis
  10. Solução de problemas
    1. Problemas conhecidos e corrigidos
      1. Problemas conhecidos
      2. Problemas corrigidos
    2. Instalação e atualizações
      1. O XD aparece como não compatível no Windows
      2. Código de erro 191
      3. Código de erro 183
      4. Problemas ao instalar plug-ins XD
      5.  Solicitação para instalar e reinstalar o XD no Windows 10
      6. Problemas com a migração de preferências
    3. Inicialização e falha
      1.  O XD trava ao ser iniciado no Windows 10
      2.  O XD fecha ao fazer logoff da Creative Cloud
      3. Problema com o status da assinatura no Windows
      4. Aviso de aplicativo bloqueado ao iniciar o XD no Windows
      5. Geração de dump de falha no Windows
      6. Coleta e compartilhamento de registros de falhas
    4. Documentos na nuvem e bibliotecas da Creative Cloud
      1. Problemas com os documentos na nuvem do XD
      2. Problemas com componentes vinculados
      3. Problemas com bibliotecas e links
    5. Prototipagem, publicação e revisão
      1. Não é possível gravar interações de protótipo no macOS Catalina
      2. Problemas com fluxos de trabalho de publicação
      3. Links publicados não são exibidos nos navegadores
      4. Protótipos não são renderizados corretamente nos navegadores
      5. Painel de comentários aparecendo repentinamente em links compartilhados
      6. Não é possível publicar bibliotecas
    6. Importação, exportação e trabalho em outros aplicativos
      1. Exportação e importação no XD
      2. Arquivos do Photoshop no XD
      3. Arquivos do Illustrator no XD
      4. Exportar do XD para o After Effects
      5. Arquivos do Sketch no XD
      6. Aplicativos de terceiros não visíveis na exportação

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 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 ser atualizado

    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 - A ser atualizado

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

É possível conectar uma repetição de grade a outras pranchetas no modo de Protótipo das seguintes maneiras:

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.

Importar conteúdo com repetição de grade

Confira este vídeo de exemplo para começar a usar a repetição de grade. 

Mais itens semelhantes

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Links rápidos

Veja todos os seus planos Gerenciar seus planos
Ver links rápidos
Ocultar links rápidos

Avisos legais | Política de privacidade online