Como usar o recurso de grade de repetição no Adobe XD

Como usar o recurso de grade de repetição no Adobe XD

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.

Como usar o recurso de grade de repetição no Adobe XD

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.Como usar o recurso de grade de repetição no Adobe XD

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.Como usar o recurso de grade de repetição no Adobe XD

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.Como usar o recurso de grade de repetição no Adobe XD

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.

Como usar o recurso de grade de repetição no Adobe XD

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.Como usar o recurso de grade de repetição no Adobe XD

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.


Trabalhando com pranchetas no Photoshop CC

Trabalhando com pranchetas no Photoshop CC

Aprenda a trabalhar com pranchetas no Photoshop CC, criando telas separadas para projetos de design, como aplicativos móveis e folhetos.

Como aplicar transparência a SVGs

Como aplicar transparência a SVGs

Aprenda como aplicar transparência a gráficos SVG no Illustrator e explore dicas sobre como gerar SVGs com fundos transparentes.

Como ajustar as propriedades do texto no Adobe XD

Como ajustar as propriedades do texto no Adobe XD

Aprenda a ajustar as propriedades do texto no Adobe XD para melhorar a legibilidade e a apresentação do seu projeto. Veja como escolher fontes, tamanhos e estilos de forma eficaz.

Como usar a ferramenta Free Transform em documentos do InDesign CS6

Como usar a ferramenta Free Transform em documentos do InDesign CS6

A ferramenta Free Transform no Adobe InDesign permite transformar objetos de várias maneiras, como mover, girar e dimensionar. Confira como utilizá-la corretamente.

Como dimensionar imagens no Adobe Fireworks CS6

Como dimensionar imagens no Adobe Fireworks CS6

Aprenda a dimensionar suas imagens no Adobe Fireworks CS6 de forma correta. Otimize suas imagens e evite problemas de pixelização e lentidão no download.

Captura de tela uma seção de um arquivo PDF

Captura de tela uma seção de um arquivo PDF

Você pode usar a ferramenta Snapshot no Adobe Acrobat CS5 para selecionar texto e imagens e criar uma imagem de uma determinada área em um arquivo PDF. O resultado é comumente referido como uma captura de tela de uma seção em um arquivo PDF. O resultado é uma imagem, e seu texto não é [...]

Medindo, contando e analisando pixels no Photoshop CC

Medindo, contando e analisando pixels no Photoshop CC

Projetado para pesquisadores e cientistas, os recursos de medição do Photoshop CC são bastante poderosos. Você pode medir qualquer coisa e contar o número de qualquer coisa em uma imagem técnica, talvez de um microscópio ou telescópio. Se você sabe o tamanho exato de qualquer elemento em uma imagem, você pode descobrir quase tudo [...]

As ferramentas Liquify no Adobe CS5 Illustrator

As ferramentas Liquify no Adobe CS5 Illustrator

Ao usar as ferramentas Liquify no Adobe Creative Suite 5 (Adobe CS5) Illustrator, você pode dobrar objetos - torná-los ondulados, pegajosos ou pontiagudos - criando distorções simples a complexas. As ferramentas Liquify podem realizar todos os tipos de distorções criativas ou malucas (dependendo de como você as encara) em seus objetos. Vocês […]

Como criar códigos QR no InDesign CC

Como criar códigos QR no InDesign CC

Você pode usar o InDesign para criar e modificar gráficos de código QR. Os códigos QR são uma forma de código de barras que pode armazenar informações como palavras, números, URLs ou outras formas de dados. A usuária escaneia o código QR usando sua câmera e software em um dispositivo, como um smartphone, e o software faz uso [...]

Quebrar texto em Adobe Illustrator CC

Quebrar texto em Adobe Illustrator CC

Empacotar texto no Adobe Illustrator CC não é exatamente o mesmo que embrulhar um presente - é mais fácil! Uma quebra automática de texto força o texto a envolver um gráfico, conforme mostrado nesta figura. Esse recurso pode adicionar um pouco de criatividade a qualquer peça. O gráfico está forçando o texto a envolvê-lo. Primeiro, crie [...]