Usar guias e grades no XD

Procurando informações sobre como alinhar ativos de design usando guias e grades? Você está no lugar certo.

Ao trabalhar em seus designs, você pode usar guias para alinhar objetos ou gerenciar o espaçamento entre elementos em uma prancheta. As grades funcionam como uma estrutura na qual você pode organizar seus elementos de design (imagens, glifos, parágrafos) e garantir a simetria do layout.

O que são guias?
Guias no XD

O que são grades?
Grades de layout ou quadriculadas no XD

Oi, eu sou a Jeanee, uma designer gráfica que está liderando um projeto de design de UX no XD com várias pranchetas e objetos.

 
  • Ela está procurando recursos para definir a posição e o layout de objetos usando guias.

 

  • Ela precisa de ajuda para alinhar e definir a estrutura de objetos no projeto de design usando guias.

Isso soa familiar? Se você tem essas mesmas dificuldades, continue lendo para saber como criar e usar guias e grades nas suas pranchetas.

Experimente

Obter o arquivo de exemplo

.xd;  7 MB

Antes de continuar

Criar e gerenciar guias

Ao inserir suas pranchetas na tela de design, uma área é adicionada acima e à esquerda delas, na qual você pode arrastar guias. Você pode centralizá-las na horizontal ou na vertical, copiá-las e colá-las em várias pranchetas, removê-las e ativar/desativar sua visibilidade.

Continue lendo para saber como criar e gerenciar guias.

Adicionar guias

Copiar e colar guias

Remover guias

Limpar, ocultar e bloquear guias

Criar guias

Deseja alinhar e posicionar objetos em suas pranchetas de cima para baixo? Use guias verticais. Se você quiser alinhar e posicionar objetos da esquerda para a direita, use guias horizontais. 

Guias verticais

Adicionar guias em suas pranchetas

Para criar uma guia vertical, passe o mouse sobre a borda esquerda da prancheta até o ícone  aparecer. Clique e segure o ícone e arraste-o para a posição desejada.

Guias horizontais

Adicionar guias em suas pranchetas

Para criar uma guia horizontal, passe o mouse sobre a borda superior da prancheta até o ícone  aparecer. Arraste-o e solte-o na posição desejada.

Copiar e colar guias

Agora que você criou guias, pode usar a opção Copiar/Colar guias para duplicá-las rapidamente.

Copiar guias

Copiar guias em uma prancheta

Para copiar guias de uma prancheta, selecione a prancheta e clique em Exibir > Guias > Copiar guias.

Colar guias

Colar guias em uma prancheta

Para colar as guias copiadas, clique em Exibir ou clique com o botão direito na prancheta > Guias > Colar guias.

Remover guias

Você pode remover uma ou mais guias ao mesmo tempo.

Para remover uma guia, clique e arraste a guia para fora da prancheta.

Para remover várias guias de uma prancheta, selecione a prancheta e clique na opção Exibir ou clique com o botão direito na prancheta. Selecione Guias > Apagar guias.

Apagar guias adicionadas a uma prancheta

Ocultar e bloquear guias

Deseja ocultar temporariamente guias e exibi-las quando necessário? Use a opção Ocultar todas as guias.

Você também pode bloquear guias em todas as pranchetas para impedir que elas sejam movidas ou ajustadas acidentalmente.

Para ocultar e bloquear guias no macOS e Windows:

Ocultar guias

Ocultar guias

  • Clique na opção Exibir > Ocultar todas as guias na barra de menus superior. Você também pode pressionar Command + ; para ocultar todas as guias no macOS.
  • Clique com o botão direito na prancheta e selecione Guias > Ocultar todas as guias. Você também pode pressionar Ctrl + ; para ocultar guias no Windows.

Bloquear guias

Bloquear todas as guias nas pranchetas

  • Clique na opção Exibir > Bloquear todas as guias na barra de menus superior. Você também pode pressionar Command + Shift + ; para bloquear todas as guias no macOS.
  • Clique com o botão direito na prancheta e selecione Guias > Bloquear todas as guias. Você também pode pressionar Ctrl + Shift + ; para bloquear todas as guias no Windows.

Ajustar e alinhar objetos usando guias inteligentes

Agora que você aprendeu o básico sobre como criar e gerenciar guias, pode usar as guias inteligentes para ajustar temporariamente as guias ao criar ou manipular objetos ou pranchetas. 

Guias inteligentes

As guias inteligentes estão ativadas por padrão. Ao mover um objeto ou prancheta, as guias inteligentes permitem alinhar, editar e transformar objetos ou pranchetas em relação a outros objetos, pranchetas ou os dois por meio do alinhamento ajustado dos elementos.

Posicionar objetos usando grades

Agora que você sabe o básico sobre guias no XD, vá em frente e aprenda a definir a estrutura do design e alinhar objetos em uma prancheta usando as grades de layout ou quadriculadas. 

Para adicionar grades de layout ou quadriculadas, selecione uma ou mais pranchetas. Acesse a seção Grade no Inspetor de propriedades e selecione Layout ou Quadriculada.

Grades de layout

Posicionar objetos em grades de layout

Grades de layout são grades divididas em colunas que podem ser úteis ao alinhar objetos de design ou criar conteúdo para tamanhos de tela diferentes. Você pode ajustá-las com rapidez e facilidade de acordo com suas necessidades.

Grades quadriculadas

Posicionar grades quadriculadas

Grades quadriculadas têm linhas horizontais e verticais para garantir o dimensionamento e o alinhamento precisos de objetos ao criar ícones ou aplicativos para dispositivos móveis.

Definir preferências de grade

