Repeat Grid é um dos recursos que mais economizam tempo no Adobe XD. O recurso Repeat Grid permite criar um conjunto de elementos repetidos com um simples clique e arraste. Quando repetido, você pode ajustar um conjunto de elementos repetidos e fazer com que essas alterações sejam refletidas instantaneamente no restante dos elementos. As etapas que você encontra aqui o ajudam a experimentar esse ótimo recurso.
É melhor seguir as instruções, se possível. Você pode encontrar um arquivo de amostra que contém uma imagem e algum texto na pasta LuckyTemplatesCCfiles . Abra a pasta XD e escolha o arquivo RepeatGrid-Sample. Em seguida, siga estas etapas:
Abra um arquivo que contenha elementos que você deseja repetir verticalmente (para baixo) na página. Conforme mencionado anteriormente, você pode criar seu próprio arquivo ou usar o arquivo RepeatGrid-Sample que foi fornecido em nosso site.
Selecione todos os itens a serem repetidos e pressione o botão Repetir grade no painel Propriedades. Você também pode escolher usar o atalho do teclado, Ctrl + R (Windows) ou ⌘ + R (Mac).
As alças aparecem nos lados direito e inferior de seus elementos.
Selecione os itens que deseja repetir e pressione o botão Repetir grade no painel Propriedades.
Clique e arraste para baixo na alça inferior para ver se uma repetição é criada automaticamente conforme você arrasta. Arraste além do modelo para estender a arte para fora da parte inferior.
Repita itens selecionados facilmente usando o recurso Repeat Grid.
Volte para sua arte original e faça uma mudança simples. Talvez altere o tamanho do tipo do título ou dimensione um pouco a imagem. Observe que, conforme você faz alterações neste primeiro item, as alterações são refletidas em toda a repetição.
Isso pode economizar muito tempo, mas siga as próximas etapas para ver como você pode substituir facilmente a imagem e o texto repetidos.
Importando imagens atualizadas em sua grade repetida
Depois de repetir os itens, você pode demonstrar como seu aplicativo funcionará com um conteúdo mais realista. O elemento repetido não fornece uma oportunidade de mostrar os vários dados que seu aplicativo pode estar oferecendo. Abaixo, você pega uma pasta de imagens e as solta no topo de sua grade repetida para substituir a imagem original. Basta seguir estas etapas:
Localize uma pasta de imagens em um formato compatível com o XD, como JPEG, PNG ou GIF. Se você estiver acessando a pasta LuckyTemplatesCCfiles , poderá encontrar uma pasta chamada Insects dentro da pasta XD Files.
Posicione sua janela XD que contém a prancheta com a repetição para que você possa vê-la e também a pasta cheia de imagens.
Certifique-se de selecionar todas as imagens e, em seguida, clique e arraste-as para a Grade repetida. As imagens são substituídas.
Você pode arrastar e soltar várias imagens na grade repetida para substituir o conteúdo da imagem.
Você também pode arrastar imagens do aplicativo Bridge para o Adobe XD.
Atualizando seu texto em sua grade repetida
Aqui, você descobre como atualizar seu texto em uma grade repetida. Isso é concluído da mesma forma que com imagens, mas o formato .txt é vital para que esse processo funcione:
Crie texto em qualquer aplicativo que possa salvar o arquivo no formato Texto Simples - ou seja, com uma extensão .txt. O texto pode ser gerado no Bloco de Notas, Word, baixado do Google Docs como Texto Simples ou exportado de muitos outros aplicativos. Para este exemplo, você pode usar o arquivo de texto de amostra denominado Bugtext.txt na pasta XD-Files em nosso site.
Posicione a pasta que contém o arquivo de texto de forma que você possa ver o arquivo e a grade repetida.
Como no processo de substituição da imagem repetida, clique e arraste o arquivo .txt sobre o texto de grade repetido. O texto é substituído pelo texto do seu arquivo.
Clique e arraste um arquivo .txt sobre a grade repetida para substituir o texto.
Você pode ver o exemplo como ele aparece depois que as imagens e o texto foram substituídos aqui.
A grade repetida com novas imagens e texto.
Se você se estendeu além da área de visualização, certifique-se de clicar no nome da prancheta acima da prancheta para selecioná-lo.
Arraste a alça inferior para estender o comprimento de sua grade repetida. Isso permite que a tela seja rolada na visualização. A linha pontilhada representa a área que é visualizada antes da rolagem.
Clique e arraste para estender a área de visualização de sua grade repetida.
Clique no botão Visualização da área de trabalho e role para ver a grade repetida em ação.