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.


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 ajustar as propriedades do texto no Adobe XD

Como ajustar as propriedades do texto no Adobe XD

Quando você tem texto em seu projeto Adobe XD, pode começar a alterar as propriedades do texto. Essas propriedades incluem Família da fonte, Tamanho da fonte, Peso da fonte, Alinhamento, Espaçamento entre caracteres (kerning e rastreamento), Espaçamento entre linhas (entrelinha), Preenchimento, Borda (traço), Sombra (sombra) e Desfoque de fundo. Então, vamos revisar como essas propriedades são aplicadas. Sobre legibilidade e fonte [...]

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 [...]

Trabalhando com pranchetas no Photoshop CC

Trabalhando com pranchetas no Photoshop CC

Assim como no Adobe Illustrator, as pranchetas do Photoshop oferecem a capacidade de criar páginas ou telas separadas em um documento. Isso pode ser especialmente útil se você estiver criando telas para um aplicativo móvel ou um pequeno folheto. Você pode pensar em uma prancheta como um tipo especial de grupo de camadas criado com o painel Camadas. Seu […]

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 [...]

Como redimensionar formas no Illustrator

Como redimensionar formas no Illustrator

Ao projetar no Adobe Illustrator CC, geralmente você precisa que uma forma tenha um tamanho exato (por exemplo, 2 x 3 polegadas). Depois de criar uma forma, a melhor maneira de redimensioná-la para medidas exatas é usar o painel Transformar, mostrado nesta figura. Selecione o objeto e escolha Janela → Transformar para […]

Como aplicar transparência a SVGs

Como aplicar transparência a SVGs

Aprenda como aplicar transparência a gráficos SVG no Illustrator. Explore como gerar SVGs com fundos transparentes e aplicar efeitos de transparência.

Trabalho com imagens no Adobe XD

Trabalho com imagens no Adobe XD

Depois de importar suas imagens para o Adobe XD, você não tem muito controle de edição, mas pode redimensionar e girar as imagens como faria com qualquer outra forma. Você também pode arredondar facilmente os cantos de uma imagem importada usando os widgets de canto. Mascarando suas imagens, definindo uma forma fechada [...]