Depois de adicionar grades de layout e quadriculadas às pranchetas, você pode personalizar as opções de exibição das grades ajustando as preferências na seção Grade do Inspetor de propriedades. Continue lendo para saber como alterar o tamanho, o número de colunas, as propriedades da medianiz e as margens das grades.

Preferências da grade quadriculada

Com base nas suas necessidades de design, você pode alterar o tamanho das grades quadriculadas.

Alterar o tamanho da grade quadriculada

O tamanho da grade é a distância entre as linhas de grade na grade quadriculada. Para editar o valor do tamanho da grade, insira o número desejado no campo Tamanho do quadrado do Inspetor de propriedades.

Preferências da grade de layout

Com uma grade de layout aplicada a uma prancheta, você pode definir o número de colunas, a largura da coluna, as propriedades da medianiz e os tamanhos das margens na seção Grade do Inspetor de propriedades.

Alterar o número de colunas

Alterar o número de colunas na grade de layout

Insira o valor no campo Colunas. Em designs da Web, geralmente são usadas grades com 12 ou 16 colunas. 

Alterar a largura da coluna e as propriedades da medianiz

Alterar as propriedades da medianiz na grade de layout

Para alterar a largura das colunas, insira o valor no campo Largura da coluna. Para definir sua própria largura da medianiz, edite o valor padrão no campo Largura da medianiz

Agora que você modificou o número de colunas, a largura da medianiz e a largura da coluna, saiba como ajustar as margens da prancheta. As margens são a distância entre a grade de layout e a borda da prancheta. Continue lendo para saber como ajustar margens em todos os lados.

Alterar as margens esquerda ou direita vinculadas

Alterar as margens esquerda ou direita vinculadas

Para ajustar a margem vinculada à esquerda ou à direita, clique no ícone  e edite o valor.

Alterar a margem de cada lado

Alterar a margem de todos os lados

Para ajustar as margens esquerda, direita, superior e inferior individualmente, clique no ícone  e insira os valores desejados.

Faça mais com grades

Agora que você sabe como definir preferências para suas grades, continue lendo para saber como adicionar cores às grades e controlar sua visibilidade.

Adicionar cores

Mostrar ou ocultar grades

Adicionar cores

Deseja modificar a aparência das grades? Use o seletor de cores no Inspetor de propriedades para adicionar e alterar a cor da grade.

Adicionar cores a grades de layout e quadriculadas

A. Campo de cores B. Controle deslizante de cores C. Conta-gotas 

Clique na caixa ao lado de Tamanho do quadrado para grades quadriculadas e Colunas para grades de layout. 

No seletor de cores, você pode:

  • Ajustar a cor usando o campo de cor e o controle deslizante de cores.
  • Usar a ferramenta Conta-gotas para selecionar uma cor em uma prancheta.
  • Definir a opacidade do preenchimento usando o controle deslizante de cores ou digitando um valor em porcentagem. Se definir o valor como 0, a grade de layout será alterada para a exibição de contorno.

Ocultar e mostrar grades

Você pode controlar a visibilidade das grades de layout e quadriculadas usando a opção Ocultar grade de layout/quadriculada ou Mostrar grade de layout/quadriculada.

Ocultar grade de layout

Mostrar ou ocultar grades de layout

  • Selecione Exibir > Ocultar grade de layout. Você também pode pressionar Command + Shift + ' para ocultar grades de layout no macOS.
  • No Inspetor de propriedades, selecione um tipo de grade na lista suspensa Grade e marque a caixa de seleção ao lado da lista suspensa. Você também pode pressionar Ctrl + Shift + " para ocultar grades de layout no Windows.

Mostrar grade quadriculada

Mostrar ou ocultar grades quadriculadas

  • Selecione Exibir > Mostrar grade quadriculada. Você também pode pressionar Command + ' para mostrar grades quadriculadas no macOS.
  • No Inspetor de propriedades, selecione um tipo de grade na lista suspensa Grade e marque a caixa de seleção ao lado da lista suspensa. Você também pode pressionar Ctrl + " para mostrar grades quadriculadas no Windows.

Vídeo: Como faço para adicionar guias e grades de layout?

“Ao trabalhar em projetos de design, utilize guias para ajudar você na hora de alinhar objetos ou garantir que o espaço entre os elementos esteja correto”, recomenda Howard Pinsky, evangelista sênior do XD.

Você também pode baixar os arquivos de amostra para experimentar conforme assiste.

Arquivos de amostra

Você também pode baixar os arquivos de amostra para experimentar conforme assiste.

Arquivos de amostra

Dicas e truques

  • Para ajustar um objeto a uma grade de layout ou quadriculada, arraste o objeto em direção à grade até que uma das bordas do objeto esteja dentro da zona de ajuste da grade.
  • As guias são ajustadas aos objetos selecionados ou objetos de nível superior desenhados na tela. Para desativar o comportamento de ajuste, pressione  (no macOS) ou Ctrl (no Windows). 
  • Para posicionar a guia em incrementos de 10 px na tela, pressione Shift.
  • Para voltar à aparência padrão da grade quadriculada ou de layout, clique na opção Usar padrão na seção Grade do Inspetor de propriedades.

O que vem por aí?

Agora você sabe como posicionar e alinhar objetos em pranchetas usando guias e grades. Continue em frente e saiba mais sobre como usar repetições de grade para criar objetos com elementos repetíveis.

Tem alguma dúvida ou sugestão?

Pergunte à comunidade

Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe XD. Adoraríamos ver suas criações e ouvir o que você tem a dizer.

Logotipo da Adobe

Fazer logon em sua conta